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