grid-template-columns-fit-content-001-ref.html (11416B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title> 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 6 <link rel="stylesheet" href="/css/support/grid.css"> 7 <meta name="flags" content="ahem"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .grid { 11 justify-content: start; 12 width: 100px; 13 position: relative; 14 padding-top: 10px; 15 margin-bottom: 5px; 16 grid-column-gap: 5px; 17 } 18 19 .item { 20 font: 10px/1 Ahem; 21 background: cyan; 22 padding-top: 2px; 23 } 24 25 .spanningItem { 26 font: 10px/1 Ahem; 27 grid-column: 1 / -1; 28 grid-row: 2; 29 background: salmon; 30 padding-top: 2px; 31 } 32 33 .test { 34 position: absolute; 35 left: 0; right: 0; top: 0; 36 height: 5px; 37 background: purple; 38 } 39 .test:nth-child(2n) { background: orange; } 40 41 .floatLeft { 42 float: left; 43 width: 190px; 44 } 45 46 h3 { font-size: 1em; } 47 </style> 48 49 <p>The test passes if it has the same output than the reference.</p> 50 51 <div class="floatLeft"> 52 <h3>Only fit-content() and with fixed size tracks.</h3> 53 <div class="grid"> 54 <div class="item">XXX</div> 55 <div class="test autoRowFirstColumn"></div> 56 </div> 57 58 <div class="grid" style="grid-template-columns: 30px 0px;"> 59 <div class="item">XXX</div> 60 <div class="spanningItem">XXX</div> 61 <div class="test autoRowFirstColumn"></div> 62 <div class="test autoRowSecondColumn"></div> 63 </div> 64 65 <div class="grid" style="grid-template-columns: 40px;"> 66 <div class="item">XXX XXX</div> 67 <div class="test autoRowFirstColumn"></div> 68 </div> 69 70 <div class="grid" style="grid-template-columns: auto auto;"> 71 <div class="spanningItem">XXX XXX</div> 72 <div class="test autoRowFirstColumn"></div> 73 <div class="test autoRowSecondColumn"></div> 74 </div> 75 76 <div class="grid" style="grid-template-columns: 40px auto;"> 77 <div class="item">XXX XXX</div> 78 <div class="spanningItem">XXX XXX</div> 79 <div class="test autoRowFirstColumn"></div> 80 <div class="test autoRowSecondColumn"></div> 81 </div> 82 83 <div class="grid" style="grid-template-columns: 80px;"> 84 <div class="item">XXX XXX XXX</div> 85 <div class="test autoRowFirstColumn"></div> 86 </div> 87 88 <div class="grid" style="grid-template-columns: auto auto;"> 89 <div class="spanningItem">XXX XXX XXX</div> 90 <div class="test autoRowFirstColumn"></div> 91 <div class="test autoRowSecondColumn"></div> 92 </div> 93 94 <div class="grid" style="grid-template-columns: 25px 70px;"> 95 <div class="item autoRowSecondColumn">XXX XXX XXX</div> 96 <div class="spanningItem">XXX XXX XXX</div> 97 <div class="test autoRowFirstColumn"></div> 98 <div class="test autoRowSecondColumn"></div> 99 </div> 100 101 <div class="grid" style="grid-template-columns: 20px 50px;"> 102 <div class="spanningItem">XXX XX XXX</div> 103 <div class="test autoRowFirstColumn"></div> 104 <div class="test autoRowSecondColumn"></div> 105 </div> 106 107 <div class="grid" style="grid-template-columns: 40px 40px;"> 108 <div class="item">XXXXX</div> 109 <div class="spanningItem">XXX XX XXX</div> 110 <div class="test autoRowFirstColumn"></div> 111 <div class="test autoRowSecondColumn"></div> 112 </div> 113 114 <div class="grid" style="grid-template-columns: 15px 80px;"> 115 <div class="item autoRowSecondColumn">XXXXX</div> 116 <div class="spanningItem">XXX XX XXX</div> 117 <div class="test autoRowFirstColumn"></div> 118 <div class="test autoRowSecondColumn"></div> 119 </div> 120 121 </div> 122 123 <div class="floatLeft"> 124 <h3>fit-content() with other content-sized tracks.</h3> 125 <div class="grid" style="grid-template-columns: 12.5px 82.5px;"> 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: 50px 45px;"> 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: 0px 95px;"> 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 class="grid" style="grid-template-columns: 12.5px 40px;"> 146 <div class="spanningItem">XXX XX XXX</div> 147 <div class="test autoRowFirstColumn"></div> 148 <div class="test autoRowSecondColumn"></div> 149 </div> 150 151 <div class="grid" style="grid-template-columns: 50px 40px;"> 152 <div class="item">XXXXX</div> 153 <div class="spanningItem">XXX XX XXX</div> 154 <div class="test autoRowFirstColumn"></div> 155 <div class="test autoRowSecondColumn"></div> 156 </div> 157 158 <div class="grid" style="grid-template-columns: 0px 50px;"> 159 <div class="item autoRowSecondColumn">XXXXX</div> 160 <div class="spanningItem">XXX XX XXX</div> 161 <div class="test autoRowFirstColumn"></div> 162 <div class="test autoRowSecondColumn"></div> 163 </div> 164 165 <div class="grid" style="grid-template-columns: auto min-content max-content"> 166 <div class="spanningItem">XXX XX XXX</div> 167 <div class="test autoRowFirstColumn"></div> 168 <div class="test autoRowSecondColumn"></div> 169 <div class="test autoRowThirdColumn"></div> 170 </div> 171 172 <div class="grid" style="grid-template-columns: min-content auto max-content"> 173 <div class="spanningItem">XXX XX XXX</div> 174 <div class="test autoRowFirstColumn"></div> 175 <div class="test autoRowSecondColumn"></div> 176 <div class="test autoRowThirdColumn"></div> 177 </div> 178 179 <div class="grid" style="grid-template-columns: min-content max-content auto"> 180 <div class="spanningItem">XXX XX XXX</div> 181 <div class="test autoRowFirstColumn"></div> 182 <div class="test autoRowSecondColumn"></div> 183 <div class="test autoRowThirdColumn"></div> 184 </div> 185 186 <div class="grid" style="grid-template-columns: 30px 0px 60px;"> 187 <div class="item" style="grid-column: 1">XXX XX</div> 188 <div class="spanningItem">XXX XX XXX</div> 189 <div class="test autoRowFirstColumn"></div> 190 <div class="test autoRowSecondColumn"></div> 191 <div class="test autoRowThirdColumn"></div> 192 </div> 193 194 <div class="grid" style="grid-template-columns: 30px 0px 60px;"> 195 <div class="item" style="grid-column: 1">XXX XX</div> 196 <div class="spanningItem">XXX XX XXX</div> 197 <div class="test autoRowFirstColumn"></div> 198 <div class="test autoRowSecondColumn"></div> 199 <div class="test autoRowThirdColumn"></div> 200 </div> 201 202 <div class="grid" style="grid-template-columns: 0px 90px 0px;"> 203 <div class="item" style="grid-column: 2">XXX XX</div> 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 </div> 210 211 <div class="floatLeft"> 212 <h3>fit-content() with percentage arguments.</h3> 213 <div class="grid" style="grid-template-columns: 30px;"> 214 <div class="item">XXX</div> 215 <div class="test autoRowFirstColumn"></div> 216 </div> 217 218 <div class="grid" style="grid-template-columns: 30px 0px;"> 219 <div class="item">XXX</div> 220 <div class="spanningItem">XXX</div> 221 <div class="test autoRowFirstColumn"></div> 222 <div class="test autoRowSecondColumn"></div> 223 </div> 224 225 <div class="grid" style="grid-template-columns: 30px;"> 226 <div class="item">XX XX</div> 227 <div class="test autoRowFirstColumn"></div> 228 </div> 229 230 <div class="grid" style="grid-template-columns: 30px 30px;"> 231 <div class="spanningItem">XXX XXX</div> 232 <div class="test autoRowFirstColumn"></div> 233 <div class="test autoRowSecondColumn"></div> 234 </div> 235 236 <div class="grid" style="grid-template-columns: 30px 30px;"> 237 <div class="item autoRowSecondColumn">X X X</div> 238 <div class="spanningItem">XXX XXX</div> 239 <div class="test autoRowFirstColumn"></div> 240 <div class="test autoRowSecondColumn"></div> 241 </div> 242 243 <div class="grid" style="grid-template-columns: 90px;"> 244 <div class="item">XXX XXX XXX</div> 245 <div class="test autoRowFirstColumn"></div> 246 </div> 247 248 <div class="grid" style="grid-template-columns: 47.5px 47.5px;"> 249 <div class="spanningItem">XXX XXX XXX</div> 250 <div class="test autoRowFirstColumn"></div> 251 <div class="test autoRowSecondColumn"></div> 252 </div> 253 254 <div class="grid" style="grid-template-columns: 15px 80px;"> 255 <div class="item autoRowSecondColumn">XXX XXX XXX</div> 256 <div class="spanningItem">XXX XXX XXX</div> 257 <div class="test autoRowFirstColumn"></div> 258 <div class="test autoRowSecondColumn"></div> 259 </div> 260 </div> 261 262 <div class="floatLeft"> 263 <h3>max-content < fit-content() argument.</h3> 264 265 <div class="grid" style="grid-template-columns: 70px;"> 266 <div class="item">XXX XXX</div> 267 <div class="test autoRowFirstColumn"></div> 268 </div> 269 270 <div class="grid" style="grid-template-columns: 32.5px 32.5px;"> 271 <div class="spanningItem">XXX XXX</div> 272 <div class="test autoRowFirstColumn"></div> 273 <div class="test autoRowSecondColumn"></div> 274 </div> 275 276 <div class="grid" style="grid-template-columns: 70px 0px;"> 277 <div class="item">XXX XXX</div> 278 <div class="spanningItem">XXX XXX</div> 279 <div class="test autoRowFirstColumn"></div> 280 <div class="test autoRowSecondColumn"></div> 281 </div> 282 283 <div class="grid" style="grid-template-columns: 32.5px 32.5px;"> 284 <div class="spanningItem">XXX XXX</div> 285 <div class="test autoRowFirstColumn"></div> 286 <div class="test autoRowSecondColumn"></div> 287 </div> 288 289 <div class="grid" style="grid-template-columns: 45px 20px;"> 290 <div class="item autoRowSecondColumn">XX</div> 291 <div class="spanningItem">XXX XXX</div> 292 <div class="test autoRowFirstColumn"></div> 293 <div class="test autoRowSecondColumn"></div> 294 </div> 295 296 <div class="grid" style="grid-template-columns: 92.5px 12.5px;"> 297 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> 298 <div class="spanningItem">XXX XXX</div> 299 <div class="test autoRowFirstColumn"></div> 300 <div class="test autoRowSecondColumn"></div> 301 </div> 302 303 <div class="grid" style="grid-template-columns: 82.5px 12.5px;"> 304 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> 305 <div class="spanningItem">XXX XXX</div> 306 <div class="test autoRowFirstColumn"></div> 307 <div class="test autoRowSecondColumn"></div> 308 </div> 309 310 <div class="grid" style="grid-template-columns: max-content auto max-content;"> 311 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> 312 <div class="spanningItem">XXX XXX</div> 313 <div class="test autoRowFirstColumn"></div> 314 <div class="test autoRowSecondColumn"></div> 315 <div class="test autoRowThirdColumn"></div> 316 </div> 317 318 <div class="grid" style="grid-template-columns: min-content auto min-content;"> 319 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> 320 <div class="spanningItem">XXX XXX</div> 321 <div class="test autoRowFirstColumn"></div> 322 <div class="test autoRowSecondColumn"></div> 323 <div class="test autoRowThirdColumn"></div> 324 </div> 325 326 <div class="grid" style="grid-template-columns: auto auto auto;"> 327 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> 328 <div class="spanningItem">XXX XXX</div> 329 <div class="test autoRowFirstColumn"></div> 330 <div class="test autoRowSecondColumn"></div> 331 <div class="test autoRowThirdColumn"></div> 332 </div> 333 334 </div>