heuristic-with-offset-update.html (1805B)
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 <html> 7 <head> 8 <style type="text/css"> 9 #scroller { 10 overflow: scroll; 11 height: 500px; 12 height: 500px; 13 } 14 #before { 15 height: 200px; 16 } 17 #anchor { 18 position: relative; 19 width: 200px; 20 height: 200px; 21 margin-bottom: 500px; 22 background-color: blue; 23 /* 24 * To trigger the Gecko bug that's being regression-tested here, we 25 * need 'top' to start out at a non-'auto' value, so that the 26 * dynamic change can trigger Gecko's "RecomputePosition" fast path 27 */ 28 top: 0px; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="scroller"> 34 <div id="before"> 35 </div> 36 <div id="anchor"> 37 </div> 38 </div> 39 40 <script type="text/javascript"> 41 test(() => { 42 let scroller = document.querySelector('#scroller'); 43 let before = document.querySelector('#before'); 44 let anchor = document.querySelector('#anchor'); 45 46 // Scroll down to select #anchor as a scroll anchor 47 scroller.scrollTop = 200; 48 49 // Adjust the 'top' of #anchor, which should trigger a suppression 50 anchor.style.top = '10px'; 51 52 // Expand #before and make sure we don't apply an adjustment 53 before.style.height = '300px'; 54 assert_equals(scroller.scrollTop, 200); 55 }, 'Positioned ancestors with dynamic changes to offsets trigger scroll suppressions.'); 56 </script> 57 </body> 58 </html>