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