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