| <!DOCTYPE html> |
| <title>Tests that anchor-scroll works in vertical-lr writing mode</title> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <link rel="help" href="https://tabatkins.github.io/specs/css-anchor-position/"> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <style> |
| :root { |
| overflow: clip; |
| } |
| |
| body { |
| font: 20px/1 Ahem; |
| margin: 0; |
| writing-mode: vertical-lr; |
| white-space: nowrap; |
| } |
| |
| #scroll-container { |
| width: 400px; |
| height: 400px; |
| overflow: scroll; |
| } |
| |
| #scroll-contents { |
| width: 1000px; |
| height: 1000px; |
| position: relative; |
| } |
| |
| #placefiller-above-anchor { |
| width: 480px; |
| } |
| |
| #placefiller-before-anchor { |
| display: inline-block; |
| height: 500px; |
| } |
| |
| #anchor { |
| anchor-name: --anchor; |
| } |
| |
| #inner-anchored { |
| color: green; |
| margin-top: 520px; |
| } |
| |
| #outer-anchored { |
| color: yellow; |
| margin-top: 520px; |
| } |
| </style> |
| |
| <div style="position: relative;"> |
| <div id="scroll-container"> |
| <div id="scroll-contents"> |
| <div id="placefiller-above-anchor"></div> |
| <div id="outer-anchored">outer-anchored</div> |
| <div id="placefiller-before-anchor"></div> |
| <span id="anchor">anchor</span> |
| <div id="inner-anchored">inner-anchored</div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| const scroller = document.getElementById('scroll-container'); |
| scroller.scrollTop = 450; |
| scroller.scrollLeft = 300; |
| </script> |
