grid-content-sized-columns-resolution.html (17005B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200"> 5 <link href="/css/support/grid.css" rel="stylesheet"> 6 <link href="/css/support/alignment.css" rel="stylesheet"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> 9 <meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths"> 10 <style> 11 .grid { 12 font: 10px/1 Ahem; 13 } 14 .gridWidth300 { 15 width: 300px; 16 } 17 .gridMinContentFixedAndAuto { 18 grid-template-columns: minmax(min-content, 15px) auto; 19 } 20 .gridMaxContentFixedAndAuto { 21 grid-template-columns: minmax(max-content, 15px) auto; 22 } 23 .gridAutoAndAuto { 24 grid-template-columns: auto auto; 25 } 26 .gridMinContentAndMinContentFixed { 27 grid-template-columns: min-content minmax(min-content, 30px); 28 } 29 .gridMinContentAndMaxContentFixed { 30 grid-template-columns: min-content minmax(max-content, 30px); 31 } 32 .gridMaxContentAndMinContent { 33 grid-template-columns: max-content min-content; 34 } 35 .gridFixedMinContentAndMaxContent { 36 grid-template-columns: minmax(10px, min-content) max-content; 37 } 38 .gridFixedMaxContentAndMinContent { 39 grid-template-columns: minmax(10px, max-content) min-content; 40 } 41 .gridAutoMinContent { 42 grid-template-columns: auto min-content; 43 } 44 .gridAutoMaxContent { 45 grid-template-columns: auto max-content; 46 } 47 .gridMaxContentAndMinContentFixed { 48 grid-template-columns: max-content minmax(min-content, 35px); 49 } 50 .gridMaxContentAndMaxContentFixed { 51 grid-template-columns: max-content minmax(max-content, 35px); 52 } 53 .gridMinContentFixedAndFixedFixedAndAuto { 54 grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto; 55 } 56 .gridAutoAndFixedFixedAndMaxContentFixed { 57 grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px); 58 } 59 .gridMaxContentAndMaxContentFixedAndMaxContent { 60 grid-template-columns: max-content minmax(max-content, 20px) max-content; 61 } 62 .gridAutoAndMinContentFixedAndMinContent { 63 grid-template-columns: auto minmax(min-content, 30px) min-content; 64 } 65 66 </style> 67 <script src="/resources/testharness.js"></script> 68 <script src="/resources/testharnessreport.js"></script> 69 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto"> 70 <div class="firstRowBothColumn">XXXX XXXX</div> 71 </div> 72 73 <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto"> 74 <div class="firstRowBothColumn">XXXX XXXX</div> 75 </div> 76 77 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed"> 78 <div class="firstRowBothColumn">XXXX XXXX</div> 79 </div> 80 81 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent"> 82 <div class="firstRowBothColumn">XXXX XXXX</div> 83 </div> 84 85 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent"> 86 <div class="firstRowBothColumn">XXXX XXXX</div> 87 </div> 88 89 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent"> 90 <div class="firstRowBothColumn">XXXX XXXX</div> 91 </div> 92 93 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed"> 94 <div class="firstRowBothColumn">XXXX XXXX</div> 95 </div> 96 97 <div class="constrainedContainer"> 98 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto"> 99 <div class="firstRowBothColumn">XXXX XXXX</div> 100 </div> 101 </div> 102 103 <div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent"> 104 <div class="firstRowBothColumn">XXXX XXXX</div> 105 </div> 106 107 <div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent"> 108 <div class="firstRowBothColumn">XXXX XXXX</div> 109 </div> 110 111 <div class="constrainedContainer"> 112 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed"> 113 <div class="firstRowBothColumn">XXXX XXXX</div> 114 </div> 115 </div> 116 117 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed"> 118 <div class="firstRowBothColumn">XXXX XXXX</div> 119 </div> 120 121 <!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. --> 122 <div class="constrainedContainer"> 123 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsortedConstrained"> 124 <div class="firstRowBothColumn">XXXX XXXX</div> 125 <div class="firstRowSecondColumn">XXXX XXXX</div> 126 </div> 127 </div> 128 129 <div class="constrainedContainer"> 130 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained"> 131 <div class="firstRowBothColumn">XXXX XXXX</div> 132 <div class="firstRowSecondColumn">XXX</div> 133 </div> 134 </div> 135 136 <div class="constrainedContainer"> 137 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsortedConstrained"> 138 <div class="firstRowBothColumn">XXXX XXXX</div> 139 <div class="firstRowBothColumn">XX XX XX</div> 140 <div class="firstRowSecondColumn">XXXX XXXX</div> 141 </div> 142 </div> 143 144 <div class="constrainedContainer"> 145 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsortedConstrained"> 146 <div class="firstRowBothColumn">XXX XXX</div> 147 <div class="firstRowSecondColumn">XXXXXXX</div> 148 </div> 149 </div> 150 151 <div class="constrainedContainer"> 152 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsortedConstrained"> 153 <div class="firstRowBothColumn">XXXXX XX</div> 154 <div class="firstRowSecondColumn">XXX</div> 155 <div class="firstRowSecondColumn">XXXXX</div> 156 </div> 157 </div> 158 159 <div class="constrainedContainer"> 160 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsortedConstrained"> 161 <div class="firstRowBothColumn">XXXX XXXX</div> 162 <div class="firstRowBothColumn">X X</div> 163 <div class="firstRowSecondColumn">XXXX</div> 164 </div> 165 </div> 166 167 <div class="constrainedContainer"> 168 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsortedConstrained"> 169 <div class="firstRowBothColumn">XXXX XXXX</div> 170 <div class="firstRowSecondColumn">XXXX XXXX</div> 171 </div> 172 </div> 173 174 <div class="constrainedContainer"> 175 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsortedConstrained"> 176 <div class="firstRowBothColumn">XX XX</div> 177 <div class="firstRowSecondColumn">XXXX</div> 178 <div class="firstRowSecondColumn">XXX XXX</div> 179 </div> 180 </div> 181 182 <div class="constrainedContainer"> 183 <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrained"> 184 <div class="firstRowBothColumn">XX XX XX XX</div> 185 <div class="firstRowSecondColumn">XXXXXX XXXXXX</div> 186 </div> 187 </div> 188 189 <div class="constrainedContainer"> 190 <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrained"> 191 <div class="firstRowBothColumn">XXXX XXXX</div> 192 <div class="firstRowBothColumn">XXX XXX</div> 193 <div class="firstRowSecondColumn">XXXXX</div> 194 </div> 195 </div> 196 197 <div class="constrainedContainer"> 198 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsortedConstrained"> 199 <div class="firstRowBothColumn">XXX XXX</div> 200 <div class="firstRowBothColumn">XXXX XXXX</div> 201 <div class="firstRowSecondColumn">XXXX XXXX</div> 202 <div class="firstRowSecondColumn">XX</div> 203 </div> 204 </div> 205 206 <div class="constrainedContainer"> 207 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsortedConstrained"> 208 <div class="firstRowBothColumn">XXXX XXXX</div> 209 <div class="firstRowBothColumn">XX XX XX XX</div> 210 <div class="firstRowSecondColumn">XXXXXXX</div> 211 </div> 212 </div> 213 214 <!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. --> 215 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted"> 216 <div class="firstRowBothColumn">XXXX XXXX</div> 217 <div class="firstRowSecondColumn">XXXX XXXX</div> 218 </div> 219 220 <div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted"> 221 <div class="firstRowBothColumn">XXXX XXXX</div> 222 <div class="firstRowSecondColumn">XXX</div> 223 </div> 224 225 <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsorted"> 226 <div class="firstRowBothColumn">XXXX XXXX</div> 227 <div class="firstRowBothColumn">XX XX XX XX</div> 228 <div class="firstRowSecondColumn">XXXX XXXX</div> 229 </div> 230 231 <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsorted"> 232 <div class="firstRowBothColumn">XXX XXX</div> 233 <div class="firstRowSecondColumn">XXXXXXX</div> 234 </div> 235 236 <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsorted"> 237 <div class="firstRowBothColumn">XXXXX XX</div> 238 <div class="firstRowSecondColumn">XXX</div> 239 <div class="firstRowSecondColumn">XXXXX</div> 240 </div> 241 242 <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsorted"> 243 <div class="firstRowBothColumn">XXXX XXXX</div> 244 <div class="firstRowBothColumn">X X</div> 245 <div class="firstRowSecondColumn">XXXX</div> 246 </div> 247 248 <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsorted"> 249 <div class="firstRowBothColumn">XXXX XXXX</div> 250 <div class="firstRowSecondColumn">XXXX XXXX</div> 251 </div> 252 253 <div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted"> 254 <div class="firstRowBothColumn">XX XX</div> 255 <div class="firstRowSecondColumn">XXXX</div> 256 <div class="firstRowSecondColumn">XXX XXX</div> 257 </div> 258 259 <div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted"> 260 <div class="firstRowBothColumn">XX XX XX XX</div> 261 <div class="firstRowSecondColumn">XXXXXX XXXXXX</div> 262 </div> 263 264 <div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted"> 265 <div class="firstRowBothColumn">XXXX XXXX</div> 266 <div class="firstRowBothColumn">XXX XXX</div> 267 <div class="firstRowSecondColumn">XXXXX</div> 268 </div> 269 270 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsorted"> 271 <div class="firstRowBothColumn">XXX XXX</div> 272 <div class="firstRowBothColumn">XXXX XXXX</div> 273 <div class="firstRowSecondColumn">XXXX XXXX</div> 274 <div class="firstRowSecondColumn">XX</div> 275 </div> 276 277 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsorted"> 278 <div class="firstRowBothColumn">XXXX XXXX</div> 279 <div class="firstRowBothColumn">XX XX XX XX</div> 280 <div class="firstRowSecondColumn">XXXXXXX</div> 281 </div> 282 283 <!-- The next four force the grid to grow only a particular subset of tracks above the limits --> 284 <div class="constrainedContainer"> 285 <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits"> 286 <div class="firstRowBothColumn">XXXX XXXX</div> 287 <div class="firstRowBothColumn">XXXXXXXXXXX</div> 288 </div> 289 </div> 290 291 <div class="constrainedContainer"> 292 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoAboveLimits"> 293 <div class="firstRowBothColumn">XXXX XXXX</div> 294 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> 295 </div> 296 </div> 297 298 <div class="constrainedContainer"> 299 <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContentFixedAndFixedFixedAndAuto"> 300 <div class="firstRowBothColumn">XXXX XXXX</div> 301 <div class="firstRowBothColumn">XXXXXXXXXX</div> 302 </div> 303 </div> 304 305 <div class="constrainedContainer"> 306 <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFixedFixedAndMaxContentFixed"> 307 <div class="firstRowBothColumn">XXXX XXXX</div> 308 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div> 309 </div> 310 </div> 311 312 <div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent"> 313 <div style="grid-row: 1; grid-column: 1;">X X X</div> 314 <div style="grid-row: 1; grid-column: 3;">X X</div> 315 <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div> 316 </div> 317 318 <div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent"> 319 <div style="grid-row: 1; grid-column: 1;">XX</div> 320 <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div> 321 <div style="grid-row: 1; grid-column: 3;">XXX XXX</div> 322 </div> 323 324 <script> 325 function testGridColumnsValues(id, computedColumnValue) { 326 test(function(){ 327 var div = document.getElementById(id); 328 var readValue = getComputedStyle(div).gridTemplateColumns; 329 assert_equals(readValue, computedColumnValue); 330 }, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`); 331 } 332 333 setup({ explicit_done: true }); 334 document.fonts.ready.then(() => { 335 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); 336 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); 337 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); 338 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); 339 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); 340 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); 341 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); 342 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); 343 testGridColumnsValues("gridAutoMinContent", "70px 20px"); 344 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); 345 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); 346 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); 347 348 // Check that items are processed by ascending span to compute track breadths forbidding extra space distribution. 349 testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px"); 350 testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px"); 351 testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px"); 352 testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "0px 70px"); 353 testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 70px"); 354 testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px"); 355 testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px"); 356 testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "10px 40px"); 357 testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 60px"); 358 testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px"); 359 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px"); 360 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px"); 361 362 // Check that items are processed by ascending span to compute track breadths allowing extra space distribution. 363 testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px"); 364 testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px"); 365 testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px"); 366 testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "0px 70px"); 367 testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 70px"); 368 testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px"); 369 testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "0px 90px"); 370 testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "15px 70px"); 371 testGridColumnsValues("gridAutoMinContentUnsorted", "50px 60px"); 372 testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px"); 373 testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px"); 374 testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px"); 375 376 // Check that only a subset of tracks grow above track limits. 377 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px"); 378 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px"); 379 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px"); 380 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px"); 381 testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px"); 382 testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px"); 383 384 done(); 385 }); 386 </script>