pointerevent_touch-action-illegal.html (2616B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>touch-action: illegal</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="pointerevent_support.js"></script> 10 <style> 11 #target0 { 12 width: 700px; 13 height: 50px; 14 touch-action: pan-x none; 15 } 16 #target1 { 17 width: 700px; 18 height: 50px; 19 background: black; 20 margin-top: 5px; 21 touch-action: pan-y none; 22 } 23 #target2 { 24 width: 700px; 25 height: 50px; 26 background: black; 27 margin-top: 5px; 28 touch-action: auto none; 29 } 30 </style> 31 </head> 32 <body onload="run()"> 33 <h1>Pointer Events touch-action attribute support</h1> 34 <h4 id="desc">Test Description: Test will automatically check behaviour of following combinations: 'pan-x none', 'pan-y none', 'auto none'</h4> 35 <div id="target0"></div> 36 <div id="target1"></div> 37 <div id="target2"></div> 38 <script type='text/javascript'> 39 var detected_pointertypes = {}; 40 41 setup({ explicit_done: true }); 42 add_completion_callback(showPointerTypes); 43 44 function run() { 45 var target0 = document.getElementById('target0'); 46 var target1 = document.getElementById('target1'); 47 var target2 = document.getElementById('target2'); 48 49 test(function() { 50 assert_true(getComputedStyle(target0).touchAction == 'auto', "'pan-x none' is corrected properly"); 51 }, "'pan-x none' is corrected properly"); 52 test(function() { 53 assert_true(getComputedStyle(target1).touchAction == 'auto', "'pan-y none' is corrected properly"); 54 }, "'pan-y none' is corrected properly"); 55 test(function() { 56 assert_true(getComputedStyle(target2).touchAction == 'auto', "'auto none' is corrected properly"); 57 }, "'auto none' is corrected properly"); 58 done(); 59 } 60 </script> 61 <h1>touch-action: none</h1> 62 <div id="complete-notice"> 63 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 64 </div> 65 <div id="log"></div> 66 </body> 67 </html>