overscroll-event-fired-to-scrolled-element.tentative.html (2187B)
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 #scrollableDiv { 10 width: 200px; 11 height: 200px; 12 overflow: scroll; 13 position: absolute; 14 left: 150px; 15 top: 150px; 16 } 17 18 #innerDiv { 19 width: 250px; 20 height: 250px; 21 } 22 </style> 23 24 <body style="margin:0" onload=runTest()> 25 <div id="scrollableDiv"> 26 <div id="innerDiv"> 27 </div> 28 </div> 29 </body> 30 31 <script> 32 var scrolling_div = document.getElementById('scrollableDiv'); 33 var overscrolled_x_delta = 0; 34 var overscrolled_y_delta = 0; 35 function onOverscroll(event) { 36 assert_false(event.cancelable); 37 assert_false(event.bubbles); 38 overscrolled_x_delta = event.deltaX; 39 overscrolled_y_delta = event.deltaY; 40 } 41 scrolling_div.addEventListener("overscroll", onOverscroll); 42 43 function runTest() { 44 promise_test (async (t) => { 45 // Make sure that no overscroll event is sent to document. 46 document.addEventListener("overscroll", 47 t.unreached_func("Document got unexpected overscroll event.")); 48 await waitForCompositorCommit(); 49 50 // Do a horizontal scroll and wait for overscroll event. 51 await touchScrollInTarget(100, scrolling_div , 'right'); 52 await waitFor(() => { return overscrolled_x_delta > 0; }, 53 'Scroller did not receive overscroll event after horizontal scroll.'); 54 assert_equals(scrolling_div.scrollWidth - scrolling_div.scrollLeft, 55 scrolling_div.clientWidth); 56 57 overscrolled_x_delta = 0; 58 overscrolled_y_delta = 0; 59 60 // Do a vertical scroll and wait for overscroll event. 61 await touchScrollInTarget(100, scrolling_div, 'down'); 62 await waitFor(() => { return overscrolled_y_delta > 0; }, 63 'Scroller did not receive overscroll event after vertical scroll.'); 64 assert_equals(scrolling_div.scrollHeight - scrolling_div.scrollTop, 65 scrolling_div.clientHeight); 66 }, 'Tests that the scrolled element gets overscroll event after fully scrolling by touch.'); 67 } 68 </script>