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