OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #justifyContentAuto { | |
6 justify-content: auto; | |
7 } | |
8 | |
9 #justifyContentBaseline { | |
10 justify-content: baseline; | |
11 } | |
12 | |
13 #justifyContentLastBaseline { | |
14 justify-content: last-baseline; | |
15 } | |
16 | |
17 #justifyContentSpaceBetween { | |
18 justify-content: space-between; | |
19 } | |
20 | |
21 #justifyContentSpaceAround { | |
22 justify-content: space-around; | |
23 } | |
24 | |
25 #justifyContentSpaceEvenly { | |
26 justify-content: space-evenly; | |
27 } | |
28 | |
29 #justifyContentStretch { | |
30 justify-content: stretch; | |
31 } | |
32 | |
33 #justifyContentSpaceBetweenSafe { | |
34 justify-content: space-between safe; | |
35 } | |
36 | |
37 #justifyContentSpaceAroundTrue { | |
38 justify-content: space-around true; | |
39 } | |
40 | |
41 #justifyContentStretchTrue { | |
42 justify-content: stretch true; | |
43 } | |
44 | |
45 #justifyContentStart { | |
46 justify-content: start; | |
47 } | |
48 | |
49 #justifyContentEnd { | |
50 justify-content: end; | |
51 } | |
52 | |
53 #justifyContentCenter { | |
54 justify-content: center; | |
55 } | |
56 | |
57 #justifyContentLeft { | |
58 justify-content: left; | |
59 } | |
60 | |
61 #justifyContentRight { | |
62 justify-content: right; | |
63 } | |
64 | |
65 #justifyContentFlexStart { | |
66 justify-content: flex-start; | |
67 } | |
68 | |
69 #justifyContentFlexEnd { | |
70 justify-content: flex-end; | |
71 } | |
72 | |
73 #justifyContentEndTrue { | |
74 justify-content: end true; | |
75 } | |
76 | |
77 #justifyContentCenterTrue { | |
78 justify-content: center true; | |
79 } | |
80 | |
81 #justifyContentRightSafe { | |
82 justify-content: right safe; | |
83 } | |
84 | |
85 #justifyContentLeftTrue { | |
86 justify-content: left true; | |
87 } | |
88 | |
89 #justifyContentFlexStartTrue { | |
90 justify-content: flex-start true; | |
91 } | |
92 | |
93 #justifyContentFlexEndSafe { | |
94 justify-content: flex-end safe; | |
95 } | |
96 | |
97 #justifyContentSpaceBetweenLeft { | |
98 justify-content: space-between left; | |
99 } | |
100 | |
101 #justifyContentSpaceAroundCenter { | |
102 justify-content: space-around center; | |
103 } | |
104 | |
105 #justifyContentSpaceEvenlyRight { | |
106 justify-content: space-evenly right; | |
107 } | |
108 | |
109 #justifyContentStretchStartSafe { | |
110 justify-content: stretch start safe; | |
111 } | |
112 | |
113 #justifyContentSpaceAroundEndTrue { | |
114 justify-content: space-around end true; | |
115 } | |
116 | |
117 #justifyContentSpaceEvenlyFlexStartSafe { | |
118 justify-content: space-evenly flex-start safe; | |
119 } | |
120 | |
121 </style> | |
122 <script src="../../resources/js-test.js"></script> | |
123 </head> | |
124 <body> | |
125 <div id="justifyContentAuto"></div> | |
126 <div id="justifyContentBaseline"></div> | |
127 <div id="justifyContentLastBaseline"></div> | |
128 <div id="justifyContentSpaceBetween"></div> | |
129 <div id="justifyContentSpaceAround"></div> | |
130 <div id="justifyContentSpaceEvenly"></div> | |
131 <div id="justifyContentStretch"></div> | |
132 <div id="justifyContentSpaceBetweenSafe"></div> | |
133 <div id="justifyContentSpaceAroundTrue"></div> | |
134 <div id="justifyContentStretchTrue"></div> | |
135 <div id="justifyContentStretchrue"></div> | |
136 <div id="justifyContentStart"></div> | |
137 <div id="justifyContentEnd"></div> | |
138 <div id="justifyContentCenter"></div> | |
139 <div id="justifyContentLeft"></div> | |
140 <div id="justifyContentRight"></div> | |
141 <div id="justifyContentFlexStart"></div> | |
142 <div id="justifyContentFlexEnd"></div> | |
143 <div id="justifyContentEndTrue"></div> | |
144 <div id="justifyContentCenterTrue"></div> | |
145 <div id="justifyContentRightSafe"></div> | |
146 <div id="justifyContentLeftTrue"></div> | |
147 <div id="justifyContentFlexStartTrue"></div> | |
148 <div id="justifyContentFlexEndSafe"></div> | |
149 <div id="justifyContentSpaceBetweenLeft"></div> | |
150 <div id="justifyContentSpaceAroundCenter"></div> | |
151 <div id="justifyContentSpaceEvenlyRight"></div> | |
152 <div id="justifyContentStretchStartSafe"></div> | |
153 <div id="justifyContentSpaceAroundEndTrue"></div> | |
154 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> | |
155 | |
156 <script src="resources/alignment-parsing-utils.js"></script> | |
157 <script> | |
158 description('Test that setting and getting justify-content works as expected'); | |
159 | |
160 debug("Test getting justify-content set through CSS"); | |
161 var justifyContentAuto = document.getElementById("justifyContentAuto"); | |
162 shouldBe("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-con tent')", "'start'"); | |
Julien - ping for review
2014/10/28 17:23:04
We could use shouldBeEqualToString here, which rem
jfernandez
2014/10/29 11:03:04
Done.
| |
163 | |
164 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); | |
165 shouldBe("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify -content')", "'baseline'"); | |
166 | |
167 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase line"); | |
168 shouldBe("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('jus tify-content')", "'last-baseline'"); | |
169 | |
170 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet ween"); | |
171 shouldBe("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('jus tify-content')", "'space-between'"); | |
172 | |
173 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceArou nd"); | |
174 shouldBe("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('just ify-content')", "'space-around'"); | |
175 | |
176 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEven ly"); | |
177 shouldBe("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('just ify-content')", "'space-evenly'"); | |
178 | |
179 var justifyContentStretch = document.getElementById("justifyContentStretch"); | |
180 shouldBe("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify- content')", "'stretch'"); | |
181 | |
182 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac eBetweenSafe"); | |
183 shouldBe("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue( 'justify-content')", "'space-between safe'"); | |
184 | |
185 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpace AroundTrue"); | |
186 shouldBe("getComputedStyle(justifyContentSpaceAroundTrue, '').getPropertyValue(' justify-content')", "'space-around true'"); | |
187 | |
188 var justifyContentStretchTrue = document.getElementById("justifyContentStretchTr ue"); | |
189 shouldBe("getComputedStyle(justifyContentStretchTrue, '').getPropertyValue('just ify-content')", "'stretch true'"); | |
190 | |
191 var justifyContentStart = document.getElementById("justifyContentStart"); | |
192 shouldBe("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-co ntent')", "'start'"); | |
193 | |
194 var justifyContentEnd = document.getElementById("justifyContentEnd"); | |
195 shouldBe("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-cont ent')", "'end'"); | |
196 | |
197 var justifyContentCenter = document.getElementById("justifyContentCenter"); | |
198 shouldBe("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-c ontent')", "'center'"); | |
199 | |
200 var justifyContentLeft = document.getElementById("justifyContentLeft"); | |
201 shouldBe("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-con tent')", "'left'"); | |
202 | |
203 var justifyContentRight = document.getElementById("justifyContentRight"); | |
204 shouldBe("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-co ntent')", "'right'"); | |
205 | |
206 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart") ; | |
207 shouldBe("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justif y-content')", "'flex-start'"); | |
208 | |
209 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); | |
210 shouldBe("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify- content')", "'flex-end'"); | |
211 | |
212 var justifyContentEndTrue = document.getElementById("justifyContentEndTrue"); | |
213 shouldBe("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify- content')", "'end true'"); | |
214 | |
215 var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue "); | |
216 shouldBe("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justi fy-content')", "'center true'"); | |
217 | |
218 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe") ; | |
219 shouldBe("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justif y-content')", "'right safe'"); | |
220 | |
221 var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue"); | |
222 shouldBe("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify -content')", "'left true'"); | |
223 | |
224 var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexSta rtTrue"); | |
225 shouldBe("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('ju stify-content')", "'flex-start true'"); | |
226 | |
227 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSa fe"); | |
228 shouldBe("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('just ify-content')", "'flex-end safe'"); | |
229 | |
230 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpac eBetweenLeft"); | |
231 shouldBe("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue( 'justify-content')", "'space-between left'"); | |
232 | |
233 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpa ceAroundCenter"); | |
234 shouldBe("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue ('justify-content')", "'space-around center'"); | |
235 | |
236 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpac eEvenlyRight"); | |
237 shouldBe("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue( 'justify-content')", "'space-evenly right'"); | |
238 | |
239 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre tchStartSafe"); | |
240 shouldBe("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue( 'justify-content')", "'stretch start safe'"); | |
241 | |
242 var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSp aceAroundEndTrue"); | |
243 shouldBe("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValu e('justify-content')", "'space-around end true'"); | |
244 | |
245 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon tentSpaceEvenlyFlexStartSafe"); | |
246 shouldBe("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getProper tyValue('justify-content')", "'space-evenly flex-start safe'"); | |
247 | |
248 debug(""); | |
249 debug("Test initial value of justify-content through JS"); | |
250 element = document.createElement("div"); | |
251 document.body.appendChild(element); | |
252 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-content')", "' start'"); | |
253 | |
254 debug(""); | |
255 debug("Test getting and setting justify-content through JS"); | |
256 element = document.createElement("div"); | |
257 document.body.appendChild(element); | |
258 element.style.justifyContent = "center"; | |
259 checkValues(element, "justifyContent", "justify-content", "center", "center"); | |
260 | |
261 element.style.justifyContent = "true start"; | |
262 checkValues(element, "justifyContent", "justify-content", "start true", "start true"); | |
263 | |
264 element.style.justifyContent = "flex-end safe"; | |
265 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle x-end safe"); | |
266 | |
267 element.style.justifyContent = "space-between right safe"; | |
268 checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe"); | |
269 | |
270 element.style.justifyContent = "stretch center"; | |
271 checkValues(element, "justifyContent", "justify-content", "stretch center", "st retch center"); | |
272 | |
273 element.style.justifyContent = "true space-around"; | |
274 checkValues(element, "justifyContent", "justify-content", "space-around true", "space-around true"); | |
275 | |
276 element.style.justifyContent = "auto"; | |
277 checkValues(element, "justifyContent", "justify-content", "auto", "start"); | |
278 | |
279 element.style.display = "flex"; | |
280 element.style.justifyContent = "auto"; | |
281 checkValues(element, "justifyContent", "justify-content", "auto", "flex-start") ; | |
282 | |
283 element.style.display = "grid"; | |
284 element.style.justifyContent = "auto"; | |
285 checkValues(element, "justifyContent", "justify-content", "auto", "start"); | |
286 | |
287 element.style.justifyContent = "flex-end"; | |
288 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end "); | |
289 | |
290 debug(""); | |
291 debug("Test bad combinations of justify-content"); | |
292 element = document.createElement("div"); | |
293 document.body.appendChild(element); | |
294 | |
295 checkBadValues(element, "justifyContent", "justify-content", ""); | |
296 checkBadValues(element, "justifyContent", "justify-content", "true auto"); | |
297 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); | |
298 checkBadValues(element, "justifyContent", "justify-content", "auto left"); | |
299 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | |
300 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen ter"); | |
301 checkBadValues(element, "justifyContent", "justify-content", "true true"); | |
302 checkBadValues(element, "justifyContent", "justify-content", "true safe"); | |
303 checkBadValues(element, "justifyContent", "justify-content", "center start"); | |
304 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); | |
305 checkBadValues(element, "justifyContent", "justify-content", "true baseline"); | |
306 checkBadValues(element, "justifyContent", "justify-content", "true safe left"); | |
307 checkBadValues(element, "justifyContent", "justify-content", "true left safe"); | |
308 checkBadValues(element, "justifyContent", "justify-content", "left safe true sa fe"); | |
309 checkBadValues(element, "justifyContent", "justify-content", "start space-betwe en"); | |
310 checkBadValues(element, "justifyContent", "justify-content", "safe end stretch" ); | |
311 checkBadValues(element, "justifyContent", "justify-content", "space-around stre tch"); | |
312 checkBadValues(element, "justifyContent", "justify-content", "end start"); | |
313 checkBadValues(element, "justifyContent", "justify-content", "right safe space- evenly"); | |
314 checkBadValues(element, "justifyContent", "justify-content", "true"); | |
315 checkBadValues(element, "justifyContent", "justify-content", "safe"); | |
316 | |
317 debug(""); | |
318 debug("Test the value 'initial'"); | |
319 element.style.display = ""; | |
320 checkInitialValues(element, "justifyContent", "justify-content", "stretch center ", "start"); | |
321 | |
322 debug(""); | |
323 debug("Test the value 'initial' for grid containers"); | |
324 element.style.display = "grid"; | |
325 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start"); | |
326 | |
327 debug(""); | |
328 debug("Test the value 'initial' for flex containers"); | |
329 element.style.display = "flex"; | |
330 checkInitialValues(element, "justifyContent", "justify-content", "right true", " flex-start"); | |
331 | |
332 debug(""); | |
333 debug("Test the value 'inherit'"); | |
334 checkInheritValues("justifyContent", "justify-content", "end"); | |
335 checkInheritValues("justifyContent", "justify-content", "left safe"); | |
336 checkInheritValues("justifyContent", "justify-content", "stretch center"); | |
337 | |
338 </script> | |
339 </body> | |
340 </html> | |
OLD | NEW |