grid-minimum-size-grid-items-025.html (19652B)
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 row 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-columns: 25px 25px; 16 margin: 50px 0px; 17 } 18 19 .grid > div { 20 grid-row: span 2; 21 } 22 23 .grid > div:nth-child(1) { 24 color: blue; 25 background: cyan; 26 } 27 28 .grid > div:nth-child(2) { 29 background: magenta; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <script type="text/javascript"> 36 setup({ explicit_done: true }); 37 </script> 38 39 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 40 41 <div id="log"></div> 42 43 <h3>item writing-mode: vertical-lr;</h3> 44 45 <pre>grid-template-rows: auto auto;</pre> 46 47 <div class="grid" style="grid-template-rows: auto auto;"> 48 <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div> 49 <div data-expected-height="100"></div> 50 </div> 51 52 <pre>grid-template-rows: 0px 0px;</pre> 53 54 <div class="grid" style="grid-template-rows: 0px 0px;"> 55 <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> 56 <div data-expected-height="0"></div> 57 </div> 58 59 <pre>grid-template-rows: 20px 20px;</pre> 60 61 <div class="grid" style="grid-template-rows: 20px 20px;"> 62 <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> 63 <div data-expected-height="40"></div> 64 </div> 65 66 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> 67 68 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 69 <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div> 70 <div data-expected-height="0"></div> 71 </div> 72 73 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> 74 75 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 76 <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div> 77 <div data-expected-height="40"></div> 78 </div> 79 80 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> 81 82 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 83 <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 84 <div data-expected-height="10"></div> 85 </div> 86 87 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> 88 89 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 90 <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 91 <div data-expected-height="40"></div> 92 </div> 93 94 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> 95 96 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 97 <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div> 98 <div data-expected-height="10"></div> 99 </div> 100 101 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> 102 103 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 104 <div class="verticalLR" data-expected-height="30" style="margin: 5px 0px;"></div> 105 <div data-expected-height="40"></div> 106 </div> 107 108 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> 109 110 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 111 <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div> 112 <div data-expected-height="10"></div> 113 </div> 114 115 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> 116 117 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 118 <div class="verticalLR" data-expected-height="40" style="padding: 5px 0px;"></div> 119 <div data-expected-height="40"></div> 120 </div> 121 122 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> 123 124 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 125 <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div> 126 <div data-expected-height="10"></div> 127 </div> 128 129 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> 130 131 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 132 <div class="verticalLR" data-expected-height="40" style="border: solid 5px blue;"></div> 133 <div data-expected-height="40"></div> 134 </div> 135 136 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> 137 138 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 139 <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 140 <div data-expected-height="10"></div> 141 </div> 142 143 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> 144 145 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 146 <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 147 <div data-expected-height="40"></div> 148 </div> 149 150 <h3>item writing-mode: vertical-rl;</h3> 151 152 <pre>grid-template-rows: auto auto;</pre> 153 154 <div class="grid" style="grid-template-rows: auto auto;"> 155 <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div> 156 <div data-expected-height="100"></div> 157 </div> 158 159 <pre>grid-template-rows: 0px 0px;</pre> 160 161 <div class="grid" style="grid-template-rows: 0px 0px;"> 162 <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> 163 <div data-expected-height="0"></div> 164 </div> 165 166 <pre>grid-template-rows: 20px 20px;</pre> 167 168 <div class="grid" style="grid-template-rows: 20px 20px;"> 169 <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> 170 <div data-expected-height="40"></div> 171 </div> 172 173 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> 174 175 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 176 <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div> 177 <div data-expected-height="0"></div> 178 </div> 179 180 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> 181 182 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 183 <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div> 184 <div data-expected-height="40"></div> 185 </div> 186 187 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre> 188 189 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 190 <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 191 <div data-expected-height="10"></div> 192 </div> 193 194 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre> 195 196 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 197 <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div> 198 <div data-expected-height="40"></div> 199 </div> 200 201 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre> 202 203 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 204 <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div> 205 <div data-expected-height="10"></div> 206 </div> 207 208 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre> 209 210 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 211 <div class="verticalRL" data-expected-height="30" style="margin: 5px 0px;"></div> 212 <div data-expected-height="40"></div> 213 </div> 214 215 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre> 216 217 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 218 <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div> 219 <div data-expected-height="10"></div> 220 </div> 221 222 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre> 223 224 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 225 <div class="verticalRL" data-expected-height="40" style="padding: 5px 0px;"></div> 226 <div data-expected-height="40"></div> 227 </div> 228 229 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre> 230 231 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 232 <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div> 233 <div data-expected-height="10"></div> 234 </div> 235 236 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre> 237 238 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 239 <div class="verticalRL" data-expected-height="40" style="border: solid 5px blue;"></div> 240 <div data-expected-height="40"></div> 241 </div> 242 243 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre> 244 245 <div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 246 <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 247 <div data-expected-height="10"></div> 248 </div> 249 250 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre> 251 252 <div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 253 <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 254 <div data-expected-height="40"></div> 255 </div> 256 257 <h3>grid container writing-mode: vertical-lr; & item writing-mode: horizontal-tb;</h3> 258 259 <pre>grid-template-rows: auto auto;</pre> 260 261 <div class="grid verticalLR" style="grid-template-rows: auto auto;"> 262 <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> 263 <div data-expected-width="100"></div> 264 </div> 265 266 <pre>grid-template-rows: 0px 0px;</pre> 267 268 <div class="grid verticalLR" style="grid-template-rows: 0px 0px;"> 269 <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> 270 <div data-expected-width="0"></div> 271 </div> 272 273 <pre>grid-template-rows: 20px 20px;</pre> 274 275 <div class="grid verticalLR" style="grid-template-rows: 20px 20px;"> 276 <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> 277 <div data-expected-width="40"></div> 278 </div> 279 280 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> 281 282 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 283 <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> 284 <div data-expected-width="0"></div> 285 </div> 286 287 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> 288 289 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 290 <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> 291 <div data-expected-width="40"></div> 292 </div> 293 294 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> 295 296 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 297 <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 298 <div data-expected-width="10"></div> 299 </div> 300 301 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> 302 303 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 304 <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 305 <div data-expected-width="40"></div> 306 </div> 307 308 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> 309 310 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 311 <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> 312 <div data-expected-width="10"></div> 313 </div> 314 315 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> 316 317 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 318 <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> 319 <div data-expected-width="40"></div> 320 </div> 321 322 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> 323 324 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 325 <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> 326 <div data-expected-width="10"></div> 327 </div> 328 329 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> 330 331 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 332 <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> 333 <div data-expected-width="40"></div> 334 </div> 335 336 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> 337 338 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 339 <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> 340 <div data-expected-width="10"></div> 341 </div> 342 343 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> 344 345 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 346 <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> 347 <div data-expected-width="40"></div> 348 </div> 349 350 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> 351 352 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 353 <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 354 <div data-expected-width="10"></div> 355 </div> 356 357 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> 358 359 <div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 360 <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 361 <div data-expected-width="40"></div> 362 </div> 363 364 <h3>grid container writing-mode: vertical-rl; & item writing-mode: horizontal-tb;</h3> 365 366 <pre>grid-template-rows: auto auto;</pre> 367 368 <div class="grid verticalRL" style="grid-template-rows: auto auto;"> 369 <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div> 370 <div data-expected-width="100"></div> 371 </div> 372 373 <pre>grid-template-rows: 0px 0px;</pre> 374 375 <div class="grid verticalRL" style="grid-template-rows: 0px 0px;"> 376 <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> 377 <div data-expected-width="0"></div> 378 </div> 379 380 <pre>grid-template-rows: 20px 20px;</pre> 381 382 <div class="grid verticalRL" style="grid-template-rows: 20px 20px;"> 383 <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> 384 <div data-expected-width="40"></div> 385 </div> 386 387 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre> 388 389 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 390 <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div> 391 <div data-expected-width="0"></div> 392 </div> 393 394 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre> 395 396 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 397 <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div> 398 <div data-expected-width="40"></div> 399 </div> 400 401 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre> 402 403 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 404 <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 405 <div data-expected-width="10"></div> 406 </div> 407 408 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre> 409 410 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 411 <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div> 412 <div data-expected-width="40"></div> 413 </div> 414 415 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre> 416 417 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 418 <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div> 419 <div data-expected-width="10"></div> 420 </div> 421 422 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre> 423 424 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 425 <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div> 426 <div data-expected-width="40"></div> 427 </div> 428 429 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre> 430 431 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 432 <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div> 433 <div data-expected-width="10"></div> 434 </div> 435 436 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre> 437 438 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 439 <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div> 440 <div data-expected-width="40"></div> 441 </div> 442 443 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre> 444 445 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 446 <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div> 447 <div data-expected-width="10"></div> 448 </div> 449 450 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre> 451 452 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 453 <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div> 454 <div data-expected-width="40"></div> 455 </div> 456 457 <pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre> 458 459 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);"> 460 <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 461 <div data-expected-width="10"></div> 462 </div> 463 464 <pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre> 465 466 <div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);"> 467 <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div> 468 <div data-expected-width="40"></div> 469 </div>