| <!DOCTYPE HTML> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <html><head> |
| <meta charset="utf-8"> |
| <title>CSS Grid Reference: stretching overflow!=visible items</title> |
| <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> |
| <style> |
| body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } |
| |
| .grid { |
| display: inline-grid; |
| width: 100px; |
| height: 50px; |
| grid: 7px auto 3px / 7px auto 3px; |
| grid-gap: 5px; |
| border:1px solid; |
| } |
| |
| .grid > * { |
| grid-area: 2/2; |
| border:1px solid; |
| appearance: none; |
| min-width:0; |
| min-height:0; |
| box-sizing: border-box; |
| } |
| |
| .os { |
| /* Note: overflow:scroll does add scrollbars to the testcase's |
| empty buttons in some UAs, so we need to include this style |
| in the reference case to create a proper reference rendering |
| that's robust in the face of UAs that do/don't support |
| scrollable buttons. */ |
| overflow: scroll; |
| } |
| .m { margin: 17px 3px 5px 7px; } |
| |
| x { display:block; width:110px; height:5px; background:grey; } |
| .h .grid x { width:5px; height:110px; } |
| |
| br { clear:both; } |
| </style> |
| </head> |
| <body> |
| |
| <div class="grid"><button class="oa"></button></div> |
| <div class="grid"><button class="os"></button></div> |
| <div class="grid"><button class="oh"></button></div> |
| <div class="grid"><button class="ov"></button></div> |
| <div class="grid"><button class="oc"></button></div> |
| |
| <br> |
| |
| <div class="grid"><button class="m oa"></button></div> |
| <div class="grid"><button class="m os"></button></div> |
| <div class="grid"><button class="m oh"></button></div> |
| <div class="grid"><button class="m ov"></button></div> |
| <div class="grid"><button class="m oc"></button></div> |
| |
| <br> |
| |
| <div class="h"> |
| |
| <div class="grid"><button class="oa"></button></div> |
| <div class="grid"><button class="os"></button></div> |
| <div class="grid"><button class="oh"></button></div> |
| <div class="grid"><button class="ov"></button></div> |
| <div class="grid"><button class="oc"></button></div> |
| |
| <br> |
| |
| <div class="grid"><button class="m oa"></button></div> |
| <div class="grid"><button class="m os"></button></div> |
| <div class="grid"><button class="m oh"></button></div> |
| <div class="grid"><button class="m ov"></button></div> |
| <div class="grid"><button class="m oc"></button></div> |
| |
| <br> |
| |
| </div> |
| |
| </body> |
| </html> |
