anchor-scroll-vrl.html (1741B)
1 <!DOCTYPE html> 2 <title>Tests that anchor positioned scrolling works in vertical-rl writing mode</title> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scrolling"> 5 <link rel="match" href="reference/anchor-scroll-vrl-ref.html"> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 :root { 9 /* Prevents creatings scrollbar on the viewport due to anchored element's 10 * layout position being out of the viewport. 11 * TODO(crbug.com/1309178): Revisit this behavior. 12 */ 13 overflow: clip; 14 } 15 16 body { 17 font: 20px/1 Ahem; 18 margin: 0; 19 writing-mode: vertical-rl; 20 white-space: nowrap; 21 } 22 23 #scroll-container { 24 width: 400px; 25 height: 400px; 26 overflow: scroll; 27 } 28 29 #scroll-contents { 30 width: 1000px; 31 height: 1000px; 32 position: relative; 33 } 34 35 #placefiller-above-anchor { 36 width: 500px; 37 } 38 39 #placefiller-before-anchor { 40 display: inline-block; 41 height: 500px; 42 } 43 44 #anchor { 45 anchor-name: --anchor; 46 } 47 48 #inner-anchored { 49 color: green; 50 position: absolute; 51 top: anchor(top); 52 left: anchor(right); 53 position-anchor: --anchor; 54 } 55 56 #outer-anchored { 57 color: yellow; 58 position: absolute; 59 top: anchor(top); 60 right: anchor(left); 61 position-anchor: --anchor; 62 } 63 </style> 64 65 <div style="position: relative;"> 66 <div id="scroll-container"> 67 <div id="scroll-contents"> 68 <div id="placefiller-above-anchor"></div> 69 <div id="placefiller-before-anchor"></div> 70 <span id="anchor">anchor</span> 71 <div id="inner-anchored">inner-anchored</div> 72 </div> 73 </div> 74 <div id="outer-anchored">outer-anchored</div> 75 </div> 76 77 <script> 78 const scroller = document.getElementById('scroll-container'); 79 scroller.scrollTop = 450; 80 scroller.scrollLeft = -300; 81 </script>