anchor-scroll-update-005.html (1370B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Tests that anchored element should update location after scroll offset changes caused by scroller resizing</title> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 6 <link rel="match" href="reference/anchor-scroll-update-005-ref.html"> 7 <style> 8 #cb { 9 position: absolute; 10 inset: 0; 11 } 12 #scroller { 13 margin-top: 300px; 14 overflow-y: scroll; 15 height: 100px; 16 } 17 #scroller.changed { height: 200px; } 18 #spacer { height: 400px; } 19 #anchor { anchor-name: --a; } 20 #anchored { 21 position: absolute; 22 width: 100px; 23 height: 100px; 24 background-color: green; 25 top: anchor(top); 26 left: 0; 27 position-anchor: --a; 28 position-visibility: always; 29 } 30 </style> 31 <div id="cb"> 32 <div id="scroller"> 33 <div id="anchor"></div> 34 <div id="spacer"></div> 35 </div> 36 <div id="anchored"></div> 37 </div> 38 <script> 39 function raf() { 40 return new Promise(resolve => requestAnimationFrame(resolve)); 41 } 42 43 async function runTest() { 44 const scroller = document.getElementById('scroller'); 45 scroller.scrollTop = 300; 46 47 await raf(); 48 await raf(); 49 50 scroller.classList.add('changed'); 51 document.documentElement.classList.remove('reftest-wait'); 52 53 // Should change scroll offset and scroll adjustment to 200. 54 } 55 runTest(); 56 </script>