anchor-scroll-vlr-ref.html (1342B)
1 <!DOCTYPE html> 2 <title>Tests that anchor positioned scrolling works in vertical-lr writing mode</title> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <style> 7 :root { 8 overflow: clip; 9 } 10 11 body { 12 font: 20px/1 Ahem; 13 margin: 0; 14 writing-mode: vertical-lr; 15 white-space: nowrap; 16 } 17 18 #scroll-container { 19 width: 400px; 20 height: 400px; 21 overflow: scroll; 22 } 23 24 #scroll-contents { 25 width: 1000px; 26 height: 1000px; 27 position: relative; 28 } 29 30 #placefiller-above-anchor { 31 width: 480px; 32 } 33 34 #placefiller-before-anchor { 35 display: inline-block; 36 height: 500px; 37 } 38 39 #anchor { 40 anchor-name: --anchor; 41 } 42 43 #inner-anchored { 44 color: green; 45 margin-top: 520px; 46 } 47 48 #outer-anchored { 49 color: yellow; 50 margin-top: 520px; 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="outer-anchored">outer-anchored</div> 59 <div id="placefiller-before-anchor"></div> 60 <span id="anchor">anchor</span> 61 <div id="inner-anchored">inner-anchored</div> 62 </div> 63 </div> 64 </div> 65 66 <script> 67 const scroller = document.getElementById('scroll-container'); 68 scroller.scrollTop = 450; 69 scroller.scrollLeft = 300; 70 </script>