exclude-sticky.html (905B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 8 body { height: 400vh; margin: 0; } 9 #sticky, #content { width: 200px; height: 100px; } 10 #sticky { position: sticky; left: 100px; top: 50px; } 11 #before { height: 50px; } 12 #content { margin-top: 100px; } 13 14 </style> 15 <div id="sticky">sticky</div> 16 <div id="before"></div> 17 <div id="content">content</div> 18 <script> 19 20 // Tests that the anchor selection algorithm skips sticky-positioned elements. 21 22 test(() => { 23 document.scrollingElement.scrollTop = 150; 24 document.querySelector("#before").style.height = "100px"; 25 assert_equals(document.scrollingElement.scrollTop, 200); 26 }, "Sticky-positioned headers shouldn't be chosen as scroll anchors (we should use 'content' instead)"); 27 28 </script>