grid-automatic-minimum-for-auto-rows-001.html (11677B)
1 <!DOCTYPE html> 2 <title>CSS Grid: automatic minimum in 'auto' rows</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' rows."> 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 .minHeight10 { min-height: 10px; } 15 .minHeight20 { min-height: 20px; } 16 .minHeight30 { min-height: 30px; } 17 .minHeight40 { min-height: 40px; } 18 .minHeight50 { min-height: 50px; } 19 .minHeight60 { min-height: 60px; } 20 .minHeight70 { min-height: 70px; } 21 .minHeight90 { min-height: 90px; } 22 .minHeightMaxContent { min-height: max-content; } 23 24 .height30 { height: 30px; } 25 .height50 { height: 50px; } 26 .height60 { height: 60px; } 27 .height200 { height: 200px; } 28 29 .border5 { border: 5px solid #abc; } 30 .padding8 { padding: 8px 0px; } 31 32 /* All these 4 cases are equivalent. We use them interchangeably. */ 33 .gridAuto { grid-template-rows: auto; } 34 .gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); } 35 .gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); } 36 .gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); } 37 38 /* All these 3 cases are equivalent. We use them interchangeably. */ 39 .gridAutoAndAuto { grid-template-rows: auto auto; } 40 .gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); } 41 .gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; } 42 </style> 43 <script src="/resources/testharness.js"></script> 44 <script src="/resources/testharnessreport.js"></script> 45 46 <div class="grid gridAuto constrainedContainer" id="gridAuto"> 47 <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div> 48 </div> 49 50 <div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize"> 51 <div class="firstRowFirstColumn minHeight40">XX</div> 52 </div> 53 54 <div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto"> 55 <div class="firstRowFirstColumn minHeight40">XX<br>XX</div> 56 </div> 57 58 <div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent"> 59 <div class="firstRowFirstColumn minHeight20 height30"></div> 60 </div> 61 62 <div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto"> 63 <div class="firstRowFirstColumn minHeight60">X</div> 64 </div> 65 66 <div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems"> 67 <div class="firstRowFirstColumn minHeight60">X<br>X</div> 68 <div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div> 69 <div class="firstRowAutoColumn minConstrainedContainer height50"></div> 70 </div> 71 72 <div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight"> 73 <div class="firstRowFirstColumn height30">X<br>X</div> 74 <div class="firstRowSecondColumn minHeight50"></div> 75 <div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div> 76 </div> 77 78 <div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight"> 79 <div class="firstRowFirstColumn minHeight30">X<br>X</div> 80 <div class="firstRowSecondColumn height60">XX</div> 81 <div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div> 82 </div> 83 84 <div class="constrainedContainer"> 85 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren"> 86 <div class="firstRowFirstColumn height200"></div> 87 <div class="secondRowFirstColumn height50"></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="bothRowFirstColumn minHeight50">XXXXXX X XXX</div> 95 </div> 96 </div> 97 98 <div class="constrainedContainer"> 99 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning"> 100 <div class="bothRowSecondColumn minHeight60">XX XX XX</div> 101 <div class="firstRowFirstColumn">X X X X</div> 102 <div class="firstRowFirstColumn">XX XX</div> 103 </div> 104 </div> 105 106 <div class="constrainedContainer"> 107 <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning"> 108 <div class="secondRowFirstColumn">X XXX XX</div> 109 <div class="bothRowSecondColumn minHeight70">XXX XXXX</div> 110 </div> 111 </div> 112 113 <div class="constrainedContainer"> 114 <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning"> 115 <div class="bothRowSecondColumn minHeight70">XX XX XX</div> 116 <div class="bothRowFirstColumn">XXXXX X XXXXX</div> 117 </div> 118 </div> 119 120 <div class="constrainedContainer"> 121 <div class="grid gridMinMaxAutoMaxContentAndAuto" 122 id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning"> 123 <div class="secondRowFirstColumn minHeight60">X XXX XX</div> 124 <div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div> 125 <div class="firstRowFirstColumn">XX XX</div> 126 </div> 127 </div> 128 129 <div class="constrainedContainer"> 130 <div class="grid gridMinMaxAutoMaxContentAndAuto" 131 id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning"> 132 <div class="bothRowSecondColumn">XX XX XX XX</div> 133 <div class="firstRowFirstColumn minHeight40">XXX</div> 134 <div class="bothRowFirstColumn minHeight90">X XX XXX</div> 135 <div class="secondRowFirstColumn">X XX X</div> 136 </div> 137 </div> 138 139 <div class="constrainedContainer"> 140 <div class="grid gridAuto" id="gridAutoWithFixedHeightChild"> 141 <div class="firstRowFirstColumn height60">XXX X</div> 142 </div> 143 </div> 144 145 <div class="constrainedContainer"> 146 <div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight"> 147 <div class="firstRowFirstColumn height60 minHeight40">XXX X</div> 148 </div> 149 </div> 150 151 <div class="constrainedContainer"> 152 <div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight"> 153 <div class="firstRowFirstColumn height60 minHeight90">XXX X</div> 154 </div> 155 </div> 156 157 <div class="constrainedContainer"> 158 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight"> 159 <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div> 160 </div> 161 </div> 162 163 <div class="constrainedContainer"> 164 <div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight"> 165 <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div> 166 </div> 167 </div> 168 169 <div class="constrainedContainer"> 170 <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight"> 171 <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div> 172 </div> 173 </div> 174 175 <div class="constrainedContainer"> 176 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder"> 177 <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div> 178 </div> 179 </div> 180 181 <div class="constrainedContainer"> 182 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding"> 183 <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div> 184 </div> 185 </div> 186 187 <div class="constrainedContainer"> 188 <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding"> 189 <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div> 190 </div> 191 </div> 192 193 <div class="constrainedContainer"> 194 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder"> 195 <div class="firstRowFirstColumn border5">XX<br>XXX X</div> 196 </div> 197 </div> 198 199 <div class="constrainedContainer"> 200 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding"> 201 <div class="firstRowFirstColumn padding8">XX<br>XXX X</div> 202 </div> 203 </div> 204 205 <div class="constrainedContainer"> 206 <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding"> 207 <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div> 208 </div> 209 </div> 210 211 <div class="constrainedContainer"> 212 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder"> 213 <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div> 214 </div> 215 </div> 216 217 <div class="constrainedContainer"> 218 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding"> 219 <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div> 220 </div> 221 </div> 222 223 <div class="constrainedContainer"> 224 <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding"> 225 <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div> 226 </div> 227 </div> 228 229 <script> 230 function testGridRowsValues(id, computedRowValue) 231 { 232 assert_equals(window.getComputedStyle(document.getElementById(id)) 233 .getPropertyValue('grid-template-rows'), computedRowValue); 234 } 235 236 setup({ explicit_done: true }); 237 document.fonts.ready.then(() => { 238 test(() => { 239 testGridRowsValues('gridAuto', '40px'); 240 testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px'); 241 testGridRowsValues('gridMinMaxAutoAuto', '40px'); 242 testGridRowsValues('gridMinMaxAutoMaxContent', '30px'); 243 testGridRowsValues('gridMinMaxMinContentAuto', '60px'); 244 testGridRowsValues('gridAutoMultipleItems', '60px'); 245 testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px'); 246 testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px'); 247 testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px'); 248 }, 'Check that min-height is honored when sizing auto rows.'); 249 test(() => { 250 testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px'); 251 testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px'); 252 testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px'); 253 testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px'); 254 testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px'); 255 testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px'); 256 }, 'Check that min-height is honored when sizing auto rows and spanning grid items.'); 257 test(() => { 258 testGridRowsValues('gridAutoWithFixedHeightChild', '60px'); 259 testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px'); 260 testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px'); 261 testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px'); 262 testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px'); 263 testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px'); 264 }, 'Check the interactions between height and min-height and auto tracks.'); 265 test(() => { 266 testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px'); 267 testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px'); 268 testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px'); 269 testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px'); 270 testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px'); 271 testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px'); 272 testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px'); 273 testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px'); 274 testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px'); 275 }, 'Check that borders and paddings are considering when computing min sizes.'); 276 done(); 277 }); 278 </script>