scrollend-event-fired-after-sequence-of-scrolls.tentative.html (3152B)
1 <!DOCTYPE HTML> 2 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="scroll_support.js"></script> 9 <style> 10 #targetDiv { 11 width: 200px; 12 height: 200px; 13 overflow: scroll; 14 } 15 16 #innerDiv { 17 width: 4000px; 18 height: 4000px; 19 } 20 </style> 21 22 <body style="margin:0" onload=runTest()> 23 <div id="targetDiv"> 24 <div id="innerDiv"> 25 </div> 26 </div> 27 </body> 28 29 <script> 30 const target_div = document.getElementById('targetDiv'); 31 32 async function testWithMovePath(t, move_path) { 33 // Skip the test on a Mac as they do not support touch screens. 34 const isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0; 35 if (isMac) 36 return; 37 38 await resetTargetScrollState(t, target_div); 39 await waitForCompositorReady(); 40 41 verifyNoScrollendOnDocument(t); 42 43 let scrollend_count = 0; 44 const scrollend_listener = () => { scrollend_count += 1; }; 45 target_div.addEventListener("scrollend", scrollend_listener); 46 t.add_cleanup(() => { target_div.removeEventListener('scrollend', scrollend_listener); }); 47 48 const pointercancel_listener = () => { 49 assert_equals(scrollend_count, 0, 'scrollend should happen after pointercancel.'); 50 }; 51 target_div.addEventListener("pointercancel", pointercancel_listener); 52 t.add_cleanup(() => { target_div.removeEventListener('pointercancel', pointercancel_listener); }); 53 54 // Because we have several pointer moves, we choose bigger timeout. 55 const timeoutMs = 3000; 56 const targetPointercancelPromise = waitForPointercancelEvent(t, target_div, timeoutMs); 57 const targetScrollendPromise = createScrollendPromiseForTarget(t, target_div, timeoutMs); 58 59 await touchScrollInTargetSequentiallyWithPause(target_div, move_path); 60 61 // Because we start scrolling after pointerdown, there is no pointerup, instead the target 62 // will receive a pointercancel, so we wait for pointercancel, and then continue. 63 await targetPointercancelPromise; 64 await targetScrollendPromise; 65 await verifyScrollStopped(t, target_div); 66 assert_equals(scrollend_count, 1, 'Only one scrollend event should be fired'); 67 } 68 69 function runTest() { 70 promise_test (async (t) => { 71 // Scroll down & up & down on target div and wait for the target_div to get scrollend event. 72 const move_path = [ 73 { x: 0, y: -80 }, // Scroll down 74 { x: 0, y: -40 }, // Scroll up 75 { x: 0, y: -80 }, // Scroll down 76 ]; 77 await testWithMovePath(t, move_path); 78 }, "Move down, up and down again, receive scrollend event only once"); 79 80 promise_test (async (t) => { 81 // Scroll right & left & right on target div and wait for the target_div to get scrollend event. 82 const move_path = [ 83 { x: -80, y: 0 }, // Scroll right 84 { x: -40, y: 0 }, // Scroll left 85 { x: -80, y: 0 }, // Scroll right 86 ]; 87 await testWithMovePath(t, move_path); 88 }, "Move right, left and right again, receive scrollend event only once"); 89 90 } 91 </script>