scrollbar-gutter-vertical-lr-002.html (1613B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: test scrollbar-gutter with vertical left to right 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-vertical-lr-002-ref.html"> 9 10 <style> 11 .line { 12 display: flex; 13 } 14 15 .container { 16 writing-mode: vertical-lr; 17 18 block-size: 200px; 19 inline-size: 200px; 20 margin: 10px; 21 background: deepskyblue; 22 resize: both; 23 } 24 25 .content { 26 inline-size: 100%; 27 block-size: 200%; 28 background: lightsalmon; 29 } 30 </style> 31 32 <div class="line"> 33 <div class="container" style="overflow-x: auto; scrollbar-gutter: stable"> 34 <div class="content"></div> 35 </div> 36 37 <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable"> 38 <div class="content"></div> 39 </div> 40 41 <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable"> 42 <div class="content"></div> 43 </div> 44 </div> 45 46 <div class="line"> 47 <div class="container" style="overflow-x: auto; scrollbar-gutter: stable both-edges"> 48 <div class="content"></div> 49 </div> 50 51 <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable both-edges"> 52 <div class="content"></div> 53 </div> 54 55 <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable both-edges"> 56 <div class="content"></div> 57 </div> 58 </div> 59 </html>