| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Anchored elements should keep "pinned" to the anchor during scroll updates</title> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> |
| <link rel="match" href="reference/anchor-scroll-ref.html"> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <style> |
| body { |
| font: 20px/1 Ahem; |
| margin: 0; |
| } |
| |
| #scroll-container { |
| width: 400px; |
| height: 400px; |
| overflow: scroll; |
| } |
| |
| #scroll-contents { |
| width: 1000px; |
| height: 1000px; |
| position: relative; |
| } |
| |
| #placefiller-above-anchor { |
| height: 500px; |
| } |
| |
| #placefiller-before-anchor { |
| display: inline-block; |
| width: 500px; |
| } |
| |
| #anchor { |
| anchor-name: --anchor; |
| } |
| |
| #inner-anchored { |
| color: green; |
| position: absolute; |
| left: anchor(--anchor left); |
| bottom: anchor(--anchor top); |
| position-anchor: --anchor; |
| } |
| |
| #outer-anchored { |
| color: yellow; |
| position: absolute; |
| left: anchor(--anchor left); |
| top: anchor(--anchor bottom); |
| position-anchor: --anchor; |
| } |
| </style> |
| |
| <div style="position: relative"> |
| <div id="scroll-container"> |
| <div id="scroll-contents"> |
| <div id="placefiller-above-anchor"></div> |
| <div id="placefiller-before-anchor"></div> |
| <span id="anchor">anchor</span> |
| <div id="inner-anchored">inner-anchored</div> |
| </div> |
| </div> |
| <div id="outer-anchored">outer-anchored</div> |
| </div> |
| |
| <script> |
| function raf() { |
| return new Promise(resolve => requestAnimationFrame(resolve)); |
| } |
| |
| async function runTest() { |
| await raf(); |
| await raf(); |
| const scroller = document.getElementById('scroll-container'); |
| scroller.scrollTop = 300; |
| scroller.scrollLeft = 450; |
| document.documentElement.classList.remove('reftest-wait'); |
| } |
| runTest(); |
| </script> |
| </html> |