overscroll-event-fired-to-document.tentative.html (2037B)
1 <!DOCTYPE HTML> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-actions.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="scroll_support.js"></script> 8 <style> 9 #targetDiv { 10 width: 200px; 11 height: 200px; 12 overflow: scroll; 13 } 14 15 #innerDiv { 16 width: 400px; 17 height: 400px; 18 } 19 </style> 20 21 <body style="margin:0" onload=runTest()> 22 <div id="targetDiv"> 23 <div id="innerDiv"> 24 </div> 25 </div> 26 </body> 27 28 <script> 29 var target_div = document.getElementById('targetDiv'); 30 var overscrolled_x_delta = 0; 31 var overscrolled_y_delta = 0; 32 function onOverscroll(event) { 33 assert_false(event.cancelable); 34 // overscroll events are bubbled when the target node is document. 35 assert_true(event.bubbles); 36 overscrolled_x_delta = event.deltaX; 37 overscrolled_y_delta = event.deltaY; 38 } 39 document.addEventListener("overscroll", onOverscroll); 40 41 function runTest() { 42 promise_test (async (t) => { 43 // Make sure that no overscroll event is sent to target_div. 44 target_div.addEventListener("overscroll", 45 t.unreached_func("target_div got unexpected overscroll event.")); 46 await waitForCompositorCommit(); 47 48 // Scroll up on target div and wait for the doc to get overscroll event. 49 await touchScrollInTarget(300, target_div, 'up'); 50 await waitFor(() => { return overscrolled_y_delta < 0; }, 51 'Document did not receive overscroll event after scroll up on target.'); 52 assert_equals(target_div.scrollTop, 0); 53 54 // Scroll left on target div and wait for the doc to get overscroll event. 55 await touchScrollInTarget(300, target_div, 'left'); 56 await waitFor(() => { return overscrolled_x_delta < 0; }, 57 'Document did not receive overscroll event after scroll left on target.'); 58 assert_equals(target_div.scrollLeft, 0); 59 }, 'Tests that the document gets overscroll event when no element scrolls ' + 60 'after touch scrolling.'); 61 } 62 </script>