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

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: Patch for landing 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') | no next file with comments »
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 h3 { font-size: 1em; }
59
60 </style>
61
62 <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>
63
64 <div class="floatLeft">
65 <h3>Only fit-content() and with fixed size tracks.</h3>
66 <div class="grid fc0">
67 <div class="item">XXX</div>
68 <div class="test autoRowFirstColumn"></div>
69 </div>
70
71 <div class="grid fc0x2">
72 <div class="item">XXX</div>
73 <div class="spanningItem">XXX</div>
74 <div class="test autoRowFirstColumn"></div>
75 <div class="test autoRowSecondColumn"></div>
76 </div>
77
78 <div class="grid fc40">
79 <div class="item">XXX XXX</div>
80 <div class="test autoRowFirstColumn"></div>
81 </div>
82
83 <div class="grid fc40x2">
84 <div class="spanningItem">XXX XXX</div>
85 <div class="test autoRowFirstColumn"></div>
86 <div class="test autoRowSecondColumn"></div>
87 </div>
88
89 <div class="grid fc40x2">
90 <div class="item">XXX XXX</div>
91 <div class="spanningItem">XXX XXX</div>
92 <div class="test autoRowFirstColumn"></div>
93 <div class="test autoRowSecondColumn"></div>
94 </div>
95
96 <div class="grid fc80">
97 <div class="item">XXX XXX XXX</div>
98 <div class="test autoRowFirstColumn"></div>
99 </div>
100
101 <div class="grid fc80x2">
102 <div class="spanningItem">XXX XXX XXX</div>
103 <div class="test autoRowFirstColumn"></div>
104 <div class="test autoRowSecondColumn"></div>
105 </div>
106
107 <div class="grid fc80x2">
108 <div class="item autoRowSecondColumn">XXX XXX XXX</div>
109 <div class="spanningItem">XXX XXX XXX</div>
110 <div class="test autoRowFirstColumn"></div>
111 <div class="test autoRowSecondColumn"></div>
112 </div>
113
114 <div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
115 <div class="spanningItem">XXX XX XXX</div>
116 <div class="test autoRowFirstColumn"></div>
117 <div class="test autoRowSecondColumn"></div>
118 </div>
119
120 <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-conte nt(40px);">
121 <div class="item">XXXXX</div>
122 <div class="spanningItem">XXX XX XXX</div>
123 <div class="test autoRowFirstColumn"></div>
124 <div class="test autoRowSecondColumn"></div>
125 </div>
126
127 <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10% , 200px);">
128 <div class="item autoRowSecondColumn">XXXXX</div>
129 <div class="spanningItem">XXX XX XXX</div>
130 <div class="test autoRowFirstColumn"></div>
131 <div class="test autoRowSecondColumn"></div>
132 </div>
133
134 </div>
135
136 <div class="floatLeft">
137 <h3>fit-content() with other content-sized tracks.</h3>
138 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
139 <div class="spanningItem">XXX XX XXX</div>
140 <div class="test autoRowFirstColumn"></div>
141 <div class="test autoRowSecondColumn"></div>
142 </div>
143
144 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
145 <div class="item">XXXXX</div>
146 <div class="spanningItem">XXX XX XXX</div>
147 <div class="test autoRowFirstColumn"></div>
148 <div class="test autoRowSecondColumn"></div>
149 </div>
150
151 <div class="grid" style="grid-template-columns: fit-content(40px) max-conten t;">
152 <div class="item autoRowSecondColumn">XXXXX</div>
153 <div class="spanningItem">XXX XX XXX</div>
154 <div class="test autoRowFirstColumn"></div>
155 <div class="test autoRowSecondColumn"></div>
156 </div>
157
158 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
159 <div class="spanningItem">XXX XX XXX</div>
160 <div class="test autoRowFirstColumn"></div>
161 <div class="test autoRowSecondColumn"></div>
162 </div>
163
164 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
165 <div class="item">XXXXX</div>
166 <div class="spanningItem">XXX XX XXX</div>
167 <div class="test autoRowFirstColumn"></div>
168 <div class="test autoRowSecondColumn"></div>
169 </div>
170
171 <div class="grid" style="grid-template-columns: min-content fit-content(40px );">
172 <div class="item autoRowSecondColumn">XXXXX</div>
173 <div class="spanningItem">XXX XX XXX</div>
174 <div class="test autoRowFirstColumn"></div>
175 <div class="test autoRowSecondColumn"></div>
176 </div>
177
178 <div class="grid" style="grid-template-columns: fit-content(30px) min-conten t max-content">
179 <div class="spanningItem">XXX XX XXX</div>
180 <div class="test autoRowFirstColumn"></div>
181 <div class="test autoRowSecondColumn"></div>
182 <div class="test autoRowThirdColumn"></div>
183 </div>
184
185 <div class="grid" style="grid-template-columns: min-content fit-content(30px ) max-content">
186 <div class="spanningItem">XXX XX XXX</div>
187 <div class="test autoRowFirstColumn"></div>
188 <div class="test autoRowSecondColumn"></div>
189 <div class="test autoRowThirdColumn"></div>
190 </div>
191
192 <div class="grid" style="grid-template-columns: min-content max-content fit- content(30px)">
193 <div class="spanningItem">XXX XX XXX</div>
194 <div class="test autoRowFirstColumn"></div>
195 <div class="test autoRowSecondColumn"></div>
196 <div class="test autoRowThirdColumn"></div>
197 </div>
198
199 <div class="grid" style="grid-template-columns: fit-content(30px) min-conten t max-content">
200 <div class="item" style="grid-column: 1">XXX XX</div>
201 <div class="spanningItem">XXX XX XXX</div>
202 <div class="test autoRowFirstColumn"></div>
203 <div class="test autoRowSecondColumn"></div>
204 <div class="test autoRowThirdColumn"></div>
205 </div>
206
207 <div class="grid" style="grid-template-columns: min-content fit-content(30px ) max-content">
208 <div class="item" style="grid-column: 1">XXX XX</div>
209 <div class="spanningItem">XXX XX XXX</div>
210 <div class="test autoRowFirstColumn"></div>
211 <div class="test autoRowSecondColumn"></div>
212 <div class="test autoRowThirdColumn"></div>
213 </div>
214
215 <div class="grid" style="grid-template-columns: min-content max-content fit- content(30px)">
216 <div class="item" style="grid-column: 2">XXX XX</div>
217 <div class="spanningItem">XXX XX XXX</div>
218 <div class="test autoRowFirstColumn"></div>
219 <div class="test autoRowSecondColumn"></div>
220 <div class="test autoRowThirdColumn"></div>
221 </div>
222 </div>
223
224 <div class="floatLeft">
225 <h3>fit-content() with percentage arguments.</h3>
226 <div class="grid fc0p">
227 <div class="item">XXX</div>
228 <div class="test autoRowFirstColumn"></div>
229 </div>
230
231 <div class="grid fc0px2">
232 <div class="item">XXX</div>
233 <div class="spanningItem">XXX</div>
234 <div class="test autoRowFirstColumn"></div>
235 <div class="test autoRowSecondColumn"></div>
236 </div>
237
238 <div class="grid fc30p">
239 <div class="item">XX XX</div>
240 <div class="test autoRowFirstColumn"></div>
241 </div>
242
243 <div class="grid fc30px2">
244 <div class="spanningItem">XXX XXX</div>
245 <div class="test autoRowFirstColumn"></div>
246 <div class="test autoRowSecondColumn"></div>
247 </div>
248
249 <div class="grid fc30px2">
250 <div class="item autoRowSecondColumn">X X X</div>
251 <div class="spanningItem">XXX XXX</div>
252 <div class="test autoRowFirstColumn"></div>
253 <div class="test autoRowSecondColumn"></div>
254 </div>
255
256 <div class="grid fc90p">
257 <div class="item">XXX XXX XXX</div>
258 <div class="test autoRowFirstColumn"></div>
259 </div>
260
261 <div class="grid fc90px2">
262 <div class="spanningItem">XXX XXX XXX</div>
263 <div class="test autoRowFirstColumn"></div>
264 <div class="test autoRowSecondColumn"></div>
265 </div>
266
267 <div class="grid fc90px2">
268 <div class="item autoRowSecondColumn">XXX XXX XXX</div>
269 <div class="spanningItem">XXX XXX XXX</div>
270 <div class="test autoRowFirstColumn"></div>
271 <div class="test autoRowSecondColumn"></div>
272 </div>
273 </div>
274
275 <div class="floatLeft">
276 <h3>max-content < fit-content() argument.</h3>
277
278 <div class="grid fc110">
279 <div class="item">XXX XXX</div>
280 <div class="test autoRowFirstColumn"></div>
281 </div>
282
283 <div class="grid fc110x2">
284 <div class="spanningItem">XXX XXX</div>
285 <div class="test autoRowFirstColumn"></div>
286 <div class="test autoRowSecondColumn"></div>
287 </div>
288
289 <div class="grid fc110x2">
290 <div class="item">XXX XXX</div>
291 <div class="spanningItem">XXX XXX</div>
292 <div class="test autoRowFirstColumn"></div>
293 <div class="test autoRowSecondColumn"></div>
294 </div>
295
296 <div class="grid" style="grid-template-columns: fit-content(110px) fit-conte nt(40px);">
297 <div class="spanningItem">XXX XXX</div>
298 <div class="test autoRowFirstColumn"></div>
299 <div class="test autoRowSecondColumn"></div>
300 </div>
301
302 <div class="grid" style="grid-template-columns: fit-content(110px) fit-conte nt(40px);">
303 <div class="item autoRowSecondColumn">XX</div>
304 <div class="spanningItem">XXX XXX</div>
305 <div class="test autoRowFirstColumn"></div>
306 <div class="test autoRowSecondColumn"></div>
307 </div>
308
309 <div class="grid" style="grid-template-columns: max-content fit-content(110p x);">
310 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
311 <div class="spanningItem">XXX XXX</div>
312 <div class="test autoRowFirstColumn"></div>
313 <div class="test autoRowSecondColumn"></div>
314 </div>
315
316 <div class="grid" style="grid-template-columns: fit-content(110px) min-conte nt;">
317 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
318 <div class="spanningItem">XXX XXX</div>
319 <div class="test autoRowFirstColumn"></div>
320 <div class="test autoRowSecondColumn"></div>
321 </div>
322
323 <div class="grid" style="grid-template-columns: max-content fit-content(110p x) max-content;">
324 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
325 <div class="spanningItem">XXX XXX</div>
326 <div class="test autoRowFirstColumn"></div>
327 <div class="test autoRowSecondColumn"></div>
328 <div class="test autoRowThirdColumn"></div>
329 </div>
330
331 <div class="grid" style="grid-template-columns: min-content fit-content(110p x) min-content;">
332 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
333 <div class="spanningItem">XXX XXX</div>
334 <div class="test autoRowFirstColumn"></div>
335 <div class="test autoRowSecondColumn"></div>
336 <div class="test autoRowThirdColumn"></div>
337 </div>
338
339 <div class="grid" style="grid-template-columns: auto fit-content(110px) auto ;">
340 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
341 <div class="spanningItem">XXX XXX</div>
342 <div class="test autoRowFirstColumn"></div>
343 <div class="test autoRowSecondColumn"></div>
344 <div class="test autoRowThirdColumn"></div>
345 </div>
346
347 </div>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698