Chromium Code Reviews

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html

Issue 2339983002: [css-grid] Remove the 2x computation of row sizes w/ indefinite heights (Closed)
Patch Set: Rebased patch for landing v2 Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « no previous file | third_party/WebKit/PerformanceTests/Layout/nested-grid.html » ('j') | third_party/WebKit/PerformanceTests/Layout/nested-grid.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="resources/grid-alignment.css" rel="stylesheet"> 4 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet"> 5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
6 6
7 <style> 7 <style>
8 .grid { 8 .grid {
9 grid-template-rows: minmax(0px, 100px); 9 grid-template-rows: minmax(0px, 100px);
10 width: 40px; 10 width: 40px;
(...skipping 34 matching lines...)
45 </div> 45 </div>
46 </div> 46 </div>
47 47
48 <div class="max-content"> 48 <div class="max-content">
49 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100"> 49 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100">
50 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XXX XX</div> 50 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XXX XX</div>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 <div class="grid max-content max-height-35" data-expected-width="40" data-expect ed-height="35"> 54 <div class="grid max-content max-height-35" data-expected-width="40" data-expect ed-height="35">
55 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XXX XX XXX</div> 55 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XX XXX</div>
56 </div> 56 </div>
57 57
58 <div class="grid max-content max-height-min-content" data-expected-width="40" da ta-expected-height="0"> 58 <div class="grid max-content max-height-min-content" data-expected-width="40" da ta-expected-height="0">
59 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX X</div> 59 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div>
60 </div> 60 </div>
61 61
62 <div class="grid max-height-min-content" data-expected-width="40" data-expected- height="0"> 62 <div class="grid max-height-min-content" data-expected-width="40" data-expected- height="0">
63 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div> 63 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX</div>
64 </div> 64 </div>
65 65
66 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100"> 66 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">
67 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXX X XXX</div> 67 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXX X XXX</div>
68 </div> 68 </div>
69 69
70 <div class="grid max-content" data-expected-width="40" data-expected-height="100 "> 70 <div class="grid max-content" data-expected-width="40" data-expected-height="100 ">
71 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXX XX</div> 71 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXX XX</div>
72 </div> 72 </div>
73 73
(...skipping 49 matching lines...)
123 </div> 123 </div>
124 </div> 124 </div>
125 125
126 <div class="min-content max-height-50"> 126 <div class="min-content max-height-50">
127 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100"> 127 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100">
128 <div class="sizedToGridArea min-height-fill-available" data-expected-wid th="40" data-expected-height="100">XXXX X X XXXX</div> 128 <div class="sizedToGridArea min-height-fill-available" data-expected-wid th="40" data-expected-height="100">XXXX X X XXXX</div>
129 </div> 129 </div>
130 </div> 130 </div>
131 131
132 <div class="grid itemsStart min-content" data-expected-width="40" data-expected- height="0"> 132 <div class="grid itemsStart min-content" data-expected-width="40" data-expected- height="0">
133 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XX XX</div> 133 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XX XX</div>
134 </div> 134 </div>
135 135
136 <div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="50"> 136 <div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="50">
137 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX X</div> 137 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX X</div>
138 </div> 138 </div>
139 139
140 <div class="grid itemsStart min-content min-height-fit-content" data-expected-wi dth="40" data-expected-height="100"> 140 <div class="grid itemsStart min-content min-height-fit-content" data-expected-wi dth="40" data-expected-height="100">
141 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXXX</div> 141 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXXX</div>
142 </div> 142 </div>
143 143
144 <div style="height: 200px;"> 144 <div style="height: 200px;">
145 <div class="grid itemsStart min-content min-height-fill-available" data-expe cted-width="40" data-expected-height="200"> 145 <div class="grid itemsStart min-content min-height-fill-available" data-expe cted-width="40" data-expected-height="200">
146 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXXX XXXX XXX</div> 146 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXXX XXXX XXX</div>
147 </div> 147 </div>
148 </div> 148 </div>
149 149
150 <div class="grid itemsStart min-content min-height-min-content" data-expected-wi dth="40" data-expected-height="0"> 150 <div class="grid itemsStart min-content min-height-min-content" data-expected-wi dth="40" data-expected-height="0">
151 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div> 151 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX</div>
152 </div> 152 </div>
153 153
154 <div class="grid itemsStart min-content min-height-35" data-expected-width="40" data-expected-height="35"> 154 <div class="grid itemsStart min-content min-height-35" data-expected-width="40" data-expected-height="35">
155 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div> 155 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XX</div>
156 </div> 156 </div>
157 157
158 <div class="grid itemsStart min-content min-height-max-content" data-expected-wi dth="40" data-expected-height="100"> 158 <div class="grid itemsStart min-content min-height-max-content" data-expected-wi dth="40" data-expected-height="100">
159 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">X XXX X</div> 159 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">X XXX X</div>
160 </div> 160 </div>
161 161
162 <div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="50"> 162 <div class="grid itemsStart min-content min-height-50" data-expected-width="40" data-expected-height="50">
163 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XXXX XXXX XXXX XXXX</div> 163 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXXX XXXX XXXX XXXX</div>
164 </div> 164 </div>
165 165
166 <div class="grid itemsStart min-content max-height-50" data-expected-width="40" data-expected-height="0"> 166 <div class="grid itemsStart min-content max-height-50" data-expected-width="40" data-expected-height="0">
167 <div class="sizedToGridArea min-height-fill-available" data-expected-width=" 40" data-expected-height="50">XXXX X X XXXX</div> 167 <div class="sizedToGridArea min-height-fill-available" data-expected-width=" 40" data-expected-height="100">XXXX X X XXXX</div>
168 </div> 168 </div>
169 169
170 <br> 170 <br>
171 <h2>Check the behavior of grids with definite available space.</h2> 171 <h2>Check the behavior of grids with definite available space.</h2>
172 <div class="grid itemsStart" style="height: 100px;" data-expected-width="40" dat a-expected-height="100"> 172 <div class="grid itemsStart" style="height: 100px;" data-expected-width="40" dat a-expected-height="100">
173 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div> 173 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div>
174 </div> 174 </div>
175 175
176 <div class="grid itemsStart max-height-35" style="height: 100px;" data-expected- width="40" data-expected-height="35"> 176 <div class="grid itemsStart max-height-35" style="height: 100px;" data-expected- width="40" data-expected-height="35">
177 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div> 177 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>
(...skipping 22 matching lines...)
200 <br> 200 <br>
201 <h2>Check the behavior of grids with indefinite available space.</h2> 201 <h2>Check the behavior of grids with indefinite available space.</h2>
202 <div class="fit-content"> 202 <div class="fit-content">
203 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100"> 203 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100">
204 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div> 204 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>
205 </div> 205 </div>
206 <div class="grid itemsStart min-height-35" data-expected-width="40" data-exp ected-height="100"> 206 <div class="grid itemsStart min-height-35" data-expected-width="40" data-exp ected-height="100">
207 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXXX X</div> 207 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXXX X</div>
208 </div> 208 </div>
209 <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="0"> 209 <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="0">
210 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX XX XX</div> 210 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XX XX</div>
211 </div> 211 </div>
212 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="100"> 212 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="100">
213 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div> 213 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
214 </div> 214 </div>
215 </div> 215 </div>
216 216
217 <div class="fit-content" style="height: 125px;"> 217 <div class="fit-content" style="height: 125px;">
218 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="125"> 218 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="125">
219 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div> 219 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>
220 </div> 220 </div>
221 </div> 221 </div>
222 222
223 <div class="fit-content min-height-50"> 223 <div class="fit-content min-height-50">
224 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100"> 224 <div class="grid itemsStart" data-expected-width="40" data-expected-height=" 100">
225 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XX X XXX</div> 225 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XX X XXX</div>
226 </div> 226 </div>
227 <div class="grid itemsStart min-height-35" data-expected-width="40" data-exp ected-height="100"> 227 <div class="grid itemsStart min-height-35" data-expected-width="40" data-exp ected-height="100">
228 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX X X</div> 228 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX X X</div>
229 </div> 229 </div>
230 <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="0"> 230 <div class="grid itemsStart max-height-min-content" data-expected-width="40" data-expected-height="0">
231 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">X XXX XX</div> 231 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXX XX</div>
232 </div> 232 </div>
233 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="100"> 233 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="100">
234 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX X</div> 234 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX X</div>
235 </div> 235 </div>
236 </div> 236 </div>
237 237
238 <div class="fit-content min-height-50" style="height: 75px;"> 238 <div class="fit-content min-height-50" style="height: 75px;">
239 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="75"> 239 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="75">
240 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="75">XX X</div> 240 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
241 </div> 241 </div>
242 </div> 242 </div>
243 243
244 <div style="height: 25px;"> 244 <div style="height: 25px;">
245 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="25"> 245 <div class="grid itemsStart fit-content" data-expected-width="40" data-expec ted-height="25">
246 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div> 246 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
247 </div> 247 </div>
248 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="25"> 248 <div class="grid itemsStart fill-available" data-expected-width="40" data-ex pected-height="25">
249 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="25">XX X</div> 249 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
250 </div> 250 </div>
251 <div class="grid itemsStart fit-content min-height-35" data-expected-width=" 40" data-expected-height="35"> 251 <div class="grid itemsStart fit-content min-height-35" data-expected-width=" 40" data-expected-height="35">
252 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="35">XX X</div> 252 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
253 </div> 253 </div>
254 <div class="grid itemsStart fit-content max-height-min-content" data-expecte d-width="40" data-expected-height="0"> 254 <div class="grid itemsStart fit-content max-height-min-content" data-expecte d-width="40" data-expected-height="0">
255 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX X</div> 255 » <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>
256 </div> 256 </div>
257 </div> 257 </div>
258 258
259 </body> 259 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/PerformanceTests/Layout/nested-grid.html » ('j') | third_party/WebKit/PerformanceTests/Layout/nested-grid.html » ('J')

Powered by Google App Engine