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