pointerevent_touch-action-inherit_parent-none_touch.html (2969B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>touch-action: inherit from parent: none</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="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="pointerevent_support.js"></script> 13 <style> 14 .scroller { 15 touch-action: none; 16 } 17 #scrollTarget { 18 margin: 10px; 19 width: 125vh; 20 height: 125vh; 21 } 22 </style> 23 </head> 24 <body> 25 <h1>Pointer Events: effective touch-action is "none" when parent has "none" 26 and target has "auto"</h1> 27 <div class="scroller" id="target0"> 28 <div id="scrollTarget"> 29 Try to scroll DOWN then RIGHT from here. 30 </div> 31 </div> 32 <input type="button" id="btnComplete" value="Complete test"> 33 <div id="log"></div> 34 </body> 35 <script type='text/javascript'> 36 "use strict"; 37 window.onload = async () => { 38 const target0 = document.getElementById("target0"); 39 const btnComplete = document.getElementById("btnComplete"); 40 41 assert_equals(getComputedStyle(target0).touchAction,'none', 42 'Expect touch-action:none'); 43 44 let pointerup_received = false; 45 let pointercancel_received = false; 46 let scroll_received = false; 47 48 target0.addEventListener("pointerup", 49 () => pointerup_received = true); 50 target0.addEventListener("pointercancel", 51 () => pointercancel_received = true); 52 target0.addEventListener("scroll", 53 () => scroll_received = true); 54 55 promise_test(async () => { 56 const button_complete_click = getEvent("click", btnComplete); 57 58 await touchScrollInTarget(scrollTarget, 'down'); 59 await touchScrollInTarget(scrollTarget, 'right'); 60 await clickInTarget("touch", btnComplete); 61 await button_complete_click; 62 63 assert_true( 64 pointerup_received, 65 "expected pointerup event with scroll gestures on " + 66 "touch-action:none"); 67 assert_false( 68 pointercancel_received, 69 "unexpected pointercancel event with scroll gestures on " + 70 "touch-action:none"); 71 assert_false( 72 scroll_received, 73 "unexpected scroll event with scroll gestures on " + 74 "touch-action:none"); 75 assert_equals(target0.scrollLeft, 0, 76 "expected scrollLeft 0 in the end of the test"); 77 assert_equals(target0.scrollTop, 0, 78 "expected scrollTop 0 in the end of the test"); 79 }, "touch-action attribute test"); 80 }; 81 </script> 82 </html>