stretch-grid-item-button-overflow-ref.html (2365B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Reference: stretching overflow!=visible items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> 10 <style> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: inline-grid; 15 width: 100px; 16 height: 50px; 17 grid: 7px auto 3px / 7px auto 3px; 18 grid-gap: 5px; 19 border:1px solid; 20 } 21 22 .grid > * { 23 grid-area: 2/2; 24 border:1px solid; 25 appearance: none; 26 min-width:0; 27 min-height:0; 28 box-sizing: border-box; 29 } 30 31 .os { 32 /* Note: overflow:scroll does add scrollbars to the testcase's 33 empty buttons in some UAs, so we need to include this style 34 in the reference case to create a proper reference rendering 35 that's robust in the face of UAs that do/don't support 36 scrollable buttons. */ 37 overflow: scroll; 38 } 39 .m { margin: 17px 3px 5px 7px; } 40 41 x { display:block; width:110px; height:5px; background:grey; } 42 .h .grid x { width:5px; height:110px; } 43 44 br { clear:both; } 45 </style> 46 </head> 47 <body> 48 49 <div class="grid"><button class="oa"></button></div> 50 <div class="grid"><button class="os"></button></div> 51 <div class="grid"><button class="oh"></button></div> 52 <div class="grid"><button class="ov"></button></div> 53 <div class="grid"><button class="oc"></button></div> 54 55 <br> 56 57 <div class="grid"><button class="m oa"></button></div> 58 <div class="grid"><button class="m os"></button></div> 59 <div class="grid"><button class="m oh"></button></div> 60 <div class="grid"><button class="m ov"></button></div> 61 <div class="grid"><button class="m oc"></button></div> 62 63 <br> 64 65 <div class="h"> 66 67 <div class="grid"><button class="oa"></button></div> 68 <div class="grid"><button class="os"></button></div> 69 <div class="grid"><button class="oh"></button></div> 70 <div class="grid"><button class="ov"></button></div> 71 <div class="grid"><button class="oc"></button></div> 72 73 <br> 74 75 <div class="grid"><button class="m oa"></button></div> 76 <div class="grid"><button class="m os"></button></div> 77 <div class="grid"><button class="m oh"></button></div> 78 <div class="grid"><button class="m ov"></button></div> 79 <div class="grid"><button class="m oc"></button></div> 80 81 <br> 82 83 </div> 84 85 </body> 86 </html>