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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/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: Applied last suggested changes. Created 5 years, 2 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | third_party/WebKit/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 86 matching lines...) Expand 10 before | Expand all | Expand 10 after
130 </div> 161 </div>
131 </div> 162 </div>
132 163
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
171 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
140 <div class="constrainedContainer"> 172 <div class="constrainedContainer">
141 <div class="grid gridTwoDoubleMaxFlexContent"> 173 <div class="grid gridTwoDoubleMaxFlexContent">
142 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 174 <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> 175 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
144 </div> 176 </div>
145 </div> 177 </div>
146 178
147 <!-- Allow the extra logical space distribution to occur. --> 179 <!-- Allow the extra logical space distribution to occur. -->
148 <div style="width: 10px; height: 60px"> 180 <div style="width: 10px; height: 60px">
149 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 181 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
150 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="12"></div> 182 <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> 183 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="48"></div>
152 </div> 184 </div>
153 </div> 185 </div>
154 186
187 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
155 <div style="width: 10px; height: 60px"> 188 <div style="width: 10px; height: 60px">
156 <div class="grid gridTwoDoubleMaxFlexContent"> 189 <div class="grid gridTwoDoubleMaxFlexContent">
157 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 190 <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> 191 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
159 </div> 192 </div>
160 </div> 193 </div>
161 194
162 <div style="width: 10px; height: 120px;"> 195 <div style="width: 10px; height: 120px;">
163 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> 196 <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
164 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="24"></div> 197 <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> 198 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="96"></div>
166 </div> 199 </div>
167 </div> 200 </div>
168 201
202 <!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
169 <div style="width: 10px; height: 120px;"> 203 <div style="width: 10px; height: 120px;">
170 <div class="grid gridTwoDoubleMaxFlexContent"> 204 <div class="grid gridTwoDoubleMaxFlexContent">
171 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="10"></div> 205 <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> 206 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="20"></div>
173 </div> 207 </div>
174 </div> 208 </div>
175 209
210 <!-- Flex track length must be at least its baseSize. -->
211 <div style="width: 10px; height: 100px;">
212 <div class="grid gridRespectBaseSize" style="height: 100%;">
213 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="75"></div>
214 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
215 </div>
216 </div>
217
218 <div style="width: 10px; height: 100px;">
219 <div class="grid gridRespectBaseSize">
220 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="75"></div>
221 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="150"></div>
222 </div>
223 </div>
224
225 <!-- Flex track lengths must be proportional to their flex factors.. -->
226 <div style="width: 10px; height: 275px;">
227 <div class="grid gridRespectProportions" style="height: 100%;">
228 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="25"></div>
229 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="50"></div>
230 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="200"></div>
231 </div>
232 </div>
233
234 <div style="width: 10px; height: 275px;">
235 <div class="grid gridRespectProportions">
236 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="25"></div>
237 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="13"></div>
238 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
239 </div>
240 </div>
241
242 <!-- Flex track lengths must be proportional but still respecting their base siz es. -->
243 <div style="width: 10px; height: 350px;">
244 <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
245 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
246 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>
247 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="200"></div>
248 </div>
249 </div>
250
251 <div style="width: 10px; height: 350px;">
252 <div class="grid gridRespectBaseSizeProportions">
253 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
254 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
255 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
256 </div>
257 </div>
258
259 <!-- Not enough space to respect proportions, because minTrackBreadh it's a hard er requirement -->
260 <div style="width: 10px; height: 275px;">
261 <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;" >
262 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
263 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="75"></div>
264 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="150"></div>
265 </div>
266 </div>
267
268 <div style="width: 10px; height: 275px;">
269 <div class="grid gridRespectBaseSizeBeforeProportions">
270 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
271 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="25"></div>
272 <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
273 </div>
274 </div>
275
176 </body> 276 </body>
177 </html> 277 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt ('k') | third_party/WebKit/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