clamp-negative-overflow.html (2032B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> 5 <head> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style type="text/css"> 9 #scroller { 10 overflow: scroll; 11 width: 500px; 12 height: 500px; 13 } 14 #anchor { 15 position: relative; 16 width: 100px; 17 height: 100px; 18 margin-top: 100px; 19 margin-bottom: 1000px; 20 background-color: blue; 21 } 22 #positioned { 23 position: absolute; 24 width: 10px; 25 height: 10px; 26 top: -200px; 27 background-color: yellow; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="scroller"> 33 <div id="anchor"> 34 <div id="positioned"> 35 </div> 36 </div> 37 </div> 38 <script type="text/javascript"> 39 test(() => { 40 let scroller = document.querySelector('#scroller'); 41 let positioned = document.querySelector('#positioned'); 42 43 // Scroll down to select #anchor as an anchor node 44 scroller.scrollTop = 20; 45 46 // Move #positioned downwards, which will move the unclamped scrollable 47 // overflow rect of #anchor downards as well 48 positioned.style.top = '-180px'; 49 // To trigger the bug that this regression tests in Gecko, we need 50 // to not take Gecko's relative positioning fast path. To do 51 // this, change the 'left' of #positioned from 'auto' to '0px'. 52 positioned.style.left = '0px'; 53 54 // The implementation should clamp the scrollable overflow rect 55 // before the start-edge of the anchor node, and not apply an 56 // adjustment 57 assert_equals(scroller.scrollTop, 20); 58 }, 'scrollable overflow before the start-edge of the anchor node should be clamped'); 59 </script> 60 </body> 61 </html>