flex-content-resolution-rows-001.html (12162B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and flexible lengths.</title> 4 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-rows works properly." /> 11 12 <style> 13 .gridFlexContent { 14 grid-template-columns: 50px; 15 grid-template-rows: 1fr 1fr; 16 } 17 .gridMaxFlexContent { 18 grid-template-columns: 50px; 19 grid-template-rows: minmax(30px, 2fr); 20 } 21 .gridTwoMaxFlexContent { 22 grid-template-columns: 50px; 23 grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr); 24 } 25 .gridTwoDoubleMaxFlexContent { 26 grid-template-columns: 50px; 27 grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr); 28 } 29 .gridRespectBaseSize { 30 grid-template-columns: 50px; 31 grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr); 32 } 33 .gridRespectProportions { 34 grid-template-columns: 50px; 35 grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr); 36 } 37 .gridRespectBaseSizeProportions { 38 grid-template-columns: 50px; 39 grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); 40 } 41 .gridRespectBaseSizeBeforeProportions { 42 grid-template-columns: 50px; 43 grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); 44 } 45 .thirdRowFirstColumn { 46 background-color: yellow; 47 grid-column: 1; 48 grid-row: 3; 49 } 50 </style> 51 52 <script src="/resources/testharness.js"></script> 53 <script src="/resources/testharnessreport.js"></script> 54 <script src="/resources/check-layout-th.js"></script> 55 <script type="text/javascript"> 56 setup({ explicit_done: true }); 57 </script> 58 59 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 60 61 <div class="grid gridFlexContent constrainedContainer" style="position: relative;"> 62 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div> 63 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<br>X</div> 64 </div> 65 66 <div class="constrainedContainer"> 67 <div class="grid gridMaxFlexContent"> 68 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> 69 </div> 70 </div> 71 72 <!-- Allow the extra logical space distribution to occur. --> 73 <div style="width: 10px; height: 40px"> 74 <div class="grid gridMaxFlexContent" style="height: 100%;"> 75 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 76 </div> 77 </div> 78 79 <div style="width: 10px; height: 40px"> 80 <div class="grid gridMaxFlexContent"> 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> 82 </div> 83 </div> 84 85 <div style="width: 10px; height: 100px;"> 86 <div class="grid gridMaxFlexContent" style="height: 100%;"> 87 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> 88 </div> 89 </div> 90 91 <div style="width: 10px; height: 100px;"> 92 <div class="grid gridMaxFlexContent"> 93 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> 94 </div> 95 </div> 96 97 <div class="constrainedContainer"> 98 <div class="grid gridTwoMaxFlexContent" style="height: 100%"> 99 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 100 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 101 </div> 102 </div> 103 104 <div class="constrainedContainer"> 105 <div class="grid gridTwoMaxFlexContent"> 106 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 107 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 108 </div> 109 </div> 110 111 <!-- Allow the extra logical space distribution to occur. --> 112 <div style="width: 10px; height: 60px"> 113 <div class="grid gridTwoMaxFlexContent" style="height: 100%"> 114 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 115 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 116 </div> 117 </div> 118 119 <div style="width: 10px; height: 60px"> 120 <div class="grid gridTwoMaxFlexContent"> 121 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 122 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 123 </div> 124 </div> 125 126 <div style="width: 10px; height: 120px;"> 127 <div class="grid gridTwoMaxFlexContent" style="height: 100%"> 128 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 129 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> 130 </div> 131 </div> 132 133 <div style="width: 10px; height: 120px;"> 134 <div class="grid gridTwoMaxFlexContent"> 135 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 136 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 137 </div> 138 </div> 139 140 <div class="constrainedContainer"> 141 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 142 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 143 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 144 </div> 145 </div> 146 147 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> 148 <div class="constrainedContainer"> 149 <div class="grid gridTwoDoubleMaxFlexContent"> 150 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 151 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 152 </div> 153 </div> 154 155 <!-- Allow the extra logical space distribution to occur. --> 156 <div style="width: 10px; height: 60px"> 157 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 158 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div> 159 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div> 160 </div> 161 </div> 162 163 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> 164 <div style="width: 10px; height: 60px"> 165 <div class="grid gridTwoDoubleMaxFlexContent"> 166 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 167 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 168 </div> 169 </div> 170 171 <div style="width: 10px; height: 120px;"> 172 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 173 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div> 174 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div> 175 </div> 176 </div> 177 178 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> 179 <div style="width: 10px; height: 120px;"> 180 <div class="grid gridTwoDoubleMaxFlexContent"> 181 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 182 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 183 </div> 184 </div> 185 186 <!-- Flex track length must be at least its baseSize. --> 187 <div style="width: 10px; height: 100px;"> 188 <div class="grid gridRespectBaseSize" style="height: 100%;"> 189 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> 190 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> 191 </div> 192 </div> 193 194 <div style="width: 10px; height: 100px;"> 195 <div class="grid gridRespectBaseSize"> 196 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> 197 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div> 198 </div> 199 </div> 200 201 <!-- Flex track lengths must be proportional to their flex factors.. --> 202 <div style="width: 10px; height: 275px;"> 203 <div class="grid gridRespectProportions" style="height: 100%;"> 204 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> 205 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 206 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> 207 </div> 208 </div> 209 210 <div style="width: 10px; height: 275px;"> 211 <div class="grid gridRespectProportions"> 212 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> 213 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div> 214 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 215 </div> 216 </div> 217 218 <!-- Flex track lengths must be proportional but still respecting their base sizes. --> 219 <div style="width: 10px; height: 350px;"> 220 <div class="grid gridRespectBaseSizeProportions" style="height: 100%;"> 221 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 222 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> 223 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> 224 </div> 225 </div> 226 227 <div style="width: 10px; height: 350px;"> 228 <div class="grid gridRespectBaseSizeProportions"> 229 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 230 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> 231 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 232 </div> 233 </div> 234 235 <!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement --> 236 <div style="width: 10px; height: 275px;"> 237 <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;"> 238 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 239 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> 240 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div> 241 </div> 242 </div> 243 244 <div style="width: 10px; height: 275px;"> 245 <div class="grid gridRespectBaseSizeBeforeProportions"> 246 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 247 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> 248 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> 249 </div> 250 </div> 251 252 </body> 253 </html>