OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 } | 9 } |
10 | 10 |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
48 justify-content: right; | 48 justify-content: right; |
49 } | 49 } |
50 | 50 |
51 .justifyContentFlexStart { | 51 .justifyContentFlexStart { |
52 justify-content: flex-start; | 52 justify-content: flex-start; |
53 } | 53 } |
54 | 54 |
55 .justifyContentFlexEnd { | 55 .justifyContentFlexEnd { |
56 justify-content: flex-end; | 56 justify-content: flex-end; |
57 } | 57 } |
58 | |
59 .justifyContentEndTrue { | |
60 justify-content: end true; | |
61 } | |
62 | |
63 .justifyContentCenterTrue { | |
64 justify-content: center true; | |
65 } | |
66 | |
67 .justifyContentRightSafe { | |
68 justify-content: right safe; | |
69 } | |
70 | |
71 .justifyContentLeftTrue { | |
72 justify-content: left true; | |
73 } | |
74 | |
75 .justifyContentFlexStartTrue { | |
76 justify-content: flex-start true; | |
77 } | |
78 | |
79 .justifyContentFlexEndSafe { | |
80 justify-content: flex-end safe; | |
81 } | |
82 | |
83 .justifyContentSpaceBetween { | |
84 justify-content: space-between; | |
85 } | |
86 | |
87 .justifyContentSpaceAround { | |
88 justify-content: space-around; | |
89 } | |
90 | |
91 .justifyContentSpaceEvenly { | |
92 justify-content: space-evenly; | |
93 } | |
94 | |
95 .justifyContentStretch { | |
96 justify-content: stretch; | |
97 } | |
98 | |
99 .justifyContentSpaceBetweenLeft { | |
100 justify-content: space-between left; | |
101 } | |
102 | |
103 .justifyContentSpaceAroundEnd { | |
104 justify-content: space-around end; | |
105 } | |
106 | |
107 .justifyContentSpaceEvenlyRight { | |
108 justify-content: space-evenly right; | |
109 } | |
110 | |
111 .justifyContentStretchEnd { | |
112 justify-content: stretch end; | |
113 } | |
114 | |
115 </style> | 58 </style> |
116 </head> | 59 </head> |
117 <body onload="checkLayout('.grid')"> | 60 <body onload="checkLayout('.grid')"> |
118 | 61 |
119 <p>This test checks that the justify-content property is applied correctly when
using content-position values.</p> | 62 <p>This test checks that the justify-content property is applied correctly when
using content-position values.</p> |
120 | 63 |
121 <div style="position: relative"> | 64 <div style="position: relative"> |
122 <p>direction: LTR | justify-content: 'center'</p> | 65 <p>direction: LTR | justify-content: 'center'</p> |
123 <div class="grid justifyContentCenter" data-expected-width="200" data-expect
ed-height="300"> | 66 <div class="grid justifyContentCenter" data-expected-width="200" data-expect
ed-height="300"> |
124 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> | 67 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
181 <div style="position: relative"> | 124 <div style="position: relative"> |
182 <p>direction: LTR | justify-content: 'flex-end'</p> | 125 <p>direction: LTR | justify-content: 'flex-end'</p> |
183 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec
ted-height="300"> | 126 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec
ted-height="300"> |
184 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> | 127 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> |
185 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | 128 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> |
186 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | 129 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> |
187 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | 130 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> |
188 </div> | 131 </div> |
189 </div> | 132 </div> |
190 | 133 |
191 <!-- content-distribution values always fallback to content-position. --> | |
192 <div style="position: relative"> | |
193 <p>direction: LTR | justify-content: 'space-between' (fallback to 'start')</
p> | |
194 <div class="grid justifyContentSpaceBetween" data-expected-width="200" data-
expected-height="300"> | |
195 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
196 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
197 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
198 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
199 </div> | |
200 </div> | |
201 | |
202 <div style="position: relative"> | |
203 <p>direction: LTR | justify-content: 'space-around' (fallback to 'center')</
p> | |
204 <div class="grid justifyContentSpaceAround" data-expected-width="200" data-e
xpected-height="300"> | |
205 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> | |
206 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | |
207 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
208 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | |
209 </div> | |
210 </div> | |
211 | |
212 <div style="position: relative"> | |
213 <p>direction: LTR | justify-content: 'space-evenly' (fallback to 'center')</
p> | |
214 <div class="grid justifyContentSpaceEvenly" data-expected-width="200" data-e
xpected-height="300"> | |
215 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> | |
216 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | |
217 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
218 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | |
219 </div> | |
220 </div> | |
221 | |
222 <div style="position: relative"> | |
223 <p>direction: LTR | justify-content: 'stretch' (fallback to start)</p> | |
224 <div class="grid justifyContentStretch" data-expected-width="200" data-expec
ted-height="300"> | |
225 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
226 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
227 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
228 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
229 </div> | |
230 </div> | |
231 | |
232 <div style="position: relative"> | |
233 <p>direction: LTR | justify-content: space-between left (fallback to left)</
p> | |
234 <div class="grid justifyContentSpaceBetweenLeft" data-expected-width="200" d
ata-expected-height="300"> | |
235 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> | |
236 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | |
237 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | |
238 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | |
239 </div> | |
240 </div> | |
241 | |
242 <div style="position: relative"> | |
243 <p>direction: LTR | justify-content: 'space-around end' (fallback to end)</p
> | |
244 <div class="grid justifyContentSpaceAroundEnd" data-expected-width="200" dat
a-expected-height="300"> | |
245 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> | |
246 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | |
247 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | |
248 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | |
249 </div> | |
250 </div> | |
251 | |
252 <div style="position: relative"> | |
253 <p>direction: LTR | justify-content: 'space-evenly right' (fallback to 'righ
t')</p> | |
254 <div class="grid justifyContentSpaceEvenlyRight" data-expected-width="200" d
ata-expected-height="300"> | |
255 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> | |
256 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | |
257 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | |
258 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | |
259 </div> | |
260 </div> | |
261 | |
262 <div style="position: relative"> | |
263 <p>direction: LTR | justify-content: 'stretch end' (fallback to 'end')</p> | |
264 <div class="grid justifyContentStretchEnd" data-expected-width="200" data-ex
pected-height="300"> | |
265 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> | |
266 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | |
267 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | |
268 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-
y="100" data-expected-width="20" data-expected-height="40"></div> | |
269 </div> | |
270 </div> | |
271 | |
272 <!-- Default alignment and initial values. --> | 134 <!-- Default alignment and initial values. --> |
273 <div style="position: relative"> | 135 <div style="position: relative"> |
274 <p>direction: LTR | justify-content: 'auto' (resolved to 'start')</p> | 136 <p>direction: LTR | justify-content: 'auto' (resolved to 'start')</p> |
275 <div class="grid" data-expected-width="200" data-expected-height="300"> | 137 <div class="grid" data-expected-width="200" data-expected-height="300"> |
276 <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 firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="20" data-expected-height="40"></div> |
277 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | 139 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> |
278 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 140 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
279 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | 141 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
280 </div> | 142 </div> |
281 </div> | 143 </div> |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
326 <div class="grid directionRTL justifyContentEnd" data-expected-width="200" d
ata-expected-height="300"> | 188 <div class="grid directionRTL justifyContentEnd" data-expected-width="200" d
ata-expected-height="300"> |
327 <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> | 189 <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> |
328 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="50" data-expected-height="100"></div> | 190 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="50" data-expected-height="100"></div> |
329 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 191 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
330 <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> | 192 <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y
="100" data-expected-width="20" data-expected-height="40"></div> |
331 </div> | 193 </div> |
332 </div> | 194 </div> |
333 | 195 |
334 </body> | 196 </body> |
335 </html> | 197 </html> |
OLD | NEW |