scrollbar-gutter-rtl-002.html (1629B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: test scrollbar-gutter with horizontal right to left content</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> 8 <link rel="match" href="scrollbar-gutter-rtl-002-ref.html"> 9 10 <style> 11 .line { 12 display: flex; 13 } 14 15 .container { 16 writing-mode: horizontal-tb; 17 direction: rtl; 18 19 block-size: 200px; 20 inline-size: 200px; 21 margin: 10px; 22 background: deepskyblue; 23 resize: both; 24 } 25 26 .content { 27 inline-size: 100%; 28 block-size: 200%; 29 background: lightsalmon; 30 } 31 </style> 32 33 <div class="line"> 34 <div class="container" style="overflow-y: auto; scrollbar-gutter: stable"> 35 <div class="content"></div> 36 </div> 37 38 <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable"> 39 <div class="content"></div> 40 </div> 41 42 <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable"> 43 <div class="content"></div> 44 </div> 45 </div> 46 47 <div class="line"> 48 <div class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges"> 49 <div class="content"></div> 50 </div> 51 52 <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges"> 53 <div class="content"></div> 54 </div> 55 56 <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges"> 57 <div class="content"></div> 58 </div> 59 </div> 60 </html>