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