flex-content-resolution-rows-002.html (11488B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and minmax sizes.</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 inside containers using minmax() with grid-template-rows works properly." /> 11 12 <style> 13 .gridMaxMaxContent { 14 grid-template-columns: 50px; 15 grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr); 16 } 17 18 .gridMinMinContent { 19 grid-template-columns: 50px; 20 grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px); 21 } 22 23 .gridWithIntrinsicSizeBiggerThanFlex { 24 grid-template-columns: 50px; 25 grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr); 26 } 27 28 .gridShrinkBelowItemsIntrinsicSize { 29 grid-template-columns: 50px; 30 grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr); 31 } 32 33 .gridWithNonFlexingItems { 34 grid-template-columns: 50px; 35 grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr); 36 } 37 38 .thirdRowFirstColumn { 39 grid-column: 1; 40 grid-row: 3; 41 } 42 .fourthRowFirstColumn { 43 grid-column: 1; 44 grid-row: 4; 45 } 46 </style> 47 48 <script src="/resources/testharness.js"></script> 49 <script src="/resources/testharnessreport.js"></script> 50 <script src="/resources/check-layout-th.js"></script> 51 <script type="text/javascript"> 52 setup({ explicit_done: true }); 53 </script> 54 55 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 56 57 <div class="constrainedContainer"> 58 <div class="grid gridMaxMaxContent"> 59 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> 60 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 61 </div> 62 </div> 63 64 <!-- Allow the extra logical space distribution to occur. --> 65 <div style="width: 10px; height: 40px"> 66 <div class="grid gridMaxMaxContent" style="height: 100%"> 67 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> 68 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> 69 </div> 70 </div> 71 72 <div style="width: 10px; height: 40px"> 73 <div class="grid gridMaxMaxContent"> 74 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> 75 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 76 </div> 77 </div> 78 79 <div style="width: 10px; height: 110px;"> 80 <div class="grid gridMaxMaxContent" style="height: 100%"> 81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> 82 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> 83 </div> 84 </div> 85 86 <div style="width: 10px; height: 110px;"> 87 <div class="grid gridMaxMaxContent"> 88 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> 89 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 90 </div> 91 </div> 92 93 <div class="constrainedContainer"> 94 <div class="grid gridMinMinContent" style="height: 100%"> 95 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> 96 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> 97 </div> 98 </div> 99 100 <div class="constrainedContainer"> 101 <div class="grid gridMinMinContent"> 102 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> 103 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> 104 </div> 105 </div> 106 107 <!-- Allow the extra logical space distribution to occur. --> 108 <div style="width: 10px; height: 40px"> 109 <div class="grid gridMinMinContent" style="height: 100%"> 110 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> 111 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div> 112 </div> 113 </div> 114 115 <div class="grid gridMinMinContent" style="height: 40px"> 116 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> 117 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div> 118 </div> 119 120 <div style="width: 10px; height: 110px;"> 121 <div class="grid gridMinMinContent" style="height: 100%"> 122 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div> 123 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> 124 </div> 125 </div> 126 127 <div style="width: 10px; height: 110px;"> 128 <div class="grid gridMinMinContent"> 129 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> 130 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> 131 </div> 132 </div> 133 134 <div style="width: 10px; height: 60px;"> 135 <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%"> 136 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 137 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 138 </div> 139 </div> 140 141 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> 142 <div style="width: 10px; height: 60px;"> 143 <div class="grid gridWithIntrinsicSizeBiggerThanFlex"> 144 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 145 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> 146 </div> 147 </div> 148 149 <div style="width: 10px; height: 60px;"> 150 <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%"> 151 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div> 152 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 153 </div> 154 </div> 155 156 <div style="width: 10px; height: 60px;"> 157 <div class="grid gridShrinkBelowItemsIntrinsicSize"> 158 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div> 159 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 160 </div> 161 </div> 162 163 <!-- No space available for the <flex> --> 164 <div style="width: 10px; height: 100px;"> 165 <div class="grid gridWithNonFlexingItems" style="height: 100%"> 166 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 167 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 168 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 169 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 170 </div> 171 </div> 172 173 <div style="width: 10px; height: 100px;"> 174 <div class="grid gridWithNonFlexingItems"> 175 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 176 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 177 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 178 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> 179 </div> 180 </div> 181 182 <!-- The second track should be sized after the min-content as the <flex> value should be too small. --> 183 <div style="width: 10px; height: 180px;"> 184 <div class="grid gridWithNonFlexingItems" style="height: 100%"> 185 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 186 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 187 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 188 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 189 </div> 190 </div> 191 192 <div style="width: 10px; height: 180px;"> 193 <div class="grid gridWithNonFlexingItems"> 194 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 195 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 196 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 197 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> 198 </div> 199 </div> 200 201 <div style="width: 10px; height: 400px;"> 202 <div class="grid gridWithNonFlexingItems" style="height: 100%"> 203 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 204 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> 205 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 206 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> 207 </div> 208 </div> 209 210 <div style="width: 10px; height: 400px;"> 211 <div class="grid gridWithNonFlexingItems"> 212 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> 213 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> 214 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> 215 <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> 216 </div> 217 </div> 218 219 </body> 220 </html>