anchor-scroll-update-002.html (1860B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Anchored elements should update location on `position-anchor` property changes</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-ref.html"> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 body { 10 font: 20px/1 Ahem; 11 margin: 0; 12 } 13 14 #scroll-container { 15 width: 400px; 16 height: 400px; 17 overflow: scroll; 18 } 19 20 #scroll-contents { 21 width: 1000px; 22 height: 1000px; 23 position: relative; 24 } 25 26 #placefiller-above-anchor { 27 height: 500px; 28 } 29 30 #placefiller-before-anchor { 31 display: inline-block; 32 width: 500px; 33 } 34 35 #anchor { 36 anchor-name: --anchor; 37 } 38 39 #inner-anchored { 40 color: green; 41 position: absolute; 42 left: anchor(--anchor left); 43 bottom: anchor(--anchor top); 44 } 45 46 #outer-anchored { 47 color: yellow; 48 position: absolute; 49 left: anchor(--anchor left); 50 top: anchor(--anchor bottom); 51 } 52 </style> 53 54 <div style="position: relative"> 55 <div id="scroll-container"> 56 <div id="scroll-contents"> 57 <div id="placefiller-above-anchor"></div> 58 <div id="placefiller-before-anchor"></div> 59 <span id="anchor">anchor</span> 60 <div id="inner-anchored">inner-anchored</div> 61 </div> 62 </div> 63 <div id="outer-anchored">outer-anchored</div> 64 </div> 65 66 <script> 67 const scroller = document.getElementById('scroll-container'); 68 scroller.scrollTop = 300; 69 scroller.scrollLeft = 450; 70 71 function raf() { 72 return new Promise(resolve => requestAnimationFrame(resolve)); 73 } 74 75 async function runTest() { 76 await raf(); 77 await raf(); 78 document.getElementById('inner-anchored').style.positionAnchor = '--anchor'; 79 document.getElementById('outer-anchored').style.positionAnchor = '--anchor'; 80 document.documentElement.classList.remove('reftest-wait'); 81 } 82 runTest(); 83 </script> 84 </html>