pointerevent_touch-action-verification.html (2484B)
1 <!doctype html> 2 <html> 3 <head> 4 <!-- This file tests the additional touch-action values that are not in the main spec 5 but are mostly implemented by browsers. It should be integrated into main test 6 suite when they are accepted into the specification. --> 7 <title>touch-action: basic verification</title> 8 <meta name="assert" content="The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by the user agent. 9 pinch-zoom: The user agent MAY consider touches that begin on the element only for the purposes of zooming in and out. 10 <meta name="viewport" content="width=device-width"> 11 <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css"> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 </head> 15 <body onload="run()"> 16 <h2>Pointer Events touch-action attribute support</h2> 17 <h4 id="desc">Test Description: Test will automatically check parsing behaviour of various touch-action combinations.</h4> 18 <script type='text/javascript'> 19 var detected_pointertypes = {}; 20 21 setup({ explicit_done: true }); 22 23 function run() { 24 var tests = document.querySelectorAll('.test'); 25 //TA 15.20 26 for (var i = 0; i < tests.length; i++) { 27 test(function() { 28 var style = window.getComputedStyle(tests[i]); 29 assert_equals(tests[i].attributes.expected.value, style.touchAction); 30 }, tests[i].id); 31 } 32 done(); 33 } 34 </script> 35 <h1>touch-action: basic verification</h1> 36 <div id="complete-notice"> 37 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 38 </div> 39 <div id="log"></div> 40 <div class="test" id="explicit-pinch-zoom" style="touch-action: pinch-zoom;" expected="pinch-zoom"></div> 41 <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> 42 <div class="test" id="explicit-pinch-zoom-pan-x-pan-y" style="touch-action: pinch-zoom pan-x pan-y;" expected="manipulation"></div> 43 <div class="test" id="explicit-invalid-14" style="touch-action: pinch-zoom none;" expected="auto"></div> 44 </body> 45 </html>