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