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