zero-scroll-offset-001.html (1758B)
1 <!DOCTYPE html> 2 <head> 3 <title>Test that scroll anchoring is suppressed when scroll offset is zero.</title> 4 <link rel="author" title="Nick Burris" href="mailto:nburris@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <style> 10 #header { 11 height: 100px; 12 border: 1px solid black; 13 overflow-anchor: none; 14 } 15 #content { 16 height: 200vh; 17 } 18 </style> 19 <div id="header"></div> 20 <div id="content">abc</div> 21 <script> 22 window.addEventListener("scroll", function() { 23 if (document.scrollingElement.scrollTop > 0) { 24 // On the first scroll event, shrink the header. Scroll anchoring anchors to 25 // content, but the header shrinks by more than the scroll offset so the 26 // resulting scroll position is zero. 27 step_timeout(function() { 28 document.querySelector("#header").style.height = "50px"; 29 }, 0); 30 } else { 31 // On the second scroll event, grow the header. Since the scroll offset is 32 // zero, scroll anchoring should be suppressed. Otherwise, scroll anchoring 33 // would anchor to content and the resulting scroll position would be 50px. 34 step_timeout(function() { 35 document.querySelector("#header").style.height = "100px"; 36 }, 0); 37 } 38 }); 39 40 async_test(function(t) { 41 // Scroll down a bit to trigger the scroll event listener. 42 window.scrollTo(0, 10); 43 44 window.requestAnimationFrame(function() { 45 window.requestAnimationFrame(function() { 46 window.requestAnimationFrame(t.step_func_done(() => { 47 assert_equals(document.scrollingElement.scrollTop, 0); 48 })); 49 }); 50 }); 51 52 }, "Scroll anchoring suppressed when scroll offset is zero."); 53 </script>