adjustment-followed-by-scrollBy.html (2226B)
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=1874551"> 9 <style> 10 div { 11 height: round(20vh, 1px); 12 } 13 </style> 14 <div></div> 15 <div></div> 16 <div></div> 17 <div></div> 18 <div></div> 19 <div></div> 20 <div id="center" style="height: 100px; background-color: blue;"></div> 21 <div></div> 22 <div></div> 23 <div></div> 24 <div></div> 25 <div></div> 26 <div></div> 27 <script> 28 promise_test(async t => { 29 assert_equals(window.scrollY, 0); 30 31 // Center an element. 32 center.scrollIntoView({ block: "center", behavior: "instant" }); 33 await new Promise(resolve => window.addEventListener("scroll", resolve)); 34 35 const originalPosition = center.getBoundingClientRect().top; 36 37 // Given that now the element is centered, one of div elements above the 38 // centered element is used as the scroll anchor node. Hide two div elements, 39 // the first div and the div element just above the centered one to move the 40 // anchor node, thus it will trigger scroll anchoring adjustment. 41 center.previousElementSibling.style.display = "none"; 42 document.querySelectorAll("div")[0].style.display = "none"; 43 44 // And adjust the scroll position where the centered element is still 45 // positioned at the center of the scroll container. 46 window.scrollBy(0, center.getBoundingClientRect().top - originalPosition); 47 await new Promise(resolve => window.addEventListener("scroll", resolve)); 48 49 const centeredPosition = center.getBoundingClientRect().top; 50 51 // Now try to scrollIntoView({ block: "center" }) and make sure the position 52 // is unchanged. 53 center.scrollIntoView({ block: "center", behavior: "instant" }); 54 55 // Wait two frames to be able to scroll if it's possible. 56 await new Promise(resolve => requestAnimationFrame(resolve)); 57 await new Promise(resolve => requestAnimationFrame(resolve)); 58 59 assert_equals(centeredPosition, center.getBoundingClientRect().top); 60 }, "Scroll anchoring followed by scrollBy call"); 61 </script> 62 </html>