scroll-buttons-enabled-ref.html (1065B)
1 <!doctype html> 2 <title>CSS Test Reference: ::scroll-button(inline-end) supports :enabled</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 } 17 18 #scroller div { 19 background: green; 20 display: inline-block; 21 width: 600px; 22 height: 270px; 23 } 24 25 #scroll-marker-group { 26 border: 3px solid black; 27 padding: 5px; 28 display: flex; 29 height: 20px; 30 width: 40px; 31 } 32 33 #scroll-button-inline-end { 34 background: gold; 35 display: flex; 36 height: 20px; 37 width: 20px; 38 } 39 40 .scroll-marker { 41 width: 10px; 42 height: 10px; 43 background-color: blue; 44 border-radius: 100%; 45 display: inline-block; 46 } 47 </style> 48 <div id="scroller"> 49 <div></div> 50 <div></div> 51 </div> 52 <button id="scroll-button-inline-end">p</button> 53 <div id="scroll-marker-group"> 54 <div class="scroll-marker"></div> 55 <div class="scroll-marker"></div> 56 </div>