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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns.html

Issue 2287113004: [css-grid] Implement fit-content track size (Closed)
Patch Set: Created 4 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <style>
4 .grid {
5 justify-content: start;
6 width: 100px;
7 position: relative;
8 padding-top: 10px;
9 margin-bottom: 5px;
10 grid-column-gap: 5px;
11 }
12
13 .fc0 { grid-template-columns: fit-content(0px);}
14 .fc40 { grid-template-columns: fit-content(40px); }
15 .fc80 { grid-template-columns: fit-content(80px); }
16 .fc110 { grid-template-columns: fit-content(110px); }
17
18 .fc0x2 { grid-template-columns: repeat(2, fit-content(0px));}
19 .fc40x2 { grid-template-columns: repeat(2, fit-content(40px)); }
20 .fc80x2 { grid-template-columns: repeat(2, fit-content(80px)); }
21 .fc110x2 { grid-template-columns: repeat(2, fit-content(110px)); }
22
23 .fc0p { grid-template-columns: fit-content(0%); }
24 .fc30p { grid-template-columns: fit-content(30%); }
25 .fc90p { grid-template-columns: fit-content(90%); }
26 .fc110p { grid-template-columns: fit-content(110%); }
27
28 .fc0px2 { grid-template-columns: repeat(2, fit-content(0%)); }
29 .fc30px2 { grid-template-columns: repeat(2, fit-content(30%)); }
30 .fc90px2 { grid-template-columns: repeat(2, fit-content(90%)); }
31 .fc110px2 { grid-template-columns: repeat(2, fit-content(110%)); }
32
33 .item {
34 font: 10px/1 Ahem;
35 background: cyan;
36 }
37
38 .spanningItem {
39 font: 10px/1 Ahem;
40 grid-column: 1 / -1;
41 grid-row: 2;
42 background: salmon;
43 }
44
45 .test {
46 position: absolute;
47 left: 0; right: 0; top: 0;
48 height: 5px;
49 background: purple;
50 }
51 .test:nth-child(2n) { background: orange; }
52
53 .floatLeft {
54 float: left;
55 width: 190px;
56 }
57
58 .firstColumn { grid-column: 1 / 2; }
59 .secondColumn { grid-column: 2 / 3; }
60 .thirdColumn { grid-column: 3 / 4; }
Manuel Rego 2016/08/31 07:24:29 You can use "autoRowFirstColumn", "autoRowSecondCo
svillar 2016/08/31 09:50:04 Acknowledged.
61
62 h3 { font-size: 1em; }
63
64 </style>
65
66 <p>This test checks that 'fit-content()' works as expected, i.e., it's similar t o 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped a t the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
67
68 <div class="floatLeft">
69 <h3>Only fit-content() and with fixed size tracks.</h3>
70 <div class="grid fc0">
71 <div class="item">XXX</div>
72 <div class="test firstColumn"></div>
73 </div>
74
75 <div class="grid fc0x2">
76 <div class="item">XXX</div>
77 <div class="spanningItem">XXX</div>
78 <div class="test firstColumn"></div>
79 <div class="test secondColumn"></div>
80 </div>
81
82 <div class="grid fc40">
83 <div class="item">XXX XXX</div>
84 <div class="test firstColumn"></div>
85 </div>
86
87 <div class="grid fc40x2">
88 <div class="spanningItem">XXX XXX</div>
89 <div class="test firstColumn"></div>
90 <div class="test secondColumn"></div>
91 </div>
92
93 <div class="grid fc40x2">
94 <div class="item">XXX XXX</div>
95 <div class="spanningItem">XXX XXX</div>
96 <div class="test firstColumn"></div>
97 <div class="test secondColumn"></div>
98 </div>
99
100 <div class="grid fc80">
101 <div class="item">XXX XXX XXX</div>
102 <div class="test firstColumn"></div>
103 </div>
104
105 <div class="grid fc80x2">
106 <div class="spanningItem">XXX XXX XXX</div>
107 <div class="test firstColumn"></div>
108 <div class="test secondColumn"></div>
109 </div>
110
111 <div class="grid fc80x2">
112 <div class="item secondColumn">XXX XXX XXX</div>
113 <div class="spanningItem">XXX XXX XXX</div>
114 <div class="test firstColumn"></div>
115 <div class="test secondColumn"></div>
116 </div>
117
118 <div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
119 <div class="spanningItem">XXX XX XXX</div>
120 <div class="test firstColumn"></div>
121 <div class="test secondColumn"></div>
122 </div>
123
124 <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-conte nt(40px);">
125 <div class="item">XXXXX</div>
126 <div class="spanningItem">XXX XX XXX</div>
127 <div class="test firstColumn"></div>
128 <div class="test secondColumn"></div>
129 </div>
130
131 <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10% , 200px);">
132 <div class="item secondColumn">XXXXX</div>
133 <div class="spanningItem">XXX XX XXX</div>
134 <div class="test firstColumn"></div>
135 <div class="test secondColumn"></div>
136 </div>
137
138 </div>
139
140 <div class="floatLeft">
141 <h3>fit-content() with other content-sized tracks.</h3>
142 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
143 <div class="spanningItem">XXX XX XXX</div>
144 <div class="test firstColumn"></div>
145 <div class="test secondColumn"></div>
146 </div>
147
148 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
149 <div class="item">XXXXX</div>
150 <div class="spanningItem">XXX XX XXX</div>
151 <div class="test firstColumn"></div>
152 <div class="test secondColumn"></div>
153 </div>
154
155 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
156 <div class="item secondColumn">XXXXX</div>
157 <div class="spanningItem">XXX XX XXX</div>
158 <div class="test firstColumn"></div>
159 <div class="test secondColumn"></div>
160 </div>
161
162 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
163 <div class="spanningItem">XXX XX XXX</div>
164 <div class="test firstColumn"></div>
165 <div class="test secondColumn"></div>
166 </div>
167
168 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
169 <div class="item">XXXXX</div>
170 <div class="spanningItem">XXX XX XXX</div>
171 <div class="test firstColumn"></div>
172 <div class="test secondColumn"></div>
173 </div>
174
175 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
176 <div class="item secondColumn">XXXXX</div>
177 <div class="spanningItem">XXX XX XXX</div>
178 <div class="test firstColumn"></div>
179 <div class="test secondColumn"></div>
180 </div>
181
182 <div class="grid" style="grid-template-columns: fit-content(30px) min-conten t max-content">
183 <div class="spanningItem">XXX XX XXX</div>
184 <div class="test firstColumn"></div>
185 <div class="test secondColumn"></div>
186 <div class="test thirdColumn"></div>
187 </div>
188
189 <div class="grid" style="grid-template-columns: min-content fit-content(30px ) max-content">
190 <div class="spanningItem">XXX XX XXX</div>
191 <div class="test firstColumn"></div>
192 <div class="test secondColumn"></div>
193 <div class="test thirdColumn"></div>
194 </div>
195
196 <div class="grid" style="grid-template-columns: min-content max-content fit- content(30px)">
197 <div class="spanningItem">XXX XX XXX</div>
198 <div class="test firstColumn"></div>
199 <div class="test secondColumn"></div>
200 <div class="test thirdColumn"></div>
201 </div>
202
203 <div class="grid" style="grid-template-columns: fit-content(30px) min-conten t max-content">
204 <div class="item" style="grid-column: 1">XXX XX</div>
205 <div class="spanningItem">XXX XX XXX</div>
206 <div class="test firstColumn"></div>
207 <div class="test secondColumn"></div>
208 <div class="test thirdColumn"></div>
209 </div>
210
211 <div class="grid" style="grid-template-columns: min-content fit-content(30px ) max-content">
212 <div class="item" style="grid-column: 1">XXX XX</div>
213 <div class="spanningItem">XXX XX XXX</div>
214 <div class="test firstColumn"></div>
215 <div class="test secondColumn"></div>
216 <div class="test thirdColumn"></div>
217 </div>
218
219 <div class="grid" style="grid-template-columns: min-content max-content fit- content(30px)">
220 <div class="item" style="grid-column: 2">XXX XX</div>
221 <div class="spanningItem">XXX XX XXX</div>
222 <div class="test firstColumn"></div>
223 <div class="test secondColumn"></div>
224 <div class="test thirdColumn"></div>
225 </div>
226 </div>
227
228 <div class="floatLeft">
229 <h3>fit-content() with percentage arguments.</h3>
230 <div class="grid fc0p">
231 <div class="item">XXX</div>
232 <div class="test firstColumn"></div>
233 </div>
234
235 <div class="grid fc0px2">
236 <div class="item">XXX</div>
237 <div class="spanningItem">XXX</div>
238 <div class="test firstColumn"></div>
239 <div class="test secondColumn"></div>
240 </div>
241
242 <div class="grid fc30p">
243 <div class="item">XX XX</div>
244 <div class="test firstColumn"></div>
245 </div>
246
247 <div class="grid fc30px2">
248 <div class="spanningItem">XXX XXX</div>
249 <div class="test firstColumn"></div>
250 <div class="test secondColumn"></div>
251 </div>
252
253 <div class="grid fc30px2">
254 <div class="item secondColumn">X X X</div>
255 <div class="spanningItem">XXX XXX</div>
256 <div class="test firstColumn"></div>
257 <div class="test secondColumn"></div>
258 </div>
259
260 <div class="grid fc90p">
261 <div class="item">XXX XXX XXX</div>
262 <div class="test firstColumn"></div>
263 </div>
264
265 <div class="grid fc90px2">
266 <div class="spanningItem">XXX XXX XXX</div>
267 <div class="test firstColumn"></div>
268 <div class="test secondColumn"></div>
269 </div>
270
271 <div class="grid fc90px2">
272 <div class="item secondColumn">XXX XXX XXX</div>
273 <div class="spanningItem">XXX XXX XXX</div>
274 <div class="test firstColumn"></div>
275 <div class="test secondColumn"></div>
276 </div>
277 </div>
278
279 <div class="floatLeft">
280 <h3>max-content < fit-content() argument.</h3>
281
282 <div class="grid fc110">
283 <div class="item">XXX XXX</div>
284 <div class="test firstColumn"></div>
285 </div>
286
287 <div class="grid fc110x2">
288 <div class="spanningItem">XXX XXX</div>
289 <div class="test firstColumn"></div>
290 <div class="test secondColumn"></div>
291 </div>
292
293 <div class="grid fc110x2">
294 <div class="item">XXX XXX</div>
295 <div class="spanningItem">XXX XXX</div>
296 <div class="test firstColumn"></div>
297 <div class="test secondColumn"></div>
298 </div>
299
300 <div class="grid" style="grid-template-columns: fit-content(110px) fit-conte nt(40px);">
301 <div class="spanningItem">XXX XXX</div>
302 <div class="test firstColumn"></div>
303 <div class="test secondColumn"></div>
304 </div>
305
306 <div class="grid" style="grid-template-columns: fit-content(110px) fit-conte nt(40px);">
307 <div class="item secondColumn">XX</div>
308 <div class="spanningItem">XXX XXX</div>
309 <div class="test firstColumn"></div>
310 <div class="test secondColumn"></div>
311 </div>
312
313 <div class="grid" style="grid-template-columns: max-content fit-content(110p x);">
314 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
315 <div class="spanningItem">XXX XXX</div>
316 <div class="test firstColumn"></div>
317 <div class="test secondColumn"></div>
318 </div>
319
320 <div class="grid" style="grid-template-columns: fit-content(110px) min-conte nt;">
321 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
322 <div class="spanningItem">XXX XXX</div>
323 <div class="test firstColumn"></div>
324 <div class="test secondColumn"></div>
325 </div>
326
327 <div class="grid" style="grid-template-columns: max-content fit-content(110p x) max-content;">
328 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
329 <div class="spanningItem">XXX XXX</div>
330 <div class="test firstColumn"></div>
331 <div class="test secondColumn"></div>
332 <div class="test thirdColumn"></div>
333 </div>
334
335 <div class="grid" style="grid-template-columns: min-content fit-content(110p x) min-content;">
336 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
337 <div class="spanningItem">XXX XXX</div>
338 <div class="test firstColumn"></div>
339 <div class="test secondColumn"></div>
340 <div class="test thirdColumn"></div>
341 </div>
342
343 <div class="grid" style="grid-template-columns: auto fit-content(110px) auto ;">
344 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
345 <div class="spanningItem">XXX XXX</div>
346 <div class="test firstColumn"></div>
347 <div class="test secondColumn"></div>
348 <div class="test thirdColumn"></div>
349 </div>
350
351 </div>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698