overflow-auto-scrollbar-gutter-intrinsic-003.html (1597B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow Test: scrollbar-gutter size doesn't contribute to the scroll container's intrinsic size with "overflow:auto" and "scrollbar-width: none"</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> 7 <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width"> 8 <link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-003-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-10" /> 10 11 <style> 12 .line { 13 display: flex; 14 } 15 .container { 16 block-size: 50px; 17 border: 5px solid black; 18 overflow: auto; 19 scrollbar-gutter: stable; 20 scrollbar-width: none; 21 margin: 10px; 22 } 23 .tall { 24 /* trigger overflow */ 25 block-size: 5000px; 26 } 27 </style> 28 29 <div class="line"> 30 <div class="container"> 31 <div>I should not wrap</div> 32 </div> 33 34 <div class="container"> 35 <div class="tall">I should not wrap</div> 36 </div> 37 </div> 38 39 <div class="line"> 40 <div class="container" style="writing-mode: vertical-rl"> 41 <div>I should not wrap</div> 42 </div> 43 44 <div class="container" style="writing-mode: vertical-rl"> 45 <div class="tall">I should not wrap</div> 46 </div> 47 48 <div class="container" style="writing-mode: vertical-lr"> 49 <div>I should not wrap</div> 50 </div> 51 52 <div class="container" style="writing-mode: vertical-lr"> 53 <div class="tall">I should not wrap</div> 54 </div> 55 </div> 56 </html>