grid-item-intrinsic-size-normal-002-ref.html (8461B)
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>Reference: stretching intrinsic size items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> 10 <style type="text/css"> 11 * { vertical-align: top; } 12 .grid { 13 display: inline-grid; 14 border: 3px solid grey; 15 grid: 32px / 4px; 16 margin-right:20px; 17 align-items: start; 18 justify-items: start; 19 } 20 .r { grid: 4px / 32px; } 21 22 iframe { 23 border: 1px solid; 24 padding: 0; 25 margin: 0; 26 background: lightgrey; 27 } 28 29 .w20 { width: 20px; min-width: 0px; } 30 .w22 { width: 22px; } 31 .mw20 { min-width: 20px } 32 .mw0 { min-width: 0px } 33 .wi { width:32px } 34 .w4 { width:4px } 35 .w300 { width:302px } 36 37 .h20 { height: 20px; min-height: 0px; } 38 .h22 { height: 22px; min-height: 0px; } 39 .h32 { height: 32px; min-height: 0px; } 40 .mh20 { min-height: 20px } 41 .mh0 { min-height: 0px } 42 43 </style> 44 </head> 45 <body> 46 47 <div class="grid r wi"><iframe></iframe></div> 48 <div class="grid r wi"><iframe class="start"></iframe></div> 49 <div class="grid r wi"><iframe class="sa"></iframe></div> 50 <div class="grid r"><iframe class="sa mxw10"></iframe></div> 51 <div class="grid r wi"><iframe class="na"></iframe></div> 52 <div class="grid r"><iframe class="na mxw2"></iframe></div> 53 54 <pre><!--min-height:20px--></pre> 55 <div class="grid h22 r wi" style="margin-right:0"><iframe class="h20"></iframe></div> 56 <div class="grid h22 r"><iframe class="mh20 mxw10"></iframe></div> 57 <div class="grid h22 r wi"><iframe class="start mh20"></iframe></div> 58 <div class="grid h22 r"><iframe class="start mh20 mxw10"></iframe></div> 59 <div class="grid h22 r wi"><iframe class="sa mh20"></iframe></div> 60 <div class="grid h22 r"><iframe class="sa mh20 mxw10"></iframe></div> 61 <div class="grid h22 r wi"><iframe class="na mh20"></iframe></div> 62 <div class="grid h22 r"><iframe class="na mh20 mxw10"></iframe></div> 63 64 <pre><!--min-height:0--></pre> 65 <div class="grid r wi"><iframe class="mh0"></iframe></div> 66 <div class="grid r"><iframe class="mh0 mxw10"></iframe></div> 67 <div class="grid r wi"><iframe class="start mh0"></iframe></div> 68 <div class="grid r"><iframe class="start mh0 mxw10"></iframe></div> 69 <div class="grid r wi"><iframe class="sa mh0"></iframe></div> 70 <div class="grid r"><iframe class="sa mh0 mxw10"></iframe></div> 71 <div class="grid r wi"><iframe class="na mh0"></iframe></div> 72 <div class="grid r"><iframe class="na mh0 mxw2"></iframe></div> 73 74 <pre><!----></pre> 75 76 <div class="grid w4"><iframe></iframe></div> 77 <div class="grid w4"><iframe class="mxw2"></iframe></div> 78 <div class="grid w4"><iframe class="start"></iframe></div> 79 <div class="grid w4"><iframe class="start mxw2"></iframe></div> 80 <div class="grid w4"><iframe class="sa"></iframe></div> 81 <div class="grid w4"><iframe class="sa mxw2"></iframe></div> 82 <div class="grid w4"><iframe class="na"></iframe></div> 83 <div class="grid w4"><iframe class="na mxw2"></iframe></div> 84 85 <pre><!--min-width:20px--></pre> 86 <div class="grid w22"><iframe class="mw20"></iframe></div> 87 <div class="grid w22"><iframe class="mw20 mxh10"></iframe></div> 88 <div class="grid w22"><iframe class="start mw20"></iframe></div> 89 <div class="grid w22" style="margin-top:5px"><iframe class="start mw20 mxh10"></iframe></div> 90 <div class="grid w22" style="margin-top:10px"><iframe class="sa mw20"></iframe></div> 91 <div class="grid w22" style="margin-top:25px"><iframe class="sa mw20 mxh10"></iframe></div> 92 <div class="grid w22"><iframe class="na mw20"></iframe></div> 93 <div class="grid w22" style="margin-top:5px"><iframe class="na mw20 mxh10 mxw10"></iframe></div> 94 95 <pre><!--min-width:0--></pre> 96 <div class="grid w4"><iframe class="mw0"></iframe></div> 97 <div class="grid w4"><iframe class="mw0 mxh10"></iframe></div> 98 <div class="grid w4"><iframe class="start mw0"></iframe></div> 99 <div class="grid w4" style="margin-top:5px"><iframe class="start mw0 mxh10"></iframe></div> 100 <div class="grid w4" style="margin-top:10px"><iframe class="sa mw0"></iframe></div> 101 <div class="grid w4" style="margin-top:25px"><iframe class="sa mw0 mxh10 mxw10"></iframe></div> 102 <div class="grid w4"><iframe class="na mw0 mxw10"></iframe></div> 103 <div class="grid w4" style="margin-top:5px"><iframe class="na mw0 mxh10"></iframe></div> 104 105 <pre><!--width:20px--></pre> 106 107 <div class="grid r"><iframe class="w20"></iframe></div> 108 <div class="grid r"><iframe class="w20 mxh10"></iframe></div> 109 <div class="grid r"><iframe class="start w20"></iframe></div> 110 <div class="grid r"><iframe class="start w20 mxh10"></iframe></div> 111 <div class="grid r"><iframe class="sa w20"></iframe></div> 112 <div class="grid r"><iframe class="sa w20 mxh2"></iframe></div> 113 <div class="grid r"><iframe class="na w20"></iframe></div> 114 <div class="grid r"><iframe class="na w20 mxh2"></iframe></div> 115 116 <pre><!--width:20px--></pre> 117 118 <div class="grid w22"><iframe class="start w20"></iframe></div> 119 <div class="grid w22"><iframe class="start w20 mxh10"></iframe></div> 120 <div class="grid w22"><iframe class="start w20"></iframe></div> 121 <div class="grid w22"><iframe class="start w20 mxh10"></iframe></div> 122 <div class="grid w22"><iframe class="sa w20"></iframe></div> 123 <div class="grid w22"><iframe class="sa w20 mxh10"></iframe></div> 124 <div class="grid w22"><iframe class="na w20"></iframe></div> 125 <div class="grid w22"><iframe class="na w20 mxh10"></iframe></div> 126 127 <pre><!--height:20px--></pre> 128 129 <div class="grid h22 r wi"><iframe class="h20"></iframe></div> 130 <div class="grid h22 r"><iframe class="h20 mxw10"></iframe></div> 131 <div class="grid h22 r wi"><iframe class="start h20"></iframe></div> 132 <div class="grid h22 r"><iframe class="start h20 mxw10"></iframe></div> 133 <div class="grid h22 r wi"><iframe class="as h20"></iframe></div> 134 <div class="grid h22 r"><iframe class="as h20 mxw10"></iframe></div> 135 <div class="grid h22 r wi"><iframe class="an h20"></iframe></div> 136 <div class="grid h22 r"><iframe class="an h20 mxw10"></iframe></div> 137 138 <pre><!--height:20px--></pre> 139 140 <div class="grid h32 w4"><iframe class="h20"></iframe></div> 141 <div class="grid h32 w4"><iframe class="h20 mxw2"></iframe></div> 142 <div class="grid h32 w4"><iframe class="start h20"></iframe></div> 143 <div class="grid h32 w4"><iframe class="start h20 mxw10"></iframe></div> 144 <div class="grid h32 w4"><iframe class="as h20"></iframe></div> 145 <div class="grid h32 w4"><iframe class="as h20 mxw2"></iframe></div> 146 <div class="grid h32 w4"><iframe class="an h20"></iframe></div> 147 <div class="grid h32 w4"><iframe class="an h20 mxw10"></iframe></div> 148 149 <script> 150 var iframeSizes = [ 151 ['300px', '150px'], 152 ['300px', '150px'], 153 ['300px', '2px'], 154 ['10px', '2px'], 155 ['300px', '150px'], 156 ['2px', '150px'], 157 ['300px', '150px'], 158 ['10px', '150px'], 159 ['300px', '150px'], 160 ['10px', '150px'], 161 ['300px', '20px'], 162 ['10px', '20px'], 163 ['300px', '150px'], 164 ['10px', '150px'], 165 ['300px', '150px'], 166 ['10px', '150px'], 167 ['300px', '150px'], 168 ['10px', '150px'], 169 ['300px', '2px'], 170 ['10px', '2px'], 171 ['300px', '150px'], 172 ['2px', '150px'], 173 ['300px', '150px'], 174 ['2px', '150px'], 175 ['300px', '150px'], 176 ['2px', '150px'], 177 ['300px', '30px'], 178 ['2px', '30px'], 179 ['300px', '150px'], 180 ['2px', '150px'], 181 ['300px', '150px'], 182 ['300px', '10px'], 183 ['300px', '150px'], 184 ['300px', '10px'], 185 ['300px', '30px'], 186 ['300px', '10px'], 187 ['300px', '150px'], 188 ['20px', '10px'], 189 ['300px', '150px'], 190 ['300px', '10px'], 191 ['300px', '150px'], 192 ['300px', '10px'], 193 ['300px', '30px'], 194 ['10px', '10px'], 195 ['10px', '150px'], 196 ['300px', '10px'], 197 ['20px', '150px'], 198 ['20px', '10px'], 199 ['20px', '150px'], 200 ['20px', '10px'], 201 ['20px', '2px'], 202 ['20px', '2px'], 203 ['20px', '150px'], 204 ['20px', '2px'], 205 ['20px', '150px'], 206 ['20px', '10px'], 207 ['20px', '150px'], 208 ['20px', '10px'], 209 ['20px', '30px'], 210 ['20px', '10px'], 211 ['20px', '150px'], 212 ['20px', '10px'], 213 ['300px', '20px'], 214 ['10px', '20px'], 215 ['300px', '20px'], 216 ['10px', '20px'], 217 ['30px', '20px'], 218 ['10px', '20px'], 219 ['300px', '20px'], 220 ['10px', '20px'], 221 ['300px', '20px'], 222 ['2px', '20px'], 223 ['300px', '20px'], 224 ['10px', '20px'], 225 ['2px', '20px'], 226 ['2px', '20px'], 227 ['300px', '20px'], 228 ['10px', '20px'], 229 ]; 230 231 var iframes = document.querySelectorAll('iframe'); 232 for (var i = 0; i < iframes.length; ++i) { 233 var iframe = iframes[i]; 234 iframe.style.width = iframeSizes[i][0]; 235 iframe.style.height = iframeSizes[i][1]; 236 } 237 </script> 238 239 </body> 240 </html>