src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-sized-columns-resolution.html

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