opt-out-dynamic-scroller.html (1552B)
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 a scrolling element has the 25 // same effect as initial styling 26 27 test(() => { 28 let scroller = document.querySelector("#scroller"); 29 let before = document.querySelector("#before"); 30 31 // Scroll down so that #content is the first element in the viewport 32 scroller.scrollTop = 100; 33 34 // Change the height of #before to trigger a scroll adjustment. This ensures 35 // that #content was selected as a scroll anchor 36 before.style.height = "100px"; 37 assert_equals(scroller.scrollTop, 150); 38 39 // Now set 'overflow-anchor: none' on #scroller. This should invalidate the 40 // scroll anchor, and #scroller shouldn't be able to select an anchor anymore 41 scroller.className = 'no'; 42 43 // Change the height of #before and make sure we don't adjust. This ensures 44 // that #content is not a scroll anchor 45 before.style.height = "150px"; 46 assert_equals(scroller.scrollTop, 150); 47 }, "Dynamically styling 'overflow-anchor: none' on the scroller element should prevent scroll anchoring"); 48 49 </script>