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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html

Issue 1576993003: [css-grid] Fix placement for unknown named grid lines (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixing last review comments Created 4 years, 10 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/grid-item-position-changed-dynamic.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.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 grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
6 grid-auto-columns: 10px;
7 grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
8 grid-auto-rows: 5px;
9 }
10 </style>
11 <script src="../../resources/testharness.js"></script>
12 <script src="../../resources/testharnessreport.js"></script>
13 <script src="../../resources/check-layout-th.js"></script>
14
15 <body onload="checkLayout('.grid')">
16 <div id="log"></div>
17
18 <p>This test checks that we resolve unknown named grid lines considering that al l the implicit lines have the unknown names.</p>
19
20 <div style="position: relative">
21 <div class="grid">
22 <div style="grid-column: foo; grid-row: bar;"
23 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
24 </div>
25 <div style="grid-column: a; grid-row: b;"
26 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
27 </div>
28 <div style="grid-column: line; grid-row: line;"
29 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
30 </div>
31 </div>
32 </div>
33
34 <div style="position: relative">
35 <div class="grid">
36 <div style="grid-column: foo; grid-row: bar;"
37 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
38 </div>
39 <div style="grid-column: 1 / foo; grid-row: 1 / bar;"
40 data-offset-x="0" data-offset-y="0" data-expected-width="160" data-e xpected-height="95">
41 </div>
42 <div style="grid-column: foo / 1; grid-row: bar / 1;"
43 data-offset-x="0" data-offset-y="0" data-expected-width="160" data-e xpected-height="95">
44 </div>
45 <div style="grid-column: foo / foo; grid-row: bar / bar;"
46 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
47 </div>
48 <div style="grid-column: foo / bar; grid-row: bar / foo;"
49 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
50 </div>
51 </div>
52 </div>
53
54 <div style="position: relative">
55 <div class="grid">
56 <div style="grid-column: 1 foo; grid-row: 1 bar;"
57 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
58 </div>
59 <div style="grid-column: 2 foo; grid-row: 2 bar;"
60 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
61 </div>
62 <div style="grid-column: 3 foo; grid-row: 3 bar;"
63 data-offset-x="180" data-offset-y="105" data-expected-width="10" dat a-expected-height="5">
64 </div>
65 <div style="grid-column: 4 foo; grid-row: 4 bar;"
66 data-offset-x="190" data-offset-y="110" data-expected-width="10" dat a-expected-height="5">
67 </div>
68 <div style="grid-column: 5 foo; grid-row: 5 bar;"
69 data-offset-x="200" data-offset-y="115" data-expected-width="10" dat a-expected-height="5">
70 </div>
71 <div style="grid-column: 2 foo / 4 foo; grid-row: 2 bar / 4 bar;"
72 data-offset-x="170" data-offset-y="100" data-expected-width="20" dat a-expected-height="10">
73 </div>
74 <div style="grid-column: 2 foo / 4 bar; grid-row: 2 bar / 4 foo;"
75 data-offset-x="170" data-offset-y="100" data-expected-width="20" dat a-expected-height="10">
76 </div>
77 <div style="grid-column: 5 foo / 3 foo; grid-row: 5 bar / 3 bar;"
78 data-offset-x="180" data-offset-y="105" data-expected-width="20" dat a-expected-height="10">
79 </div>
80 <div style="grid-column: 5 foo / 3 bar; grid-row: 5 bar / 3 foo;"
81 data-offset-x="180" data-offset-y="105" data-expected-width="20" dat a-expected-height="10">
82 </div>
83 </div>
84 </div>
85
86 <div style="position: relative">
87 <div class="grid">
88 <div style="grid-column: -1 foo; grid-row: -1 bar;"
89 data-offset-x="40" data-offset-y="20" data-expected-width="10" data- expected-height="5">
90 </div>
91 <div style="grid-column: -2 foo; grid-row: -2 bar;"
92 data-offset-x="30" data-offset-y="15" data-expected-width="10" data- expected-height="5">
93 </div>
94 <div style="grid-column: -3 foo; grid-row: -3 bar;"
95 data-offset-x="20" data-offset-y="10" data-expected-width="10" data- expected-height="5">
96 </div>
97 <div style="grid-column: -4 foo; grid-row: -4 bar;"
98 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
99 </div>
100 <div style="grid-column: -5 foo; grid-row: -5 bar;"
101 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
102 </div>
103 <div style="grid-column: -4 foo / -2 foo; grid-row: -4 bar / -2 bar;"
104 data-offset-x="10" data-offset-y="5" data-expected-width="20" data-e xpected-height="10">
105 </div>
106 <div style="grid-column: -4 foo / -2 bar; grid-row: -4 bar / -2 foo;"
107 data-offset-x="10" data-offset-y="5" data-expected-width="20" data-e xpected-height="10">
108 </div>
109 <div style="grid-column: -3 foo / -5 foo; grid-row: -3 bar / -5 bar;"
110 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
111 </div>
112 <div style="grid-column: -3 foo / -5 bar; grid-row: -3 bar / -5 foo;"
113 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
114 </div>
115 </div>
116 </div>
117
118 <div style="position: relative">
119 <div class="grid">
120 <div style="grid-column: 1 / span foo; grid-row: 1 / span bar;"
121 data-offset-x="10" data-offset-y="5" data-expected-width="160" data- expected-height="95">
122 </div>
123 <div style="grid-column: span foo / 1; grid-row: span bar / 1;"
124 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
125 </div>
126 <div style="grid-column: foo / span foo; grid-row: bar / span bar;"
127 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
128 </div>
129 <div style="grid-column: foo / span bar; grid-row: bar / span foo;"
130 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
131 </div>
132 <div style="grid-column: span foo / foo; grid-row: span bar / bar;"
133 data-offset-x="0" data-offset-y="0" data-expected-width="170" data-e xpected-height="100">
134 </div>
135 <div style="grid-column: span foo / bar; grid-row: span bar / foo;"
136 data-offset-x="0" data-offset-y="0" data-expected-width="170" data-e xpected-height="100">
137 </div>
138 </div>
139 </div>
140
141 <div style="position: relative">
142 <div class="grid">
143 <div style="grid-column: -1 / span foo; grid-row: -1 / span bar;"
144 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
145 </div>
146 <div style="grid-column: span foo / -1; grid-row: span bar / -1;"
147 data-offset-x="10" data-offset-y="5" data-expected-width="160" data- expected-height="95">
148 </div>
149 <div style="grid-column: -1 foo / span foo; grid-row: -1 bar / span bar; "
150 data-offset-x="10" data-offset-y="5" data-expected-width="170" data- expected-height="100">
151 </div>
152 <div style="grid-column: -1 foo / span bar; grid-row: -1 bar / span foo; "
153 data-offset-x="10" data-offset-y="5" data-expected-width="170" data- expected-height="100">
154 </div>
155 <div style="grid-column: span foo / -1 foo; grid-row: span bar / -1 bar; "
156 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
157 </div>
158 <div style="grid-column: span foo / -1 bar; grid-row: span bar / -1 foo; "
159 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
160 </div>
161 </div>
162 </div>
163
164 <div style="position: relative">
165 <div class="grid">
166 <div style="grid-column: 1 / span 2 foo; grid-row: 1 / span 2 bar;"
167 data-offset-x="20" data-offset-y="10" data-expected-width="170" data -expected-height="100">
168 </div>
169 <div style="grid-column: span 2 foo / 1; grid-row: span 2 bar / 1;"
170 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
171 </div>
172 <div style="grid-column: foo / span 2 foo; grid-row: bar / span 2 bar;"
173 data-offset-x="180" data-offset-y="105" data-expected-width="20" dat a-expected-height="10">
174 </div>
175 <div style="grid-column: foo / span 2 bar; grid-row: bar / span 2 foo;"
176 data-offset-x="180" data-offset-y="105" data-expected-width="20" dat a-expected-height="10">
177 </div>
178 <div style="grid-column: span 2 foo / foo; grid-row: span 2 bar / bar;"
179 data-offset-x="0" data-offset-y="0" data-expected-width="180" data-e xpected-height="105">
180 </div>
181 <div style="grid-column: span 2 foo / bar; grid-row: span 2 bar / foo;"
182 data-offset-x="0" data-offset-y="0" data-expected-width="180" data-e xpected-height="105">
183 </div>
184 </div>
185 </div>
186
187 <div style="position: relative">
188 <div class="grid">
189 <div style="grid-column: -1 / span 2 foo; grid-row: -1 / span 2 bar;"
190 data-offset-x="180" data-offset-y="105" data-expected-width="20" dat a-expected-height="10">
191 </div>
192 <div style="grid-column: span 2 foo / -1; grid-row: span 2 bar / -1;"
193 data-offset-x="10" data-offset-y="5" data-expected-width="170" data- expected-height="100">
194 </div>
195 <div style="grid-column: -1 foo / span 2 foo; grid-row: -1 bar / span 2 bar;"
196 data-offset-x="20" data-offset-y="10" data-expected-width="180" data -expected-height="105">
197 </div>
198 <div style="grid-column: -1 foo / span 2 bar; grid-row: -1 bar / span 2 foo;"
199 data-offset-x="20" data-offset-y="10" data-expected-width="180" data -expected-height="105">
200 </div>
201 <div style="grid-column: span 2 foo / -1 foo; grid-row: span 2 bar / -1 bar;"
202 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
203 </div>
204 <div style="grid-column: span 2 foo / -1 bar; grid-row: span 2 bar / -1 foo;"
205 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
206 </div>
207 </div>
208 </div>
209
210 <div style="position: relative">
211 <div class="grid">
212 <div style="grid-column: 2 foo / span foo; grid-row: 2 bar / span bar;"
213 data-offset-x="190" data-offset-y="110" data-expected-width="10" dat a-expected-height="5">
214 </div>
215 <div style="grid-column: 2 foo / span bar; grid-row: 2 bar / span foo;"
216 data-offset-x="190" data-offset-y="110" data-expected-width="10" dat a-expected-height="5">
217 </div>
218 <div style="grid-column: 2 foo / span 2 foo; grid-row: 2 bar / span 2 ba r;"
219 data-offset-x="190" data-offset-y="110" data-expected-width="20" dat a-expected-height="10">
220 </div>
221 <div style="grid-column: 2 foo / span 2 bar; grid-row: 2 bar / span 2 fo o;"
222 data-offset-x="190" data-offset-y="110" data-expected-width="20" dat a-expected-height="10">
223 </div>
224 <div style="grid-column: span foo / 2 foo; grid-row: span bar / 2 bar;"
225 data-offset-x="10" data-offset-y="5" data-expected-width="180" data- expected-height="105">
226 </div>
227 <div style="grid-column: span foo / 2 bar; grid-row: span bar / 2 foo;"
228 data-offset-x="10" data-offset-y="5" data-expected-width="180" data- expected-height="105">
229 </div>
230 <div style="grid-column: span 2 foo / 2 foo; grid-row: span 2 bar / 2 ba r;"
231 data-offset-x="0" data-offset-y="0" data-expected-width="190" data-e xpected-height="110">
232 </div>
233 <div style="grid-column: span 2 foo / 2 bar; grid-row: span 2 bar / 2 fo o;"
234 data-offset-x="0" data-offset-y="0" data-expected-width="190" data-e xpected-height="110">
235 </div>
236 </div>
237 </div>
238
239 <div style="position: relative">
240 <div class="grid">
241 <div style="grid-column: -2 foo / span foo; grid-row: -2 bar / span bar; "
242 data-offset-x="20" data-offset-y="10" data-expected-width="180" data -expected-height="105">
243 </div>
244 <div style="grid-column: -2 foo / span bar; grid-row: -2 bar / span foo; "
245 data-offset-x="20" data-offset-y="10" data-expected-width="180" data -expected-height="105">
246 </div>
247 <div style="grid-column: -2 foo / span 2 foo; grid-row: -2 bar / span 2 bar;"
248 data-offset-x="20" data-offset-y="10" data-expected-width="190" data -expected-height="110">
249 </div>
250 <div style="grid-column: -2 foo / span 2 bar; grid-row: -2 bar / span 2 foo;"
251 data-offset-x="20" data-offset-y="10" data-expected-width="190" data -expected-height="110">
252 </div>
253 <div style="grid-column: span foo / -2 foo; grid-row: span bar / -2 bar; "
254 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
255 </div>
256 <div style="grid-column: span foo / -2 bar; grid-row: span bar / -2 foo; "
257 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
258 </div>
259 <div style="grid-column: span 2 foo / -2 foo; grid-row: span 2 bar / -2 bar;"
260 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
261 </div>
262 <div style="grid-column: span 2 foo / -2 bar; grid-row: span 2 bar / -2 foo;"
263 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
264 </div>
265 </div>
266 </div>
267
268 <div style="position: relative">
269 <div class="grid">
270 <div style="grid-column: 1 middle; grid-row: 1 middle;"
271 data-offset-x="50" data-offset-y="30" data-expected-width="100" data -expected-height="60">
272 </div>
273 <div style="grid-column: 2 middle; grid-row: 2 middle;"
274 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
275 </div>
276 <div style="grid-column: 3 middle; grid-row: 3 middle;"
277 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
278 </div>
279 <div style="grid-column: 4 middle; grid-row: 4 middle;"
280 data-offset-x="180" data-offset-y="105" data-expected-width="10" dat a-expected-height="5">
281 </div>
282 <div style="grid-column: 5 middle; grid-row: 5 middle;"
283 data-offset-x="190" data-offset-y="110" data-expected-width="10" dat a-expected-height="5">
284 </div>
285 <div style="grid-column: 2 middle / 4 middle; grid-row: 2 middle / 4 mid dle;"
286 data-offset-x="160" data-offset-y="95" data-expected-width="20" data -expected-height="10">
287 </div>
288 <div style="grid-column: 5 middle / 3 middle; grid-row: 5 middle / 3 mid dle;"
289 data-offset-x="170" data-offset-y="100" data-expected-width="20" dat a-expected-height="10">
290 </div>
291 </div>
292 </div>
293
294 <div style="position: relative">
295 <div class="grid">
296 <div style="grid-column: -1 middle; grid-row: -1 middle;"
297 data-offset-x="90" data-offset-y="50" data-expected-width="100" data -expected-height="60">
298 </div>
299 <div style="grid-column: -2 middle; grid-row: -2 middle;"
300 data-offset-x="30" data-offset-y="15" data-expected-width="10" data- expected-height="5">
301 </div>
302 <div style="grid-column: -3 middle; grid-row: -3 middle;"
303 data-offset-x="20" data-offset-y="10" data-expected-width="10" data- expected-height="5">
304 </div>
305 <div style="grid-column: -4 middle; grid-row: -4 middle;"
306 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
307 </div>
308 <div style="grid-column: -5 middle; grid-row: -5 middle;"
309 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
310 </div>
311 <div style="grid-column: -2 middle / -4 middle; grid-row: -2 middle / -4 middle;"
312 data-offset-x="10" data-offset-y="5" data-expected-width="20" data-e xpected-height="10">
313 </div>
314 <div style="grid-column: -5 middle / -3 middle; grid-row: -5 middle / -3 middle;"
315 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
316 </div>
317 </div>
318 </div>
319
320 <div style="position: relative">
321 <div class="grid">
322 <div style="grid-column: 1 vertical; grid-row: 1 horizontal;"
323 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="30">
324 </div>
325 <div style="grid-column: 2 vertical; grid-row: 2 horizontal;"
326 data-offset-x="50" data-offset-y="30" data-expected-width="100" data -expected-height="60">
327 </div>
328 <div style="grid-column: 3 vertical; grid-row: 3 horizontal;"
329 data-offset-x="150" data-offset-y="90" data-expected-width="10" data -expected-height="5">
330 </div>
331 <div style="grid-column: 4 vertical; grid-row: 4 horizontal;"
332 data-offset-x="160" data-offset-y="95" data-expected-width="10" data -expected-height="5">
333 </div>
334 <div style="grid-column: 5 vertical; grid-row: 5 horizontal;"
335 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
336 </div>
337 <div style="grid-column: 2 vertical / 4 vertical; grid-row: 2 horizontal / 4 horizontal;"
338 data-offset-x="50" data-offset-y="30" data-expected-width="110" data -expected-height="65">
339 </div>
340 <div style="grid-column: 5 vertical / 3 vertical; grid-row: 5 horizontal / 3 horizontal;"
341 data-offset-x="150" data-offset-y="90" data-expected-width="20" data -expected-height="10">
342 </div>
343 </div>
344 </div>
345
346 <div style="position: relative">
347 <div class="grid">
348 <div style="grid-column: -1 vertical; grid-row: -1 horizontal;"
349 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
350 </div>
351 <div style="grid-column: -2 vertical; grid-row: -2 horizontal;"
352 data-offset-x="70" data-offset-y="40" data-expected-width="100" data -expected-height="60">
353 </div>
354 <div style="grid-column: -3 vertical; grid-row: -3 horizontal;"
355 data-offset-x="20" data-offset-y="10" data-expected-width="50" data- expected-height="30">
356 </div>
357 <div style="grid-column: -4 vertical; grid-row: -4 horizontal;"
358 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
359 </div>
360 <div style="grid-column: -5 vertical; grid-row: -5 horizontal;"
361 data-offset-x="0" data-offset-y="0" data-expected-width="10" data-ex pected-height="5">
362 </div>
363 <div style="grid-column: -2 vertical / -4 vertical; grid-row: -2 horizon tal / -4 horizontal;"
364 data-offset-x="10" data-offset-y="5" data-expected-width="60" data-e xpected-height="35">
365 </div>
366 <div style="grid-column: -5 vertical / -3 vertical; grid-row: -5 horizon tal / -3 horizontal;"
367 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
368 </div>
369 </div>
370 </div>
371
372 <div style="position: relative">
373 <div class="grid">
374 <div style="grid-column: 1 / span middle; grid-row: 1 / span middle;"
375 data-offset-x="20" data-offset-y="10" data-expected-width="50" data- expected-height="30">
376 </div>
377 <div style="grid-column: span middle / 1; grid-row: span middle / 1;"
378 data-offset-x="10" data-offset-y="5" data-expected-width="10" data-e xpected-height="5">
379 </div>
380 <div style="grid-column: 1 / span 2 middle; grid-row: 1 / span 2 middle; "
381 data-offset-x="20" data-offset-y="10" data-expected-width="160" data -expected-height="95">
382 </div>
383 <div style="grid-column: span 2 middle / 1; grid-row: span 2 middle / 1; "
384 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="10">
385 </div>
386 <div style="grid-column: middle / span middle; grid-row: middle / span m iddle;"
387 data-offset-x="70" data-offset-y="40" data-expected-width="110" data -expected-height="65">
388 </div>
389 <div style="grid-column: span middle / middle; grid-row: span middle / m iddle;"
390 data-offset-x="10" data-offset-y="5" data-expected-width="60" data-e xpected-height="35">
391 </div>
392 <div style="grid-column: middle / span 2 middle; grid-row: middle / span 2 middle;"
393 data-offset-x="70" data-offset-y="40" data-expected-width="120" data -expected-height="70">
394 </div>
395 <div style="grid-column: span 2 middle / middle; grid-row: span 2 middle / middle;"
396 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="40">
397 </div>
398 </div>
399 </div>
400
401 <div style="position: relative">
402 <div class="grid">
403 <div style="grid-column: -1 / span middle; grid-row: -1 / span middle;"
404 data-offset-x="170" data-offset-y="100" data-expected-width="10" dat a-expected-height="5">
405 </div>
406 <div style="grid-column: span middle / -1; grid-row: span middle / -1;"
407 data-offset-x="70" data-offset-y="40" data-expected-width="100" data -expected-height="60">
408 </div>
409 <div style="grid-column: -1 / span 2 middle; grid-row: -1 / span 2 middl e;"
410 data-offset-x="170" data-offset-y="100" data-expected-width="20" dat a-expected-height="10">
411 </div>
412 <div style="grid-column: span 2 middle / -1; grid-row: span 2 middle / - 1;"
413 data-offset-x="10" data-offset-y="5" data-expected-width="160" data- expected-height="95">
414 </div>
415 <div style="grid-column: -1 middle / span middle; grid-row: -1 middle / span middle;"
416 data-offset-x="70" data-offset-y="40" data-expected-width="110" data -expected-height="65">
417 </div>
418 <div style="grid-column: span middle / -1 middle; grid-row: span middle / -1 middle;"
419 data-offset-x="10" data-offset-y="5" data-expected-width="60" data-e xpected-height="35">
420 </div>
421 <div style="grid-column: -1 middle / span 2 middle; grid-row: -1 middle / span 2 middle;"
422 data-offset-x="70" data-offset-y="40" data-expected-width="120" data -expected-height="70">
423 </div>
424 <div style="grid-column: span 2 middle / -1 middle; grid-row: span 2 mid dle / -1 middle;"
425 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="40">
426 </div>
427 </div>
428 </div>
429
430 <div style="position: relative">
431 <div class="grid">
432 <div style="grid-column: span middle / 6; grid-row: span middle / 6;"
433 data-offset-x="80" data-offset-y="45" data-expected-width="130" data -expected-height="75">
434 </div>
435 <div style="grid-column: span 2 middle / 6; grid-row: span 2 middle / 6; "
436 data-offset-x="20" data-offset-y="10" data-expected-width="190" data -expected-height="110">
437 </div>
438 <div style="grid-column: -6 / span middle; grid-row: -6 / span middle;"
439 data-offset-x="0" data-offset-y="0" data-expected-width="80" data-ex pected-height="45">
440 </div>
441 <div style="grid-column: -6 / span 2 middle; grid-row: -6 / span 2 middl e;"
442 data-offset-x="0" data-offset-y="0" data-expected-width="190" data-e xpected-height="110">
443 </div>
444 </div>
445 </div>
446
447 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698