Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(146)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html

Issue 1323053004: [CSS Grid Layout] Flex tracks sizing alg must handle 0fr values (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Function normalizedFlexFraction moved Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html ('K') | « LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .gridMinFlexContent { 5 .gridMinFlexContent {
6 grid-template-columns: 50px; 6 grid-template-columns: 50px;
7 grid-template-rows: minmax(1fr, 50px); 7 grid-template-rows: minmax(1fr, 50px);
8 } 8 }
9 .gridZeroFlexContent {
10 grid-template-columns: 50px;
11 grid-template-rows: minmax(1fr, 0px);
12 }
9 .gridMaxFlexContent { 13 .gridMaxFlexContent {
10 grid-template-columns: 50px; 14 grid-template-columns: 50px;
11 grid-template-rows: minmax(30px, 2fr); 15 grid-template-rows: minmax(30px, 2fr);
12 } 16 }
13 .gridTwoMaxFlexContent { 17 .gridTwoMaxFlexContent {
14 grid-template-columns: 50px; 18 grid-template-columns: 50px;
15 grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr); 19 grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
16 } 20 }
17 .gridTwoDoubleMaxFlexContent { 21 .gridTwoDoubleMaxFlexContent {
18 grid-template-columns: 50px; 22 grid-template-columns: 50px;
19 grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr); 23 grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
20 } 24 }
25 .gridRespectBaseSize {
26 grid-template-columns: 50px;
27 grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
28 }
29 .gridRespectProportions {
30 grid-template-columns: 50px;
31 grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
32 }
33 .gridRespectBaseSizeProportions {
34 grid-template-columns: 50px;
35 grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
36 }
37 .gridRespectBaseSizeBeforeProportions {
38 grid-template-columns: 50px;
39 grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
40 }
41 .thirdRowFirstColumn {
42 background-color: yellow;
43 grid-column: 1;
44 grid-row: 3;
45 }
21 </style> 46 </style>
22 <script src="../../resources/check-layout.js"></script> 47 <script src="../../resources/check-layout.js"></script>
23 <body onload="checkLayout('.grid');"> 48 <body onload="checkLayout('.grid');">
24 49
25 <p>Test that resolving auto tracks on grid items works properly.</p> 50 <p>Test that resolving auto tracks on grid items works properly.</p>
26 51
27 <div style="height: 0px"> 52 <div style="height: 0px">
28 <div class="grid gridMinFlexContent" style="height: 100%"> 53 <div class="grid gridMinFlexContent" style="height: 100%">
29 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="0"></div> 54 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="0"></div>
30 </div> 55 </div>
31 </div> 56 </div>
32 57
33 <div style="height: 0px"> 58 <div style="height: 0px">
59 <div class="grid gridZeroFlexContent">
60 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="0"></div>
61 </div>
62 </div>
63
64 <div style="height: 0px">
34 <div class="grid gridMinFlexContent"> 65 <div class="grid gridMinFlexContent">
35 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div> 66 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
36 </div> 67 </div>
37 </div> 68 </div>
38 69
39 <!-- Allow the extra logical space distribution to occur. --> 70 <!-- Allow the extra logical space distribution to occur. -->
40 <div style="width: 10px; height: 40px"> 71 <div style="width: 10px; height: 40px">
41 <div class="grid gridMinFlexContent" style="height: 100%"> 72 <div class="grid gridMinFlexContent" style="height: 100%">
42 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="40"></div> 73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="40"></div>
43 </div> 74 </div>
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after
133 <div class="constrainedContainer"> 164 <div class="constrainedContainer">
134 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 165 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
135 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 166 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div>
136 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="10"></div> 167 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="10"></div>
137 </div> 168 </div>
138 </div> 169 </div>
139 170
140 <div class="constrainedContainer"> 171 <div class="constrainedContainer">
141 <div class="grid gridTwoDoubleMaxFlexContent"> 172 <div class="grid gridTwoDoubleMaxFlexContent">
142 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 173 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div>
143 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="40"></div> 174 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Shouldn't it be x4 the one in first row?
jfernandez 2015/09/09 09:23:22 Already replied in the other test.
144 </div> 175 </div>
145 </div> 176 </div>
146 177
147 <!-- Allow the extra logical space distribution to occur. --> 178 <!-- Allow the extra logical space distribution to occur. -->
148 <div style="width: 10px; height: 60px"> 179 <div style="width: 10px; height: 60px">
149 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 180 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
150 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="12"></div> 181 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="12"></div>
151 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="48"></div> 182 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="48"></div>
152 </div> 183 </div>
153 </div> 184 </div>
154 185
155 <div style="width: 10px; height: 60px"> 186 <div style="width: 10px; height: 60px">
156 <div class="grid gridTwoDoubleMaxFlexContent"> 187 <div class="grid gridTwoDoubleMaxFlexContent">
157 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 188 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div>
158 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="40"></div> 189 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Ditto.
jfernandez 2015/09/09 09:23:22 Same answer.
159 </div> 190 </div>
160 </div> 191 </div>
161 192
162 <div style="width: 10px; height: 120px;"> 193 <div style="width: 10px; height: 120px;">
163 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 194 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
164 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="24"></div> 195 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="24"></div>
165 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="96"></div> 196 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="96"></div>
166 </div> 197 </div>
167 </div> 198 </div>
168 199
169 <div style="width: 10px; height: 120px;"> 200 <div style="width: 10px; height: 120px;">
170 <div class="grid gridTwoDoubleMaxFlexContent"> 201 <div class="grid gridTwoDoubleMaxFlexContent">
171 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 202 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div>
172 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="40"></div> 203 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
svillar 2015/09/08 13:27:07 Ditto.
jfernandez 2015/09/09 09:23:22 Same answer.
173 </div> 204 </div>
174 </div> 205 </div>
175 206
207 <!-- Flex track length must be at least its baseSize. -->
208 <div style="width: 10px; height: 100px;">
209 <div class="grid gridRespectBaseSize" style="height: 100%;">
210 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="75"></div>
211 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
212 </div>
213 </div>
214
215 <div style="width: 10px; height: 100px;">
216 <div class="grid gridRespectBaseSize">
217 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="75"></div>
218 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="150"></div>
219 </div>
220 </div>
221
222 <!-- Flex track lengths must be proportional to their flex factors.. -->
223 <div style="width: 10px; height: 275px;">
224 <div class="grid gridRespectProportions" style="height: 100%;">
225 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="25"></div>
226 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="50"></div>
227 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="200"></div>
228 </div>
229 </div>
230
231 <div style="width: 10px; height: 275px;">
232 <div class="grid gridRespectProportions">
233 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="25"></div>
234 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="13"></div>
235 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
236 </div>
237 </div>
238
239 <!-- Flex track lengths must be proportional but still respecting their base siz es. -->
240 <div style="width: 10px; height: 350px;">
241 <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
242 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
243 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>
244 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="200"></div>
245 </div>
246 </div>
247
248 <div style="width: 10px; height: 350px;">
249 <div class="grid gridRespectBaseSizeProportions">
250 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
251 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
252 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
253 </div>
254 </div>
255
256 <!-- Not enough space to repsect proportions, because minTrackBreadh it's a hard er requirement -->
svillar 2015/09/08 13:27:07 Nit: respect
jfernandez 2015/09/09 09:23:22 Done.
257 <div style="width: 10px; height: 275px;">
258 <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;" >
259 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
260 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="75"></div>
261 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="150"></div>
262 </div>
263 </div>
264
265 <div style="width: 10px; height: 275px;">
266 <div class="grid gridRespectBaseSizeBeforeProportions">
267 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
268 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
269 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
270 </div>
271 </div>
272
176 </body> 273 </body>
177 </html> 274 </html>
OLDNEW
« LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html ('K') | « LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698