after-scrollable-range-shrinkage-001.html (1501B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1852818"> 9 <style> 10 div { 11 height: 100vh; 12 } 13 </style> 14 <div></div> 15 <div id="anchor" style="height: 10px; background-color: blue;"></div> 16 <div></div> 17 <script> 18 promise_test(async t => { 19 assert_equals(window.scrollY, 0); 20 21 let anchorRect = anchor.getBoundingClientRect(); 22 // Scroll to the anchor node. 23 window.scrollBy(0, anchorRect.y); 24 assert_equals(window.scrollY, anchorRect.y); 25 26 await new Promise(resolve => t.step_timeout(resolve, 0)); 27 28 // Expand the first element so that scroll anchoring happens. 29 document.querySelectorAll("div")[0].style.height = "200vh"; 30 // Flush the change. 31 document.querySelectorAll("div")[0].getBoundingClientRect(); 32 33 await new Promise(resolve => window.addEventListener("scroll", resolve)); 34 35 // Revert the height change in a scroll event handler. 36 document.querySelectorAll("div")[0].style.height = ""; 37 38 await new Promise(resolve => requestAnimationFrame(resolve)); 39 await new Promise(resolve => requestAnimationFrame(resolve)); 40 41 assert_equals(window.scrollY, anchorRect.y); 42 }, "Scroll anchoring properly works after scrollable range shrinkage"); 43 </script> 44 </html>