third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html

   1 <html>
   2 <link href="resources/grid.css" rel="stylesheet"/>
   3 <style>
   4 .grid { font: 10px/1 Ahem; }
   5
   6 .minWidth10 { min-width: 10px; }
   7 .minWidth20 { min-width: 20px; }
   8 .minWidth30 { min-width: 30px; }
   9 .minWidth40 { min-width: 40px; }
  10 .minWidth50 { min-width: 50px; }
  11 .minWidth60 { min-width: 60px; }
  12 .minWidth70 { min-width: 70px; }
  13 .minWidth90 { min-width: 90px; }
  14 .minWidthMaxContent { min-width: -webkit-max-content; }
  15
  16 .width50 { width: 50px; }
  17 .width60 { width: 60px; }
  18
  19 .border5 { border: 5px solid #abc; }
  20 .padding8 { padding: 0px 8px 0px; }
  21
  22 /* All these 4 cases are equivalent. We use them interchangeably. */
  23 .gridAuto { grid-template-columns: auto; }
  24 .gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); }
  25 .gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); }
  26 .gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); }
  27
  28 /* All these 3 cases are equivalent. We use them interchangeably. */
  29 .gridAutoAndAuto { grid-template-columns: auto auto; }
  30 .gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); }
  31 .gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; }
  32
  33 </style>
  34 <script src="../../resources/js-test.js"></script>
  35 <body>
  36
  37 <div class="constrainedContainer">
  38     <div class="grid gridAuto" id="gridAuto">
  39         <div class="firstRowFirstColumn minWidth40">XXXXXX</div>
  40     </div>
  41 </div>
  42
  43 <div class="constrainedContainer">
  44     <div class="grid gridAuto" id="gridAutoItemSmallerThanMinSize">
  45         <div class="firstRowFirstColumn minWidth40">XX</div>
  46     </div>
  47 </div>
  48
  49 <div class="constrainedContainer">
  50     <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAuto">
  51         <div class="firstRowFirstColumn minWidth40">XX XX XX</div>
  52     </div>
  53 </div>
  54
  55 <div class="constrainedContainer">
  56     <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent">
  57         <div class="firstRowFirstColumn minWidth40">XXX XX X</div>
  58     </div>
  59 </div>
  60
  61 <div class="constrainedContainer">
  62     <div class="grid gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto">
  63         <div class="firstRowFirstColumn minWidth40">X X X X X X</div>
  64     </div>
  65 </div>
  66
  67 <div class="constrainedContainer">
  68     <div class="grid gridAuto" id="gridAutoMultipleItems">
  69         <div class="firstRowFirstColumn minWidth30">XX</div>
  70         <div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div>
  71         <div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div>
  72     </div>
  73 </div>
  74
  75 <div class="constrainedContainer">
  76     <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth">
  77         <div class="firstRowFirstColumn minWidth30">XX</div>
  78         <div class="secondRowFirstColumn">XXXXXX</div>
  79         <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
  80     </div>
  81 </div>
  82
  83 <div class="constrainedContainer">
  84     <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth">
  85         <div class="firstRowFirstColumn minWidth30">XX</div>
  86         <div class="secondRowFirstColumn">XX XXXXXXXX</div>
  87         <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
  88     </div>
  89 </div>
  90
  91 <div class="constrainedContainer">
  92     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
  93         <div class="firstRowFirstColumn">XX XX</div>
  94         <div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div>
  95     </div>
  96 </div>
  97
  98 <div class="constrainedContainer">
  99     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
 100         <div class="secondRowBothColumn minWidth60">XX XX XX</div>
 101         <div class="firstRowSecondColumn">X X</div>
 102         <div class="firstRowSecondColumn">XXXX</div>
 103     </div>
 104 </div>
 105
 106 <div class="constrainedContainer">
 107     <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
 108         <div class="firstRowSecondColumn">X XXX XX</div>
 109         <div class="secondRowBothColumn minWidth70">XXX XXXX</div>
 110     </div>
 111 </div>
 112
 113 <div class="constrainedContainer">
 114     <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
 115         <div class="secondRowBothColumn minWidth70">XX XX XX</div>
 116         <div class="firstRowBothColumn">XXXXX X XXXXX</div>
 117     </div>
 118 </div>
 119
 120 <div class="constrainedContainer">
 121     <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
 122         <div class="firstRowSecondColumn minWidth60">X XXX XX</div>
 123         <div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div>
 124         <div class="firstRowFirstColumn">XX XX</div>
 125     </div>
 126 </div>
 127
 128 <div class="constrainedContainer">
 129     <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
 130         <div class="secondRowBothColumn">XX XX XX XX</div>
 131         <div class="firstRowFirstColumn minWidth40">XXX</div>
 132         <div class="firstRowBothColumn minWidth90">X XX XXX</div>
 133         <div class="firstRowSecondColumn">X XX X</div>
 134     </div>
 135 </div>
 136
 137 <div class="constrainedContainer">
 138     <div class="grid gridAuto" id="gridAutoWithFixedWidthChild">
 139         <div class="firstRowFirstColumn width60">XXX X</div>
 140     </div>
 141 </div>
 142
 143 <div class="constrainedContainer">
 144     <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth">
 145         <div class="firstRowFirstColumn width60 minWidth40">XXX X</div>
 146     </div>
 147 </div>
 148
 149 <div class="constrainedContainer">
 150     <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth">
 151         <div class="firstRowFirstColumn width60 minWidth90">XXX X</div>
 152     </div>
 153 </div>
 154
 155 <div class="constrainedContainer">
 156     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth">
 157         <div class="firstRowBothColumn width50">XX XXX</div>
 158     </div>
 159 </div>
 160
 161 <div class="constrainedContainer">
 162     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth">
 163         <div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div>
 164     </div>
 165 </div>
 166
 167 <div class="constrainedContainer">
 168     <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth">
 169         <div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div>
 170     </div>
 171 </div>
 172
 173 <div class="constrainedContainer">
 174     <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorder">
 175         <div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div>
 176     </div>
 177 </div>
 178
 179 <div class="constrainedContainer">
 180     <div class="grid gridAuto" id="gridAutoFixedMinWidthWithPadding">
 181         <div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div>
 182     </div>
 183 </div>
 184
 185 <div class="constrainedContainer">
 186     <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding">
 187         <div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div>
 188     </div>
 189 </div>
 190
 191 <div class="constrainedContainer">
 192     <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorder">
 193         <div class="firstRowFirstColumn border5">XX XXX X</div>
 194     </div>
 195 </div>
 196
 197 <div class="constrainedContainer">
 198     <div class="grid gridAuto" id="gridAutoAutoMinWidthWithPadding">
 199         <div class="firstRowFirstColumn padding8">XX XXX X</div>
 200     </div>
 201 </div>
 202
 203 <div class="constrainedContainer">
 204     <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding">
 205         <div class="firstRowFirstColumn border5 padding8">XX XXX X</div>
 206     </div>
 207 </div>
 208
 209 <div class="constrainedContainer">
 210     <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorder">
 211         <div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div>
 212     </div>
 213 </div>
 214
 215 <div class="constrainedContainer">
 216     <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithPadding">
 217         <div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div>
 218     </div>
 219 </div>
 220
 221 <div class="constrainedContainer">
 222     <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding">
 223         <div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div>
 224     </div>
 225 </div>
 226
 227 <script>
 228 function testGridColumnsValues(id, computedColumnValue)
 229 {
 230     shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
 231 }
 232
 233 debug("Check that min-width is honored when sizing auto columns.");
 234 testGridColumnsValues("gridAuto", "40px");
 235 testGridColumnsValues("gridAutoItemSmallerThanMinSize", "40px");
 236 testGridColumnsValues("gridMinMaxAutoAuto", "40px");
 237 testGridColumnsValues("gridMinMaxAutoMaxContent", "40px");
 238 testGridColumnsValues("gridMinMaxMinContentAuto", "40px");
 239 testGridColumnsValues("gridAutoMultipleItems", "30px");
 240 testGridColumnsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth", "60px");
 241 testGridColumnsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth", "80px");
 242
 243 debug("");
 244 debug("Check that min-width is honored when sizing auto columns and spanning grid items.");
 245 testGridColumnsValues("gridAutoAndAutoOneSpanningOneNonSpannig", "35px 15px");
 246 testGridColumnsValues("gridAutoAndAutoOneSpanningMultipleNonSpanning", "20px 40px");
 247 testGridColumnsValues("gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning", "20px 50px");
 248 testGridColumnsValues("gridAutoAndMinMaxAutoAutoMultipleSpanning", "35px 35px");
 249 testGridColumnsValues("gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning", "25px 65px");
 250 testGridColumnsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning", "40px 50px");
 251
 252 debug("");
 253 debug("Check the interactions between width and min-width and auto tracks.");
 254 testGridColumnsValues("gridAutoWithFixedWidthChild", "60px");
 255 testGridColumnsValues("gridAutoWithFixedWidthChildAndMinWidth", "40px");
 256 testGridColumnsValues("gridAutoWithFixedWidthChildAndHigherMinWidth", "90px");
 257 testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidth", "25px 25px");
 258 testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndMinWidth", "25px 25px");
 259 testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth", "35px 35px");
 260
 261 debug("");
 262 debug("Check that borders and paddings are considering when computing min sizes.");
 263 testGridColumnsValues("gridAutoFixedMinWidthWithBorder", "50px");
 264 testGridColumnsValues("gridAutoFixedMinWidthWithPadding", "56px");
 265 testGridColumnsValues("gridAutoFixedMinWidthWithBorderAndPadding", "66px");
 266 testGridColumnsValues("gridAutoAutoMinWidthWithBorder", "40px");
 267 testGridColumnsValues("gridAutoAutoMinWidthWithPadding", "46px");
 268 testGridColumnsValues("gridAutoAutoMinWidthWithBorderAndPadding", "56px");
 269 testGridColumnsValues("gridAutoMaxContentMinWidthWithBorder", "90px");
 270 testGridColumnsValues("gridAutoMaxContentMinWidthWithPadding", "96px");
 271 testGridColumnsValues("gridAutoMaxContentMinWidthWithBorderAndPadding", "106px");
 272
 273 </script>
 274 </body>
 275 </html>