after-scrollable-range-shrinkage-002.html (1507B)
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=1779404"> 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 => requestAnimationFrame(resolve)); 22 await new Promise(resolve => t.step_timeout(resolve, 0)); 23 24 // Shrink the first element so that scroll anchoring happens. 25 document.querySelectorAll("div")[0].style.height = "100vh"; 26 27 await new Promise(resolve => requestAnimationFrame(resolve)); 28 await new Promise(resolve => requestAnimationFrame(resolve)); 29 30 const scrollAnchorPosition = window.scrollY; 31 32 // Scroll back to (0, 0) to calculate the expected scroll anchor element 33 // position. 34 window.scrollTo(0, 0); 35 anchorRect = anchor.getBoundingClientRect(); 36 assert_equals(scrollAnchorPosition, anchorRect.y); 37 }, "Scroll anchoring properly works after scrollable range shrinkage"); 38 </script> 39 </html>