OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <style> |
| 4 .grid { |
| 5 justify-content: start; |
| 6 align-content: start; |
| 7 height: 100px; |
| 8 width: 40px; |
| 9 position: relative; |
| 10 padding-left: 10px; |
| 11 margin-right: 5px; |
| 12 grid-row-gap: 5px; |
| 13 float: left; |
| 14 } |
| 15 |
| 16 .fc0 { grid-template-rows: minmax(auto, 0px);} |
| 17 .fc40 { grid-template-rows: minmax(auto, 40px); } |
| 18 .fc80 { grid-template-rows: minmax(auto, 80px); } |
| 19 .fc110 { grid-template-rows: auto; } |
| 20 |
| 21 .fc0x2 { grid-template-rows: repeat(2, minmax(auto, 0px));} |
| 22 .fc40x2 { grid-template-rows: repeat(2, minmax(auto, 40px)); } |
| 23 .fc80x2 { grid-template-rows: repeat(2, minmax(auto, 80px)); } |
| 24 .fc110x2 { grid-template-rows: auto auto; } |
| 25 |
| 26 .fc0p { grid-template-rows: minmax(auto, 0%); } |
| 27 .fc30p { grid-template-rows: minmax(auto, 30px); } |
| 28 .fc90p { grid-template-rows: minmax(auto, 90px); } |
| 29 .fc110p { grid-template-rows: auto; } |
| 30 |
| 31 .fc0px2 { grid-template-rows: repeat(2, minmax(auto, 0%)); } |
| 32 .fc30px2 { grid-template-rows: repeat(2, minmax(auto, 30px)); } |
| 33 .fc90px2 { grid-template-rows: repeat(2, minmax(auto, 90px)); } |
| 34 .fc110px2 { grid-template-rows: auto auto; } |
| 35 |
| 36 .item { |
| 37 font: 10px/1 Ahem; |
| 38 background: cyan; |
| 39 } |
| 40 |
| 41 .spanningItem { |
| 42 font: 10px/1 Ahem; |
| 43 grid-row: 1 / -1; |
| 44 grid-column: 2; |
| 45 background: salmon; |
| 46 } |
| 47 |
| 48 .test { |
| 49 position: absolute; |
| 50 left: 0; top: 0; bottom: 0; |
| 51 width: 5px; |
| 52 background: purple; |
| 53 } |
| 54 .test:nth-child(2n) { background: orange; } |
| 55 |
| 56 .firstRow { grid-row: 1 / 2; } |
| 57 .secondRow { grid-row: 2 / 3; } |
| 58 .thirdRow { grid-row: 3 / 4; } |
| 59 |
| 60 div.grid > div { writing-mode: vertical-lr; } |
| 61 |
| 62 </style> |
| 63 |
| 64 <p>This test checks that 'fit-content()' works as expected, i.e., it's similar t
o 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped a
t the argument of 'fit-content' (if greater that the 'auto' minimum).</p> |
| 65 |
| 66 <div class="grid fc0"> |
| 67 <div class="item">XXX</div> |
| 68 <div class="test firstRow"></div> |
| 69 </div> |
| 70 |
| 71 <div class="grid fc0x2"> |
| 72 <div class="item">XXX</div> |
| 73 <div class="spanningItem">XXX</div> |
| 74 <div class="test firstRow"></div> |
| 75 <div class="test secondRow"></div> |
| 76 </div> |
| 77 |
| 78 <div class="grid fc40"> |
| 79 <div class="item">XXX XXX</div> |
| 80 <div class="test firstRow"></div> |
| 81 </div> |
| 82 |
| 83 <div class="grid" style="grid-template-rows: auto auto;"> |
| 84 <div class="spanningItem">XXX XXX</div> |
| 85 <div class="test firstRow"></div> |
| 86 <div class="test secondRow"></div> |
| 87 </div> |
| 88 |
| 89 <div class="grid" style="grid-template-rows: minmax(auto, 40px) auto;"> |
| 90 <div class="item">XXX XXX</div> |
| 91 <div class="spanningItem">XXX XXX</div> |
| 92 <div class="test firstRow"></div> |
| 93 <div class="test secondRow"></div> |
| 94 </div> |
| 95 |
| 96 <div class="grid fc80"> |
| 97 <div class="item">XXX XXX XXX</div> |
| 98 <div class="test firstRow"></div> |
| 99 </div> |
| 100 |
| 101 <div class="grid fc80x2"> |
| 102 <div class="spanningItem">XXX XXX XXX</div> |
| 103 <div class="test firstRow"></div> |
| 104 <div class="test secondRow"></div> |
| 105 </div> |
| 106 |
| 107 <div class="grid" style="grid-template-rows: auto minmax(auto, 80px)"> |
| 108 <div class="item secondRow">XXX XXX XXX</div> |
| 109 <div class="spanningItem">XXX XXX XXX</div> |
| 110 <div class="test firstRow"></div> |
| 111 <div class="test secondRow"></div> |
| 112 </div> |
| 113 |
| 114 <div class="grid" style="grid-template-rows: minmax(auto, 20px) 50%;"> |
| 115 <div class="spanningItem">XXX XX XXX</div> |
| 116 <div class="test firstRow"></div> |
| 117 <div class="test secondRow"></div> |
| 118 </div> |
| 119 |
| 120 <div class="grid" style="grid-template-rows: minmax(10px, 40px) minmax(auto, 40p
x);"> |
| 121 <div class="item">XXXXX</div> |
| 122 <div class="spanningItem">XXX XX XXX</div> |
| 123 <div class="test firstRow"></div> |
| 124 <div class="test secondRow"></div> |
| 125 </div> |
| 126 |
| 127 <div class="grid" style="grid-template-rows: auto minmax(10%, 200px);"> |
| 128 <div class="item secondRow">XXXXX</div> |
| 129 <div class="spanningItem">XXX XX XXX</div> |
| 130 <div class="test firstRow"></div> |
| 131 <div class="test secondRow"></div> |
| 132 </div> |
| 133 |
| 134 <br clear="all"> |
| 135 <br clear="all"> |
| 136 |
| 137 <div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;"> |
| 138 <div class="spanningItem">XXX XX XXX</div> |
| 139 <div class="test firstRow"></div> |
| 140 <div class="test secondRow"></div> |
| 141 </div> |
| 142 |
| 143 <div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;"> |
| 144 <div class="item">XXXXX</div> |
| 145 <div class="spanningItem">XXX XX XXX</div> |
| 146 <div class="test firstRow"></div> |
| 147 <div class="test secondRow"></div> |
| 148 </div> |
| 149 |
| 150 <div class="grid" style="grid-template-rows: minmax(auto, 40px) max-content;"> |
| 151 <div class="item secondRow">XXXXX</div> |
| 152 <div class="spanningItem">XXX XX XXX</div> |
| 153 <div class="test firstRow"></div> |
| 154 <div class="test secondRow"></div> |
| 155 </div> |
| 156 |
| 157 <div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);"> |
| 158 <div class="spanningItem">XXX XX XXX</div> |
| 159 <div class="test firstRow"></div> |
| 160 <div class="test secondRow"></div> |
| 161 </div> |
| 162 |
| 163 <div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);"> |
| 164 <div class="item">XXXXX</div> |
| 165 <div class="spanningItem">XXX XX XXX</div> |
| 166 <div class="test firstRow"></div> |
| 167 <div class="test secondRow"></div> |
| 168 </div> |
| 169 |
| 170 <div class="grid" style="grid-template-rows: min-content minmax(auto, 40px);"> |
| 171 <div class="item secondRow">XXXXX</div> |
| 172 <div class="spanningItem">XXX XX XXX</div> |
| 173 <div class="test firstRow"></div> |
| 174 <div class="test secondRow"></div> |
| 175 </div> |
| 176 |
| 177 <div class="grid" style="grid-template-rows: minmax(auto, 30px) min-content max-
content"> |
| 178 <div class="spanningItem">XXX XX XXX</div> |
| 179 <div class="test firstRow"></div> |
| 180 <div class="test secondRow"></div> |
| 181 <div class="test thirdRow"></div> |
| 182 </div> |
| 183 |
| 184 <div class="grid" style="grid-template-rows: min-content minmax(auto, 30px) max-
content"> |
| 185 <div class="spanningItem">XXX XX XXX</div> |
| 186 <div class="test firstRow"></div> |
| 187 <div class="test secondRow"></div> |
| 188 <div class="test thirdRow"></div> |
| 189 </div> |
| 190 |
| 191 <div class="grid" style="grid-template-rows: min-content max-content minmax(auto
, 30px)"> |
| 192 <div class="spanningItem">XXX XX XXX</div> |
| 193 <div class="test firstRow"></div> |
| 194 <div class="test secondRow"></div> |
| 195 <div class="test thirdRow"></div> |
| 196 </div> |
| 197 |
| 198 <div class="grid" style="grid-template-rows: minmax(auto, 30px) min-content max-
content"> |
| 199 <div class="item" style="grid-row: 1">XXX XX</div> |
| 200 <div class="spanningItem">XXX XX XXX</div> |
| 201 <div class="test firstRow"></div> |
| 202 <div class="test secondRow"></div> |
| 203 <div class="test thirdRow"></div> |
| 204 </div> |
| 205 |
| 206 <div class="grid" style="grid-template-rows: min-content minmax(auto, 30px) max-
content"> |
| 207 <div class="item" style="grid-row: 1">XXX XX</div> |
| 208 <div class="spanningItem">XXX XX XXX</div> |
| 209 <div class="test firstRow"></div> |
| 210 <div class="test secondRow"></div> |
| 211 <div class="test thirdRow"></div> |
| 212 </div> |
| 213 |
| 214 <div class="grid" style="grid-template-rows: min-content max-content minmax(auto
, 30px)"> |
| 215 <div class="item" style="grid-row: 2">XXX XX</div> |
| 216 <div class="spanningItem">XXX XX XXX</div> |
| 217 <div class="test firstRow"></div> |
| 218 <div class="test secondRow"></div> |
| 219 <div class="test thirdRow"></div> |
| 220 </div> |
| 221 |
| 222 <br clear="all"> |
| 223 <br clear="all"> |
| 224 |
| 225 <div class="grid fc0p"> |
| 226 <div class="item">XXX</div> |
| 227 <div class="test firstRow"></div> |
| 228 </div> |
| 229 |
| 230 <div class="grid fc0px2"> |
| 231 <div class="item">XXX</div> |
| 232 <div class="spanningItem">XXX</div> |
| 233 <div class="test firstRow"></div> |
| 234 <div class="test secondRow"></div> |
| 235 </div> |
| 236 |
| 237 <div class="grid fc30p"> |
| 238 <div class="item">XX XX</div> |
| 239 <div class="test firstRow"></div> |
| 240 </div> |
| 241 |
| 242 <div class="grid fc30px2"> |
| 243 <div class="spanningItem">XXX XXX</div> |
| 244 <div class="test firstRow"></div> |
| 245 <div class="test secondRow"></div> |
| 246 </div> |
| 247 |
| 248 <div class="grid fc30px2"> |
| 249 <div class="item secondRow">X X X</div> |
| 250 <div class="spanningItem">XXX XXX</div> |
| 251 <div class="test firstRow"></div> |
| 252 <div class="test secondRow"></div> |
| 253 </div> |
| 254 |
| 255 <div class="grid fc90p"> |
| 256 <div class="item">XXX XXX XXX</div> |
| 257 <div class="test firstRow"></div> |
| 258 </div> |
| 259 |
| 260 <div class="grid fc90px2"> |
| 261 <div class="spanningItem">XXX XXX XXX</div> |
| 262 <div class="test firstRow"></div> |
| 263 <div class="test secondRow"></div> |
| 264 </div> |
| 265 |
| 266 <div class="grid" style="grid-template-rows: auto minmax(auto, 90px)"> |
| 267 <div class="item secondRow">XXX XXX XXX</div> |
| 268 <div class="spanningItem">XXX XXX XXX</div> |
| 269 <div class="test firstRow"></div> |
| 270 <div class="test secondRow"></div> |
| 271 </div> |
| 272 |
| 273 <br clear="all"> |
| 274 <br clear="all"> |
| 275 |
| 276 <div class="grid fc110"> |
| 277 <div class="item">XXX XXX</div> |
| 278 <div class="test firstRow"></div> |
| 279 </div> |
| 280 |
| 281 <div class="grid fc110x2"> |
| 282 <div class="spanningItem">XXX XXX</div> |
| 283 <div class="test firstRow"></div> |
| 284 <div class="test secondRow"></div> |
| 285 </div> |
| 286 |
| 287 <div class="grid fc110x2"> |
| 288 <div class="item">XXX XXX</div> |
| 289 <div class="spanningItem">XXX XXX</div> |
| 290 <div class="test firstRow"></div> |
| 291 <div class="test secondRow"></div> |
| 292 </div> |
| 293 |
| 294 <div class="grid" style="grid-template-rows: auto auto;"> |
| 295 <div class="spanningItem">XXX XXX</div> |
| 296 <div class="test firstRow"></div> |
| 297 <div class="test secondRow"></div> |
| 298 </div> |
| 299 |
| 300 <div class="grid" style="grid-template-rows: auto auto;"> |
| 301 <div class="item secondRow">XX</div> |
| 302 <div class="spanningItem">XXX XXX</div> |
| 303 <div class="test firstRow"></div> |
| 304 <div class="test secondRow"></div> |
| 305 </div> |
| 306 |
| 307 <div class="grid" style="grid-template-rows: max-content auto;"> |
| 308 <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
| 309 <div class="spanningItem">XXX XXX</div> |
| 310 <div class="test firstRow"></div> |
| 311 <div class="test secondRow"></div> |
| 312 </div> |
| 313 |
| 314 <div class="grid" style="grid-template-rows: auto min-content;"> |
| 315 <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
| 316 <div class="spanningItem">XXX XXX</div> |
| 317 <div class="test firstRow"></div> |
| 318 <div class="test secondRow"></div> |
| 319 </div> |
| 320 |
| 321 <div class="grid" style="grid-template-rows: max-content auto max-content;"> |
| 322 <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
| 323 <div class="spanningItem">XXX XXX</div> |
| 324 <div class="test firstRow"></div> |
| 325 <div class="test secondRow"></div> |
| 326 <div class="test thirdRow"></div> |
| 327 </div> |
| 328 |
| 329 <div class="grid" style="grid-template-rows: min-content auto min-content;"> |
| 330 <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
| 331 <div class="spanningItem">XXX XXX</div> |
| 332 <div class="test firstRow"></div> |
| 333 <div class="test secondRow"></div> |
| 334 <div class="test thirdRow"></div> |
| 335 </div> |
| 336 |
| 337 <div class="grid" style="grid-template-rows: auto auto auto;"> |
| 338 <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> |
| 339 <div class="spanningItem">XXX XXX</div> |
| 340 <div class="test firstRow"></div> |
| 341 <div class="test secondRow"></div> |
| 342 <div class="test thirdRow"></div> |
| 343 </div> |
OLD | NEW |