snap-fling-in-large-area.html (2625B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Fling within a large target is not interrupted by scroll snap</title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/"/> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/dom/events/scrolling/scroll_support.js"></script> 12 </head> 13 <body> 14 <style> 15 main { 16 scroll-snap-type: y; 17 18 overflow: auto; 19 height: 100vh; 20 } 21 22 div { 23 scroll-snap-align: start; 24 width: 80vw; 25 height: 800vh; 26 background: yellow; 27 border: solid black 3px; 28 } 29 </style> 30 <main id="scroller"> 31 <div></div> 32 </main> 33 <script> 34 promise_test(async (t) => { 35 await waitForCompositorReady(); 36 const scroller = document.getElementById("scroller"); 37 assert_equals(scroller.scrollTop, 0, "scroller not initially scrolled"); 38 39 let initial_scroll_top = scroller.scrollTop; 40 let last_scroll_top = initial_scroll_top; 41 const scroll_listener = () => { 42 assert_greater_than_equal(scroller.scrollTop, last_scroll_top, 43 "fling did not move backwards."); 44 last_scroll_top = scroller.scrollTop; 45 } 46 scroller.addEventListener("scroll", scroll_listener); 47 // We expect pointercancel to be triggered when scrolling starts due to 48 // the touch-fling. If we instead get a pointerup event, we know that 49 // scrolling isn't happening and we can immediately fail the test instead 50 // of waiting for a timeout. 51 const pointer_promise = () => { 52 return new Promise((resolve, reject) => { 53 document.addEventListener("pointerup", reject, { once: true }); 54 document.addEventListener("pointercancel", resolve, { once: true }); 55 }); 56 }; 57 58 try { 59 const scrollend_promise = waitForScrollendEventNoTimeout(scroller); 60 await touchFlingInTarget(/*pixels_to_scroll*/100, scroller, "down"); 61 await pointer_promise; 62 await scrollend_promise; 63 } catch(e) { 64 assert_unreached("Failed to trigger touch fling."); 65 } 66 67 assert_greater_than(last_scroll_top, initial_scroll_top, 68 "received at least one scroll update."); 69 assert_greater_than_equal(scroller.scrollTop, last_scroll_top, 70 "fling did not move backwards at the end of the scroll."); 71 }, "fling within a large area is not interrupted by scroll snap"); 72 </script> 73 </body> 74 </html>