grid-item-overflow-stretch-001.html (1962B)
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 Test: stretching overflow!=visible items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> 10 <link rel="match" href="grid-item-overflow-stretch-001-ref.html"> 11 <style type="text/css"> 12 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 13 14 .grid { 15 display: inline-grid; 16 width: 100px; 17 height: 50px; 18 grid: 7px auto 3px / 7px auto 3px; 19 grid-gap: 5px; 20 border:1px solid; 21 } 22 23 .grid > * { 24 grid-area: 2/2; 25 border:1px solid; 26 } 27 28 .oa { overflow: auto; } 29 .os { overflow: scroll; } 30 .oh { overflow: hidden; } 31 .m { margin: 1px 3px 5px 7px; } 32 33 x { display:block; width:110px; height:5px; background:grey; } 34 .h .grid x { width:5px; height:110px; } 35 36 br { clear:both; } 37 </style> 38 </head> 39 <body> 40 41 <div class="grid"><span class="oa"><x></x></span></div> 42 <div class="grid"><span class="os"><x></x></span></div> 43 <div class="grid"><span class="oh"><x></x></span></div> 44 <div class="grid"><span class=" "><x></x></span></div> 45 46 <br> 47 48 <div class="grid"><span class="m oa"><x></x></span></div> 49 <div class="grid"><span class="m os"><x></x></span></div> 50 <div class="grid"><span class="m oh"><x></x></span></div> 51 <div class="grid"><span class="m "><x></x></span></div> 52 53 <br> 54 55 <div class="h"> 56 57 <div class="grid"><span class="oa"><x></x></span></div> 58 <div class="grid"><span class="os"><x></x></span></div> 59 <div class="grid"><span class="oh"><x></x></span></div> 60 <div class="grid"><span class=" "><x></x></span></div> 61 62 <br> 63 64 <div class="grid"><span class="m oa"><x></x></span></div> 65 <div class="grid"><span class="m os"><x></x></span></div> 66 <div class="grid"><span class="m oh"><x></x></span></div> 67 <div class="grid"><span class="m "><x></x></span></div> 68 69 <br> 70 71 </div> 72 73 </body> 74 </html>