grid-minimum-size-grid-items-024.html (14393B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Minimum size of grid items</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items"> 6 <meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items."> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .grid { 11 border: solid thick; 12 font: 10px/1 Ahem; 13 width: 50px; 14 height: 50px; 15 grid-template-rows: 25px 25px; 16 } 17 18 .grid > div { 19 grid-column: span 2; 20 } 21 22 .grid > div:nth-child(1) { 23 color: blue; 24 background: cyan; 25 } 26 27 .grid > div:nth-child(2) { 28 background: magenta; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <script type="text/javascript"> 35 setup({ explicit_done: true }); 36 </script> 37 38 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 39 40 <div id="log"></div> 41 42 <pre>grid-template-columns: auto auto;</pre> 43 44 <div class="grid" style="grid-template-columns: auto auto;"> 45 <div data-expected-width="100">XXXXXXXXXX</div> 46 <div data-expected-width="100"></div> 47 </div> 48 49 <pre>grid-template-columns: 0px 0px;</pre> 50 51 <div class="grid" style="grid-template-columns: 0px 0px;"> 52 <div data-expected-width="0">XXXXXXXXXX</div> 53 <div data-expected-width="0"></div> 54 </div> 55 56 <pre>grid-template-columns: 20px 20px;</pre> 57 58 <div class="grid" style="grid-template-columns: 20px 20px;"> 59 <div data-expected-width="40">XXXXXXXXXX</div> 60 <div data-expected-width="40"></div> 61 </div> 62 63 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> 64 65 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 66 <div data-expected-width="0">XXXXXXXXXX</div> 67 <div data-expected-width="0"></div> 68 </div> 69 70 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> 71 72 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 73 <div data-expected-width="40">XXXXXXXXXX</div> 74 <div data-expected-width="40"></div> 75 </div> 76 77 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> 78 79 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 80 <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 81 <div data-expected-width="10"></div> 82 </div> 83 84 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> 85 86 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 87 <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 88 <div data-expected-width="40"></div> 89 </div> 90 91 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> 92 93 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 94 <div data-expected-width="0" style="margin: 0px 5px;"></div> 95 <div data-expected-width="10"></div> 96 </div> 97 98 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> 99 100 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 101 <div data-expected-width="30" style="margin: 0px 5px;"></div> 102 <div data-expected-width="40"></div> 103 </div> 104 105 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> 106 107 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 108 <div data-expected-width="10" style="padding: 0px 5px;"></div> 109 <div data-expected-width="10"></div> 110 </div> 111 112 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> 113 114 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 115 <div data-expected-width="40" style="padding: 0px 5px;"></div> 116 <div data-expected-width="40"></div> 117 </div> 118 119 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> 120 121 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 122 <div data-expected-width="10" style="border: solid 5px blue;"></div> 123 <div data-expected-width="10"></div> 124 </div> 125 126 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> 127 128 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 129 <div data-expected-width="40" style="border: solid 5px blue;"></div> 130 <div data-expected-width="40"></div> 131 </div> 132 133 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> 134 135 <div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 136 <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 137 <div data-expected-width="10"></div> 138 </div> 139 140 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> 141 142 <div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 143 <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 144 <div data-expected-width="40"></div> 145 </div> 146 147 <h3>grid content writing-mode: vertical-lr;</h3> 148 149 <pre>grid-template-columns: auto auto;</pre> 150 151 <div class="grid verticalLR" style="grid-template-columns: auto auto;"> 152 <div data-expected-height="100">XXXXXXXXXX</div> 153 <div data-expected-height="100"></div> 154 </div> 155 156 <pre>grid-template-columns: 0px 0px;</pre> 157 158 <div class="grid verticalLR" style="grid-template-columns: 0px 0px;"> 159 <div data-expected-height="0">XXXXXXXXXX</div> 160 <div data-expected-height="0"></div> 161 </div> 162 163 <pre>grid-template-columns: 20px 20px;</pre> 164 165 <div class="grid verticalLR" style="grid-template-columns: 20px 20px;"> 166 <div data-expected-height="40">XXXXXXXXXX</div> 167 <div data-expected-height="40"></div> 168 </div> 169 170 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> 171 172 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 173 <div data-expected-height="0">XXXXXXXXXX</div> 174 <div data-expected-height="0"></div> 175 </div> 176 177 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> 178 179 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 180 <div data-expected-height="40">XXXXXXXXXX</div> 181 <div data-expected-height="40"></div> 182 </div> 183 184 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> 185 186 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 187 <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 188 <div data-expected-height="10"></div> 189 </div> 190 191 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> 192 193 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 194 <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 195 <div data-expected-height="40"></div> 196 </div> 197 198 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> 199 200 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 201 <div data-expected-height="0" style="margin: 5px 0px;"></div> 202 <div data-expected-height="10"></div> 203 </div> 204 205 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> 206 207 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 208 <div data-expected-height="30" style="margin: 5px 0px;"></div> 209 <div data-expected-height="40"></div> 210 </div> 211 212 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> 213 214 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 215 <div data-expected-height="10" style="padding: 5px 0px;"></div> 216 <div data-expected-height="10"></div> 217 </div> 218 219 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> 220 221 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 222 <div data-expected-height="40" style="padding: 5px 0px;"></div> 223 <div data-expected-height="40"></div> 224 </div> 225 226 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> 227 228 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 229 <div data-expected-height="10" style="border: solid 5px blue;"></div> 230 <div data-expected-height="10"></div> 231 </div> 232 233 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> 234 235 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 236 <div data-expected-height="40" style="border: solid 5px blue;"></div> 237 <div data-expected-height="40"></div> 238 </div> 239 240 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> 241 242 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 243 <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 244 <div data-expected-height="10"></div> 245 </div> 246 247 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> 248 249 <div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 250 <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 251 <div data-expected-height="40"></div> 252 </div> 253 254 <h3>grid content writing-mode: vertical-rl;</h3> 255 256 <pre>grid-template-columns: auto auto;</pre> 257 258 <div class="grid verticalRL" style="grid-template-columns: auto auto;"> 259 <div data-expected-height="100">XXXXXXXXXX</div> 260 <div data-expected-height="100"></div> 261 </div> 262 263 <pre>grid-template-columns: 0px 0px;</pre> 264 265 <div class="grid verticalRL" style="grid-template-columns: 0px 0px;"> 266 <div data-expected-height="0">XXXXXXXXXX</div> 267 <div data-expected-height="0"></div> 268 </div> 269 270 <pre>grid-template-columns: 20px 20px;</pre> 271 272 <div class="grid verticalRL" style="grid-template-columns: 20px 20px;"> 273 <div data-expected-height="40">XXXXXXXXXX</div> 274 <div data-expected-height="40"></div> 275 </div> 276 277 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre> 278 279 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 280 <div data-expected-height="0">XXXXXXXXXX</div> 281 <div data-expected-height="0"></div> 282 </div> 283 284 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre> 285 286 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 287 <div data-expected-height="40">XXXXXXXXXX</div> 288 <div data-expected-height="40"></div> 289 </div> 290 291 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> 292 293 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 294 <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 295 <div data-expected-height="10"></div> 296 </div> 297 298 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> 299 300 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 301 <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 302 <div data-expected-height="40"></div> 303 </div> 304 305 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> 306 307 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 308 <div data-expected-height="0" style="margin: 5px 0px;"></div> 309 <div data-expected-height="10"></div> 310 </div> 311 312 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> 313 314 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 315 <div data-expected-height="30" style="margin: 5px 0px;"></div> 316 <div data-expected-height="40"></div> 317 </div> 318 319 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> 320 321 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 322 <div data-expected-height="10" style="padding: 5px 0px;"></div> 323 <div data-expected-height="10"></div> 324 </div> 325 326 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> 327 328 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 329 <div data-expected-height="40" style="padding: 5px 0px;"></div> 330 <div data-expected-height="40"></div> 331 </div> 332 333 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> 334 335 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 336 <div data-expected-height="10" style="border: solid 5px blue;"></div> 337 <div data-expected-height="10"></div> 338 </div> 339 340 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> 341 342 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 343 <div data-expected-height="40" style="border: solid 5px blue;"></div> 344 <div data-expected-height="40"></div> 345 </div> 346 347 <pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> 348 349 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);"> 350 <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 351 <div data-expected-height="10"></div> 352 </div> 353 354 <pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> 355 356 <div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);"> 357 <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 358 <div data-expected-height="40"></div> 359 </div>