OLD | NEW |
---|---|
(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> | |
OLD | NEW |