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