scroll-buttons-enabled-vertical-ltr-ref.html (1189B)
1 <!doctype html> 2 <title>CSS Test Reference: ::scroll-button(inline-end) supports :enabled with vertical-rtl writing mode</title> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 4 <style> 5 * { 6 margin: 0; 7 font-family: Ahem; 8 } 9 10 #scroller { 11 width: 600px; 12 height: 300px; 13 overflow: auto; 14 scroll-marker-group: after; 15 white-space: nowrap; 16 writing-mode: vertical-lr; 17 } 18 19 #scroller div { 20 background: green; 21 display: inline-block; 22 width: 600px; 23 height: 270px; 24 } 25 26 #scroll-marker-group { 27 border: 3px solid black; 28 padding: 5px; 29 display: flex; 30 height: 20px; 31 width: 40px; 32 writing-mode: vertical-lr; 33 } 34 35 #scroll-button-inline-end { 36 background: gold; 37 display: flex; 38 height: 20px; 39 width: 20px; 40 writing-mode: vertical-lr; 41 } 42 43 .scroll-marker { 44 width: 10px; 45 height: 10px; 46 background-color: blue; 47 border-radius: 100%; 48 display: inline-block; 49 } 50 </style> 51 <div id="scroller"> 52 <div></div> 53 <div></div> 54 </div> 55 <button id="scroll-button-inline-end">p</button> 56 <div id="scroll-marker-group"> 57 <div class="scroll-marker"></div> 58 <div class="scroll-marker"></div> 59 </div>