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