negative-layout-overflow.html (873B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { 7 height: 1200px; 8 } 9 #header { 10 position: relative; 11 height: 100px; 12 } 13 #evil { 14 position: relative; 15 top: -900px; 16 height: 1000px; 17 width: 100px; 18 } 19 #changer { 20 height: 100px; 21 } 22 #anchor { 23 height: 100px; 24 background-color: green; 25 } 26 27 </style> 28 <div id="header"> 29 <div id="evil"></div> 30 </div> 31 <div id="changer"></div> 32 <div id="anchor"></div> 33 <script> 34 35 // Tests that the anchor selection algorithm correctly accounts for negative 36 // positioning when computing bounds for visibility. 37 38 test(() => { 39 document.scrollingElement.scrollTop = 250; 40 document.querySelector("#changer").style.height = "200px"; 41 assert_equals(document.scrollingElement.scrollTop, 350); 42 }, "Anchor selection accounts for negative positioning."); 43 44 </script>