opt-out-dynamic.html (1675B)
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 #scroller { 9 overflow: scroll; 10 width: 300px; 11 height: 300px; 12 } 13 #before { height: 50px; } 14 #content { margin-top: 100px; margin-bottom: 600px; } 15 .no { overflow-anchor: none; } 16 17 </style> 18 <div id="scroller"> 19 <div id="before"></div> 20 <div id="content">content</div> 21 </div> 22 <script> 23 24 // Tests that dynamic styling 'overflow-anchor' on an anchor node has the 25 // same effect as initial styling 26 27 test(() => { 28 let scroller = document.querySelector("#scroller"); 29 let before = document.querySelector("#before"); 30 let content = document.querySelector("#content"); 31 32 // Scroll down so that #content is the first element in the viewport 33 scroller.scrollTop = 100; 34 35 // Change the height of #before to trigger a scroll adjustment. This ensures 36 // that #content was selected as a scroll anchor 37 before.style.height = "100px"; 38 assert_equals(scroller.scrollTop, 150); 39 40 // Now set 'overflow-anchor: none' on #content. This should invalidate the 41 // scroll anchor, and #scroller should recalculate its anchor. There are no 42 // other valid anchors in the viewport, so there should be no anchor. 43 content.className = 'no'; 44 45 // Change the height of #before and make sure we don't adjust. This ensures 46 // that #content was not selected as a scroll anchor 47 before.style.height = "150px"; 48 assert_equals(scroller.scrollTop, 150); 49 }, "Dynamically styling 'overflow-anchor: none' on the anchor node should prevent scroll anchoring"); 50 51 </script>