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