pointerevent_touch-action-span-none-test_touch.html (3609B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Span touch-action test</title> 5 <meta name="timeout" content="long"> 6 <meta name="assert" content="TA15.18 - The touch-action CSS property applies to all elements except non-replaced inline elements."> 7 <meta name="viewport" content="width=device-width"> 8 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="pointerevent_support.js"></script> 15 <style> 16 #target0 { 17 height: 150px; 18 width: 200px; 19 overflow-y: auto; 20 background: black; 21 padding: 100px; 22 position: relative; 23 } 24 #testspan { 25 touch-action: none; 26 font-size: 72pt; 27 padding: 0px 0px 180px 0px; 28 border: 2px solid red; 29 } 30 </style> 31 </head> 32 <body onload="run()"> 33 <h2>Pointer Events touch-action attribute support</h2> 34 <h4 id="desc">Test Description: Try to scroll element DOWN then RIGHT starting your touch inside of the span element. Tap Complete button under the rectangle when done.</h4> 35 <p>Note: this test is for touch only</p> 36 <div id="target0"> 37 <span id="testspan"> 38 Test span 39 </span> 40 </div> 41 <input type="button" id="btnComplete" value="Complete test"> 42 43 <script type='text/javascript'> 44 var detected_pointertypes = {}; 45 add_completion_callback(showPointerTypes); 46 47 function run() { 48 var target0 = document.getElementById("target0"); 49 var btnComplete = document.getElementById("btnComplete"); 50 var actions_promise; 51 52 //TA 15.18 53 var test_touchaction = async_test("touch-action attribute test in element"); 54 55 on_event(btnComplete, 'click', function(event) { 56 test_touchaction.step(function() { 57 assert_not_equals(target0.scrollLeft, 0, "span scroll x offset should not be 0 in the end of the test"); 58 assert_not_equals(target0.scrollTop, 0, "span scroll y offset should not be 0 in the end of the test"); 59 }); 60 61 // Make sure the test finishes after all the input actions are completed. 62 actions_promise.then( () => { 63 test_touchaction.done(); 64 }); 65 updateDescriptionComplete(); 66 }); 67 68 on_event(btnComplete, 'pointerdown', function(event) { 69 detected_pointertypes[event.pointerType] = true; 70 }); 71 72 // Inject touch inputs. 73 actions_promise = touchScrollInTarget(testspan, 'down').then(function() { 74 return touchScrollInTarget(testspan, 'right'); 75 }).then(function() { 76 return clickInTarget("touch", btnComplete); 77 }); 78 } 79 </script> 80 <h1>touch-action: none</h1> 81 <div id="complete-notice"> 82 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 83 </div> 84 <div id="log"></div> 85 </body> 86 </html>