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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.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-and-minmax-content-resolution-rows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-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: minmax(1fr, 50px); 6 grid-template-columns: minmax(1fr, 50px);
7 grid-template-rows: 50px; 7 grid-template-rows: 50px;
8 } 8 }
9 .gridZeroFlexContent {
10 grid-template-columns: minmax(1fr, 0px);
11 grid-template-rows: 50px;
12 }
9 .gridMaxFlexContent { 13 .gridMaxFlexContent {
10 grid-template-columns: minmax(30px, 2fr); 14 grid-template-columns: minmax(30px, 2fr);
11 grid-template-rows: 50px; 15 grid-template-rows: 50px;
12 } 16 }
13 .gridTwoMaxFlexContent { 17 .gridTwoMaxFlexContent {
14 grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr); 18 grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
15 grid-template-rows: 50px; 19 grid-template-rows: 50px;
16 } 20 }
17 .gridTwoDoubleMaxFlexContent { 21 .gridTwoDoubleMaxFlexContent {
18 grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr); 22 grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
19 grid-template-rows: 50px; 23 grid-template-rows: 50px;
20 } 24 }
21 .gridIgnoreSecondGridItem { 25 .gridIgnoreSecondGridItem {
22 grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr); 26 grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
23 grid-template-rows: 50px; 27 grid-template-rows: 50px;
24 } 28 }
29 .gridRespectBaseSize {
30 grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
31 grid-template-rows: 50px;
32 }
33 .gridRespectProportions {
34 grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr) ;
35 grid-template-rows: 50px;
36 }
37 .gridRespectBaseSizeProportions {
38 grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr );
39 grid-template-rows: 50px;
40 }
41 .gridRespectBaseSizeBeforeProportions {
42 grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr );
43 grid-template-rows: 50px;
44 }
45 .firstRowThirdColumn {
46 background-color: yellow;
47 grid-column: 3;
48 grid-row: 1;
49 }
25 </style> 50 </style>
26 <script src="../../resources/check-layout.js"></script> 51 <script src="../../resources/check-layout.js"></script>
27 <body onload="checkLayout('.grid');"> 52 <body onload="checkLayout('.grid');">
28 53
29 <p>Test that resolving auto tracks on grid items works properly.</p> 54 <p>Test that resolving auto tracks on grid items works properly.</p>
30 55
31 <div style="width: 0px"> 56 <div style="width: 0px">
32 <div class="grid gridMinFlexContent"> 57 <div class="grid gridMinFlexContent">
33 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div> 58 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
34 </div> 59 </div>
35 </div> 60 </div>
36 61
62 <div style="width: 100px">
63 <div class="grid gridZeroFlexContent">
64 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
65 </div>
66 </div>
67
37 <!-- Allow the extra logical space distribution to occur. --> 68 <!-- Allow the extra logical space distribution to occur. -->
38 <div style="width: 40px; height: 10px"> 69 <div style="width: 40px; height: 10px">
39 <div class="grid gridMinFlexContent"> 70 <div class="grid gridMinFlexContent">
40 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40 " data-expected-height="50"></div> 71 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40 " data-expected-height="50"></div>
41 </div> 72 </div>
42 </div> 73 </div>
43 74
44 <div style="width: 100px; height: 10px;"> 75 <div style="width: 100px; height: 10px;">
45 <div class="grid gridMinFlexContent"> 76 <div class="grid gridMinFlexContent">
46 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div> 77 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
114 145
115 146
116 <!-- Custom test for a corner case. --> 147 <!-- Custom test for a corner case. -->
117 <div style="width: 570px; height: 10px;"> 148 <div style="width: 570px; height: 10px;">
118 <div class="grid gridIgnoreSecondGridItem"> 149 <div class="grid gridIgnoreSecondGridItem">
119 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="42 0" data-expected-height="50"></div> 150 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="42 0" data-expected-height="50"></div>
120 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 50" data-expected-height="50"></div> 151 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 50" data-expected-height="50"></div>
121 </div> 152 </div>
122 </div> 153 </div>
123 154
155 <!-- Flex track length must be at least its baseSize. -->
156 <div style="width: 100px; height: 10px;">
157 <div class="grid gridRespectBaseSize">
158 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75 " data-expected-height="50"></div>
159 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="2 5" data-expected-height="50"></div>
160 </div>
161 </div>
162
163 <!-- Flex track lengths must be proportional to their flex factors.. -->
164 <div style="width: 275px; height: 10px;">
165 <div class="grid gridRespectProportions">
166 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25 " data-expected-height="50"></div>
167 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="5 0" data-expected-height="50"></div>
168 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="20 0" data-expected-height="50"></div>
169 </div>
170 </div>
171
172 <!-- Flex track lengths must be proportional but still respecting their base siz es. -->
173 <div style="width: 350px; height: 10px;">
174 <div class="grid gridRespectBaseSizeProportions">
175 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
176 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 00" data-expected-height="50"></div>
177 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="20 0" data-expected-height="50"></div>
178 </div>
179 </div>
180
181 <!-- Not enough space to respect proportions, because minTrackBreadh it's a hard er requirement -->
182 <div style="width: 275px; height: 10px;">
183 <div class="grid gridRespectBaseSizeBeforeProportions">
184 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>
185 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="7 5" data-expected-height="50"></div>
186 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="15 0" data-expected-height="50"></div>
187 </div>
188 </div>
189
124 </body> 190 </body>
125 </html> 191 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698