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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html

Issue 1895443002: [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing Created 4 years, 7 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/mozilla/grid-repeat-auto-fill-fit-004-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-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 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <html><head>
7 <meta charset="utf-8">
8 <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh ow_bug.cgi?id=1118820">
10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f ill">
11 <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
12 <style type="text/css">
13 html,body {
14 color:black; background-color:white; font-size:16px;
15 }
16
17 .grid {
18 display: grid;
19 float: left;
20 position: relative;
21 border: 2px solid;
22 grid-auto-columns: 10px;
23 grid-auto-rows: 10px;
24 grid-auto-flow: column;
25 grid-gap: 2px;
26 margin-right: 2px;
27 padding-top: 3px;
28 padding-bottom: 2px;
29 }
30
31 .r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
32 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
33 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
34 .r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
35 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
36 .r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f ]; }
37 .ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] auto [f]; }
38
39 fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
40 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
41 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
42 fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
43 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30 px [f]; }
44 fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
45 fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] au to [f]; }
46
47 .w100 { height: 100px; }
48 .w3 { height: 3px; }
49 .w20 { height: 20px; }
50 .w50 { height: 50px; }
51 .w80 { height: 80px; }
52 .mw100 { min-height: 100px; }
53 .mw3 { height: 3px; }
54 .mw20 { height: 20px; }
55 .mw50 { min-height: 50px; }
56 .mw80 { min-height: 80px; }
57 .xw100 { max-height: 100px; }
58 .xw3 { height: 3px; }
59 .xw20 { height: 20px; }
60 .xw50 { max-height: 50px; }
61 .xw80 { max-height: 80px; }
62
63 .w { width:10px}
64
65 x {
66 height: 10px;
67 background: grey;
68 }
69 a {
70 position: absolute;
71 left:0; top:0; bottom:0; width: 3px;
72 background: black;
73 grid-row: c / c -1;
74 }
75 b {
76 position: absolute;
77 right:0; top:0; bottom:0; width: 3px;
78 background: brown;
79 grid-row: auto / c -1;
80 }
81
82 x:first-child {
83 background: lime;
84 }
85 x:last-child {
86 background: blue;
87 }
88
89 fill,fit {
90 float: left;
91 height: 400px;
92 }
93 </style>
94 </head>
95 <body>
96
97 <fill>
98
99 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
100 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
101 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
102 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
103 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
104 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
105 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
106 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
107 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
108 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
109 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
110 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
111
112 <br clear="all">
113 <br clear="all">
114
115 <div class="grid r1 w w20"><a></a><b></b></div>
116 <div class="grid r1 w w3"><a></a><b></b></div>
117 <div class="grid r1 w xw20"><a></a><b></b></div>
118 <div class="grid r1 w xw3"><a></a><b></b></div>
119 <div class="grid r1 w mw20"><a></a><b></b></div>
120 <div class="grid r1 w mw3"><a></a><b></b></div>
121 <div class="grid r1 w w20 xw3"><a></a><b></b></div>
122 <div class="grid r1 w w3 mw20"><a></a><b></b></div>
123 <div class="grid r1 w w3 mw3"><a></a><b></b></div>
124 <div class="grid r1 w xw20"><a></a><b></b></div>
125 <div class="grid r1 w xw3 mw20"><a></a><b></b></div>
126 <div class="grid r1 w mw20"><a></a><b></b></div>
127
128 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
129 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
130 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b> <x></x></div>
131 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
132 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
133 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
134
135 <div class="grid w r1" style="min-height:0"><a></a><b></b></div>
136 <div class="grid w r1" style="height:0"><a></a><b></b></div>
137 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
138 <div class="grid w r1" style="max-height:0"><a></a><b></b></div>
139 <div class="grid w r0"><a></a><b></b></div>
140 <div class="grid w ra"><a></a><b></b></div>
141
142 <br clear="all">
143 <br clear="all">
144
145 <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
146 <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
147 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
148 <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
149 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
150 <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
151 <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
152 <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
153 <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
154 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
155 <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
156 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
157
158 <br clear="all">
159 <br clear="all">
160
161 <div class="grid r2 w w20"><a></a><b></b></div>
162 <div class="grid r2 w w3"><a></a><b></b></div>
163 <div class="grid r2 w xw20"><a></a><b></b></div>
164 <div class="grid r2 w xw3"><a></a><b></b></div>
165 <div class="grid r2 w mw20"><a></a><b></b></div>
166 <div class="grid r2 w mw3"><a></a><b></b></div>
167 <div class="grid r2 w w20 xw3"><a></a><b></b></div>
168 <div class="grid r2 w w3 mw20"><a></a><b></b></div>
169 <div class="grid r2 w w3 mw3"><a></a><b></b></div>
170 <div class="grid r2 w xw20"><a></a><b></b></div>
171 <div class="grid r2 w xw3 mw20"><a></a><b></b></div>
172 <div class="grid r2 w mw20"><a></a><b></b></div>
173
174 <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
175 <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
176 <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b> <x></x></div>
177 <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
178 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
179 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
180
181 <div class="grid w r2" style="min-height:0"><a></a><b></b></div>
182 <div class="grid w r2" style="height:0"><a></a><b></b></div>
183 <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
184 <div class="grid w r2" style="max-height:0"><a></a><b></b></div>
185 <div class="grid w r02"><a></a><b></b></div>
186
187
188 <br clear="all">
189 <br clear="all">
190
191 <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
192 <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
193 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
194 <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
195 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
196 <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
197 <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
198 <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
199 <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
200 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
201 <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
202 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
203
204 <br clear="all">
205 <br clear="all">
206
207 <div class="grid r3 w w20"><a></a><b></b></div>
208 <div class="grid r3 w w3"><a></a><b></b></div>
209 <div class="grid r3 w xw20"><a></a><b></b></div>
210 <div class="grid r3 w xw3"><a></a><b></b></div>
211 <div class="grid r3 w mw20"><a></a><b></b></div>
212 <div class="grid r3 w mw3"><a></a><b></b></div>
213 <div class="grid r3 w w20 xw3"><a></a><b></b></div>
214 <div class="grid r3 w w3 mw20"><a></a><b></b></div>
215 <div class="grid r3 w w3 mw3"><a></a><b></b></div>
216 <div class="grid r3 w xw20"><a></a><b></b></div>
217 <div class="grid r3 w xw3 mw20"><a></a><b></b></div>
218 <div class="grid r3 w mw20"><a></a><b></b></div>
219
220 <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
221 <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
222 <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b> <x></x></div>
223 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></d iv>
224 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
225 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
226
227 <div class="grid w r3" style="min-height:0"><a></a><b></b></div>
228 <div class="grid w r3" style="height:0"><a></a><b></b></div>
229 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
230 <div class="grid w r3" style="max-height:0"><a></a><b></b></div>
231 <div class="grid w r03"><a></a><b></b></div>
232
233
234 </fill>
235
236 <!-- TODO(svillar): uncomment these tests when enabling auto-fit. -->
237 <!-- <fit>
238
239 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
240 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
241 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
242 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
243 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
244 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
245 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
246 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
247 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
248 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
249 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
250 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
251
252 <br clear="all">
253 <br clear="all">
254
255 <div class="grid r1 w w20"><a></a><b></b></div>
256 <div class="grid r1 w w3"><a></a><b></b></div>
257 <div class="grid r1 w xw20"><a></a><b></b></div>
258 <div class="grid r1 w xw3"><a></a><b></b></div>
259 <div class="grid r1 w mw20"><a></a><b></b></div>
260 <div class="grid r1 w mw3"><a></a><b></b></div>
261 <div class="grid r1 w w20 xw3"><a></a><b></b></div>
262 <div class="grid r1 w w3 mw20"><a></a><b></b></div>
263 <div class="grid r1 w w3 mw3"><a></a><b></b></div>
264 <div class="grid r1 w xw20"><a></a><b></b></div>
265 <div class="grid r1 w xw3 mw20"><a></a><b></b></div>
266 <div class="grid r1 w mw20"><a></a><b></b></div>
267
268 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
269 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
270 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
271 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
272 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
273 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
274
275 <div class="grid w r1" style="min-height:0"><a></a><b></b></div>
276 <div class="grid w r1" style="height:0"><a></a><b></b></div>
277 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
278 <div class="grid w r1" style="max-height:0"><a></a><b></b></div>
279 <div class="grid w r0"><a></a><b></b></div>
280 <div class="grid w ra"><a></a><b></b></div>
281
282 <br clear="all">
283 <br clear="all">
284
285 <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
286 <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
287 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
288 <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
289 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
290 <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
291 <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
292 <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
293 <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
294 <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
295 <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
296 <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
297
298 <br clear="all">
299 <br clear="all">
300
301 <div class="grid r2 w w20"><a></a><b></b></div>
302 <div class="grid r2 w w3"><a></a><b></b></div>
303 <div class="grid r2 w xw20"><a></a><b></b></div>
304 <div class="grid r2 w xw3"><a></a><b></b></div>
305 <div class="grid r2 w mw20"><a></a><b></b></div>
306 <div class="grid r2 w mw3"><a></a><b></b></div>
307 <div class="grid r2 w w20 xw3"><a></a><b></b></div>
308 <div class="grid r2 w w3 mw20"><a></a><b></b></div>
309 <div class="grid r2 w w3 mw3"><a></a><b></b></div>
310 <div class="grid r2 w xw20"><a></a><b></b></div>
311 <div class="grid r2 w xw3 mw20"><a></a><b></b></div>
312 <div class="grid r2 w mw20"><a></a><b></b></div>
313
314 <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
315 <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
316 <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
317 <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
318 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
319 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
320
321 <div class="grid w r2" style="min-height:0"><a></a><b></b></div>
322 <div class="grid w r2" style="height:0"><a></a><b></b></div>
323 <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
324 <div class="grid w r2" style="max-height:0"><a></a><b></b></div>
325 <div class="grid w r02"><a></a><b></b></div>
326
327
328 <br clear="all">
329 <br clear="all">
330
331 <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
332 <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
333 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
334 <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
335 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
336 <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
337 <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
338 <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
339 <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
340 <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
341 <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
342 <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
343
344 <br clear="all">
345 <br clear="all">
346
347 <div class="grid r3 w w20"><a></a><b></b></div>
348 <div class="grid r3 w w3"><a></a><b></b></div>
349 <div class="grid r3 w xw20"><a></a><b></b></div>
350 <div class="grid r3 w xw3"><a></a><b></b></div>
351 <div class="grid r3 w mw20"><a></a><b></b></div>
352 <div class="grid r3 w mw3"><a></a><b></b></div>
353 <div class="grid r3 w w20 xw3"><a></a><b></b></div>
354 <div class="grid r3 w w3 mw20"><a></a><b></b></div>
355 <div class="grid r3 w w3 mw3"><a></a><b></b></div>
356 <div class="grid r3 w xw20"><a></a><b></b></div>
357 <div class="grid r3 w xw3 mw20"><a></a><b></b></div>
358 <div class="grid r3 w mw20"><a></a><b></b></div>
359
360 <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
361 <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></ div>
362 <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b ></b><x></x></div>
363 <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></ x></div>
364 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
365 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
366
367 <div class="grid w r3" style="min-height:0"><a></a><b></b></div>
368 <div class="grid w r3" style="height:0"><a></a><b></b></div>
369 <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
370 <div class="grid w r3" style="max-height:0"><a></a><b></b></div>
371 <div class="grid w r03"><a></a><b></b></div>
372
373
374 </fit> -->
375
376
377 </body>
378 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698