<!doctype html>
<html>
    <head>
<!-- This file tests the additional touch-action values that are not in the main spec
     but are mostly implemented by browsers. It should be integrated into main test
     suite when they are accepted into the specification. -->
        <title>touch-action: basic verification</title>
        <meta name="assert" content="The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by the user agent.
        pinch-zoom: The user agent MAY consider touches that begin on the element only for the purposes of zooming in and out.
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
    </head>
    <body onload="run()">
        <h2>Pointer Events touch-action attribute support</h2>
        <h4 id="desc">Test Description: Test will automatically check parsing behaviour of various touch-action combinations.</h4>
        <script type='text/javascript'>
            var detected_pointertypes = {};

            setup({ explicit_done: true });

            function run() {
                var tests = document.querySelectorAll('.test');
                //TA 15.20
                for (var i = 0; i < tests.length; i++) {
                    test(function() {
                      var style = window.getComputedStyle(tests[i]);
                      assert_equals(tests[i].attributes.expected.value, style.touchAction);
                    }, tests[i].id);
                }
                done();
            }
        </script>
        <h1>touch-action: basic verification</h1>
        <div id="complete-notice">
            <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
        </div>
        <div id="log"></div>
        <div class="test" id="explicit-pinch-zoom" style="touch-action: pinch-zoom;" expected="pinch-zoom"></div>
        <div class="test" id="explicit-pinch-zoom-pan-x-pan-up" style="touch-action: pinch-zoom pan-x pan-up;" expected="pan-x pan-up pinch-zoom"></div>
        <div class="test" id="explicit-pinch-zoom-pan-x-pan-y" style="touch-action: pinch-zoom pan-x pan-y;" expected="manipulation"></div>
        <div class="test" id="explicit-invalid-14" style="touch-action: pinch-zoom none;" expected="auto"></div>
    </body>
</html>
