smooth-scroll-nonstop.html (3172B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Noop smooth scrolls don't interrupt ongoing smooth scrolls</title> 5 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#concept-smooth-scroll"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 </head> 11 <body> 12 <style> 13 .scroller { 14 height: 200px; 15 width: 200px; 16 border: solid 1px black; 17 background-color: teal; 18 overflow-y: scroll; 19 overflow-x: hidden; 20 position: relative; 21 } 22 .box { 23 height: 50px; 24 width: 50px; 25 background-color: purple; 26 margin-top: 400px; 27 } 28 .space { 29 position: absolute; 30 height: 200vh; 31 width: 200vw; 32 } 33 </style> 34 <div id="scroller" class="scroller"> 35 <div class="space"></div> 36 <div id="box" class="box"></div> 37 </div> 38 <script> 39 const scroller = document.getElementById("scroller"); 40 const box = document.getElementById("box"); 41 42 async function test_smooth_scroll_nonstop(test, scroll_function, target_offset) { 43 await waitForScrollReset(test, scroller); 44 await waitForCompositorCommit(test, scroller); 45 46 const scrollend_promise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 47 const MAX_NO_MOVE_DURATION_MS = 1000; 48 let resolve_stuck_promise = null; 49 const stuck_promise = new Promise((resolve) => { 50 resolve_stuck_promise = resolve; 51 }); 52 let last_observed_offset = scroller.scrollTop; 53 let last_update_time = performance.now; 54 function run_scroll_function() { 55 if (scroller.scrollTop != last_observed_offset) { 56 last_update_time = performance.now(); 57 last_observed_offset = scroller.scrollTop; 58 } else { 59 if (performance.now() - last_update_time > MAX_NO_MOVE_DURATION_MS) { 60 resolve_stuck_promise(); 61 } 62 } 63 scroll_function(); 64 } 65 66 // Run the scroll function repeatedly. 67 const id = setInterval(run_scroll_function); 68 await Promise.any([scrollend_promise, stuck_promise]); 69 70 clearInterval(id); 71 assert_equals(scroller.scrollTop, target_offset, 72 "scroller reached the target offset"); 73 } 74 75 promise_test(async (t) => { 76 const target_offset = box.offsetTop; 77 const scroll_function = () => { 78 scroller.scrollTo({ top: target_offset, behavior: "smooth" }); 79 } 80 await test_smooth_scroll_nonstop(test, scroll_function, target_offset); 81 }, "noop scrollTo doesn't interrupt ongoing smooth scroll."); 82 83 promise_test(async (t) => { 84 const target_offset = box.offsetTop; 85 const scroll_function = () => { 86 box.scrollIntoView({ block: "start", behavior: "smooth" }); 87 } 88 await test_smooth_scroll_nonstop(test, scroll_function, target_offset); 89 }, "noop scrollIntoView doesn't interrupt ongoing smooth scroll."); 90 </script> 91 </body> 92 </html>