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