| <!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 Test: stretching overflow!=visible items: stretching rules for scroll containers don't apply to input</title> |
| <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> |
| <link rel="match" href="stretch-grid-item-text-input-overflow-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7714"> |
| <style type="text/css"> |
| 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; |
| } |
| |
| .oa { overflow: auto; } |
| .os { overflow: scroll; } |
| .oh { overflow: hidden; } |
| .oc { overflow: clip; } |
| .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"><input class="oa"></div> |
| <div class="grid"><input class="os"></div> |
| <div class="grid"><input class="oh"></div> |
| <div class="grid"><input class="oc"></div> |
| <div class="grid"><input class=" "></div> |
| |
| <br> |
| |
| <div class="grid"><input class="m oa"></div> |
| <div class="grid"><input class="m os"></div> |
| <div class="grid"><input class="m oh"></div> |
| <div class="grid"><input class="m oc"></div> |
| <div class="grid"><input class="m "></div> |
| |
| <br> |
| |
| <div class="h"> |
| |
| <div class="grid"><input class="oa"></div> |
| <div class="grid"><input class="os"></div> |
| <div class="grid"><input class="oh"></div> |
| <div class="grid"><input class="oc"></div> |
| <div class="grid"><input class=" "></div> |
| |
| <br> |
| |
| <div class="grid"><input class="m oa"></div> |
| <div class="grid"><input class="m os"></div> |
| <div class="grid"><input class="m oh"></div> |
| <div class="grid"><input class="m oc"></div> |
| <div class="grid"><input class="m "></div> |
| |
| <br> |
| |
| </div> |
| |
| </body> |
| </html> |
