scrollbar-gutter-002.html (2135B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Grid Test: Fieldset subgrids with 'overflow' and/or 'scrollbar-gutter'</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1879770"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution"> 8 <link rel="match" href="scrollbar-gutter-001-ref.html"> 9 10 <style> 11 :root { 12 overflow: scroll; /* Required to reproduce the bug on Firefox */ 13 } 14 .grid { 15 inline-size: 75px; 16 display: inline-grid; 17 border: 5px solid blue; 18 vertical-align: top; 19 } 20 .subgrid { 21 block-size: 75px; 22 display: grid; 23 grid: auto / subgrid; 24 } 25 .item { 26 inline-size: 50px; 27 block-size: 50px; 28 background: green; 29 } 30 fieldset { 31 margin: 0; 32 padding: 0; 33 border: 0; 34 } 35 </style> 36 37 <p>All the following subgrid scroll container shouldn't have any scrollbars.</p> 38 39 <p>Testcase 1: subgrid with 'overflow: scroll'</p> 40 <div class="grid"> 41 <fieldset class="subgrid" style="overflow: scroll;"> 42 <div class="item"></div> 43 </fieldset> 44 </div> 45 <div class="grid" style="writing-mode: vertical-rl;"> 46 <fieldset class="subgrid" style="overflow: scroll;"> 47 <div class="item"></div> 48 </fieldset> 49 </div> 50 51 <p>Testcase 2: subgrid with 'overflow: auto' and 'scrollbar-gutter: stable'</p> 52 <div class="grid"> 53 <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"> 54 <div class="item"></div> 55 </fieldset> 56 </div> 57 <div class="grid" style="writing-mode: vertical-rl;"> 58 <fieldset class="subgrid" style="overflow: auto; scrollbar-gutter: stable;"> 59 <div class="item"></div> 60 </fieldset> 61 </div> 62 63 <p>Testcase 3: subgrid with 'overflow: hidden' and 'scrollbar-gutter: stable'</p> 64 <div class="grid"> 65 <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"> 66 <div class="item"></div> 67 </fieldset> 68 </div> 69 <div class="grid" style="writing-mode: vertical-rl;"> 70 <fieldset class="subgrid" style="overflow: hidden; scrollbar-gutter: stable;"> 71 <div class="item"></div> 72 </fieldset> 73 </div>