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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-justify-content.html

Issue 706903003: [CSS Grid Layout] Partial implementation of justify-content for Grid. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Applied additional suggested changes. Created 6 years, 1 month 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 | LayoutTests/fast/css-grid-layout/grid-justify-content-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 body {
8 margin: 0;
9 }
10
11 .grid {
12 grid: 50px 50px / 100px 100px;
13 position: relative;
14 width: 200px;
15 height: 300px;
16 }
17
18 .verticalGrid {
19 width: 300px;
20 height: 200px;
21 }
22
23 .cell {
24 width: 20px;
25 height: 40px;
26 }
27
28 .justifyContentBaseline {
29 justify-content: baseline;
30 }
31
32 .justifyContentLastBaseline {
33 justify-content: last-baseline;
34 }
35
36 .justifyContentStart {
37 justify-content: start;
38 }
39
40 .justifyContentEnd {
41 justify-content: end;
42 }
43
44 .justifyContentCenter {
45 justify-content: center;
46 }
47
48 .justifyContentLeft {
49 justify-content: left;
50 }
51
52 .justifyContentRight {
53 justify-content: right;
54 }
55
56 .justifyContentFlexStart {
57 justify-content: flex-start;
58 }
59
60 .justifyContentFlexEnd {
61 justify-content: flex-end;
62 }
63
64 .justifyContentEndTrue {
65 justify-content: end true;
66 }
67
68 .justifyContentCenterTrue {
69 justify-content: center true;
70 }
71
72 .justifyContentRightSafe {
73 justify-content: right safe;
74 }
75
76 .justifyContentLeftTrue {
77 justify-content: left true;
78 }
79
80 .justifyContentFlexStartTrue {
81 justify-content: flex-start true;
82 }
83
84 .justifyContentFlexEndSafe {
85 justify-content: flex-end safe;
86 }
87
88 .justifyContentSpaceBetween {
89 justify-content: space-between;
90 }
91
92 .justifyContentSpaceAround {
93 justify-content: space-around;
94 }
95
96 .justifyContentSpaceEvenly {
97 justify-content: space-evenly;
98 }
99
100 .justifyContentStretch {
101 justify-content: stretch;
102 }
103
104 .justifyContentSpaceBetweenLeft {
105 justify-content: space-between left;
106 }
107
108 .justifyContentSpaceAroundCenter {
109 justify-content: space-around center;
110 }
111
112 .justifyContentSpaceEvenlyRight {
113 justify-content: space-evenly right;
114 }
115
116 .justifyContentStretchStart {
117 justify-content: stretch start;
118 }
119
120 </style>
121 </head>
122 <body onload="checkLayout('.grid')">
123
124 <p>This test checks that the justify-content property is applied correctly when using content-position values.</p>
125
126 <div style="position: relative">
127 <div class="grid justifyContentCenter" data-expected-width="200" data-expect ed-height="300">
128 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
129 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
130 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y= "100" data-expected-width="20" data-expected-height="40"></div>
131 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
132 </div>
133 </div>
134
135 <div style="position: relative">
136 <div class="grid justifyContentLeft" data-expected-width="200" data-expected -height="300">
137 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
138 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
139 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
140 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
141 </div>
142 </div>
143
144 <div style="position: relative">
145 <div class="grid justifyContentRight" data-expected-width="200" data-expecte d-height="300">
146 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
147 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
148 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
149 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
150 </div>
151 </div>
152
153 <div style="position: relative">
154 <div class="grid justifyContentStart" data-expected-width="200" data-expecte d-height="300">
Julien - ping for review 2014/11/20 16:31:02 We would need a direction="ltr" for justify-conten
jfernandez 2014/11/20 23:01:14 Done.
155 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
156 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
157 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
158 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
159 </div>
160 </div>
161
162 <div style="position: relative">
163 <div class="grid justifyContentEnd" data-expected-width="200" data-expected- height="300">
164 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
165 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
166 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
167 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
168 </div>
169 </div>
170
171 <div style="position: relative">
172 <div class="grid justifyContentFlexStart" data-expected-width="200" data-exp ected-height="300">
173 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
174 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
175 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
176 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
177 </div>
178 </div>
179
180 <div style="position: relative">
181 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec ted-height="300">
182 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
183 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
184 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
185 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
186 </div>
187 </div>
188
189 <!-- content-distribution values always fallback to content-position. -->
190 <div style="position: relative">
191 <div class="grid justifyContentSpaceBetween" data-expected-width="200" data- expected-height="300">
192 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
193 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
194 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
195 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
196 </div>
197 </div>
198
199 <div style="position: relative">
200 <div class="grid justifyContentSpaceAround" data-expected-width="200" data-e xpected-height="300">
201 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
202 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
203 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y= "100" data-expected-width="20" data-expected-height="40"></div>
204 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
205 </div>
206 </div>
207
208 <div style="position: relative">
209 <div class="grid justifyContentSpaceEvenly" data-expected-width="200" data-e xpected-height="300">
210 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
211 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
212 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y= "100" data-expected-width="20" data-expected-height="40"></div>
213 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
214 </div>
215 </div>
216
217 <div style="position: relative">
218 <div class="grid justifyContentStretch" data-expected-width="200" data-expec ted-height="300">
219 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
220 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
221 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
222 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
223 </div>
224 </div>
225
226 <div style="position: relative">
227 <div class="grid justifyContentSpaceBetweenLeft" data-expected-width="200" d ata-expected-height="300">
Julien - ping for review 2014/11/20 16:31:02 You should mention that this is not passing. Bette
jfernandez 2014/11/20 23:01:14 Actually the specification states that all those v
228 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
229 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
230 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
231 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
232 </div>
233 </div>
234
235 <div style="position: relative">
236 <div class="grid justifyContentSpaceAroundCenter" data-expected-width="200" data-expected-height="300">
237 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
238 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
239 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y= "100" data-expected-width="20" data-expected-height="40"></div>
240 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
241 </div>
242 </div>
243
244 <div style="position: relative">
245 <div class="grid justifyContentSpaceEvenlyRight" data-expected-width="200" d ata-expected-height="300">
246 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
247 <div class="cell firstRowSecondColumn" data-offset-x="150" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
248 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
249 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
250 </div>
251 </div>
252
253 <div style="position: relative">
254 <div class="grid justifyContentStretchStart" data-expected-width="200" data- expected-height="300">
255 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
256 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
257 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
258 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
259 </div>
260 </div>
261
262 <!-- Default alignment and initial values. -->
263 <div style="position: relative">
264 <div class="grid" data-expected-width="200" data-expected-height="300">
265 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
266 <div class="cell firstRowSecondColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
267 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
268 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
269 </div>
270 </div>
271
272 <!-- Vertical RL writing mode. -->
273 <div style="position: relative">
274 <div class="grid verticalGrid verticalRL justifyContentCenter" data-expected -width="300" data-expected-height="200">
275 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y= "50" data-expected-width="20" data-expected-height="40"></div>
276 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
277 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y ="50" data-expected-width="20" data-expected-height="40"></div>
278 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
279 </div>
280 </div>
281
282 <div style="position: relative">
283 <div class="grid verticalGrid verticalRL justifyContentLeft" data-expected-w idth="300" data-expected-height="200">
284 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
285 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y ="50" data-expected-width="20" data-expected-height="40"></div>
286 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
287 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
288 </div>
289 </div>
290
291 <div style="position: relative">
292 <div class="grid verticalGrid verticalRL justifyContentRight" data-expected- width="300" data-expected-height="200">
293 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
294 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y ="50" data-expected-width="20" data-expected-height="40"></div>
295 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
296 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
297 </div>
298 </div>
299
300 <div style="position: relative">
301 <div class="grid verticalGrid verticalRL justifyContentStart" data-expected- width="300" data-expected-height="200">
302 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
303 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y ="50" data-expected-width="20" data-expected-height="40"></div>
304 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
305 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
306 </div>
307 </div>
308
309 <div style="position: relative">
310 <div class="grid verticalGrid verticalRL justifyContentEnd" data-expected-wi dth="300" data-expected-height="200">
311 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y= "100" data-expected-width="20" data-expected-height="40"></div>
312 <div class="cell firstRowSecondColumn" data-offset-x="280" data-offset-y ="150" data-expected-width="20" data-expected-height="40"></div>
313 <div class="cell secondRowFirstColumn" data-offset-x="180" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
314 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset- y="150" data-expected-width="20" data-expected-height="40"></div>
315 </div>
316 </div>
317
318 <!-- Vertical LR writing mode. -->
319 <div style="position: relative">
320 <div class="grid verticalGrid verticalLR justifyContentCenter" data-expected -width="300" data-expected-height="200">
321 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="5 0" data-expected-width="20" data-expected-height="40"></div>
322 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div>
323 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="50" data-expected-width="20" data-expected-height="40"></div>
324 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
325 </div>
326 </div>
327
328 <div style="position: relative">
329 <div class="grid verticalGrid verticalLR justifyContentLeft" data-expected-w idth="300" data-expected-height="200">
330 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
331 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 50" data-expected-width="20" data-expected-height="40"></div>
332 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
333 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
334 </div>
335 </div>
336
337 <div style="position: relative">
338 <div class="grid verticalGrid verticalLR justifyContentRight" data-expected- width="300" data-expected-height="200">
339 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
340 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 50" data-expected-width="20" data-expected-height="40"></div>
341 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
342 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
343 </div>
344 </div>
345
346 <div style="position: relative">
347 <div class="grid verticalGrid verticalLR justifyContentStart" data-expected- width="300" data-expected-height="200">
348 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
349 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 50" data-expected-width="20" data-expected-height="40"></div>
350 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
351 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="50" data-expected-width="20" data-expected-height="40"></div>
352 </div>
353 </div>
354
355 <div style="position: relative">
356 <div class="grid verticalGrid verticalLR justifyContentEnd" data-expected-wi dth="300" data-expected-height="200">
357 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="1 00" data-expected-width="20" data-expected-height="40"></div>
358 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 150" data-expected-width="20" data-expected-height="40"></div>
359 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
360 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="150" data-expected-width="20" data-expected-height="40"></div>
361 </div>
362 </div>
363
364 </body>
365 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-justify-content-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698