after-scrollable-range-shrinkage-004.html (1705B)
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=1856088"> 9 <div style="height: 500vh;"></div> 10 <div id="anchor" style="height: 10px; background-color: blue;"></div> 11 <div style="height: 200vh;"></div> 12 <script> 13 promise_test(async t => { 14 assert_equals(window.scrollY, 0); 15 16 let anchorRect = anchor.getBoundingClientRect(); 17 // Scroll to the anchor node. 18 window.scrollBy(0, anchorRect.y); 19 assert_equals(window.scrollY, anchorRect.y); 20 21 await new Promise(resolve => t.step_timeout(resolve, 0)); 22 23 // Shrink the first element so that scroll anchoring happens. 24 document.querySelectorAll("div")[0].style.height = "200vh"; 25 // Flush the change. 26 document.querySelectorAll("div")[0].getBoundingClientRect(); 27 28 await new Promise(resolve => window.addEventListener("scroll", resolve)); 29 30 // Shrink the first element more. 31 document.querySelectorAll("div")[0].style.height = "100vh"; 32 33 await new Promise(resolve => requestAnimationFrame(resolve)); 34 await new Promise(resolve => requestAnimationFrame(resolve)); 35 36 const scrollAnchorPosition = window.scrollY; 37 38 // Scroll back to (0, 0) to calculate the expected scroll anchor element 39 // position. 40 window.scrollTo(0, 0); 41 anchorRect = anchor.getBoundingClientRect(); 42 assert_equals(scrollAnchorPosition, anchorRect.y); 43 }, "Scroll anchoring properly works after scrollable range shrinkage"); 44 </script> 45 </html>