scroll-buttons-disabled-ref.html (1035B)
1 <!doctype html> 2 <title>CSS Test Reference: ::scroll-button(inline-end) supports :disabled</title> 3 <style> 4 * { 5 margin: 0; 6 } 7 8 #scroller { 9 width: 600px; 10 height: 300px; 11 overflow: auto; 12 scroll-marker-group: after; 13 white-space: nowrap; 14 } 15 16 #scroller div { 17 background: green; 18 display: inline-block; 19 width: 600px; 20 height: 270px; 21 } 22 23 #scroll-marker-group { 24 border: 3px solid black; 25 padding: 5px; 26 display: flex; 27 height: 20px; 28 width: 40px; 29 } 30 31 #scroll-button-inline-end { 32 background: gray; 33 display: flex; 34 height: 20px; 35 width: 20px; 36 } 37 38 .scroll-marker { 39 width: 10px; 40 height: 10px; 41 background-color: blue; 42 border-radius: 100%; 43 display: inline-block; 44 } 45 </style> 46 <div id="scroller"> 47 <div></div> 48 <div></div> 49 </div> 50 <button id="scroll-button-inline-end" disabled>></button> 51 <div id="scroll-marker-group"> 52 <div class="scroll-marker"></div> 53 <div class="scroll-marker"></div> 54 </div> 55 <script> 56 scroller.scrollLeft = 610; 57 </script>