OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #justifySelfBaseline { | 5 #justifySelfBaseline { |
6 justify-self: baseline; | 6 justify-self: baseline; |
7 } | 7 } |
8 | 8 |
9 #justifySelfLastBaseline { | 9 #justifySelfLastBaseline { |
10 justify-self: last-baseline; | 10 justify-self: last-baseline; |
(...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
168 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUn
safe"); | 168 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUn
safe"); |
169 shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('jus
tify-self')", "'flex-start unsafe'"); | 169 shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('jus
tify-self')", "'flex-start unsafe'"); |
170 | 170 |
171 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe"); | 171 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe"); |
172 shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify
-self')", "'flex-end safe'"); | 172 shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify
-self')", "'flex-end safe'"); |
173 | 173 |
174 debug(""); | 174 debug(""); |
175 debug("Test initial value of justify-self through JS"); | 175 debug("Test initial value of justify-self through JS"); |
176 element = document.createElement("div"); | 176 element = document.createElement("div"); |
177 document.body.appendChild(element); | 177 document.body.appendChild(element); |
178 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'sta
rt'"); | 178 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'nor
mal'"); |
179 | 179 |
180 debug(""); | 180 debug(""); |
181 debug("Test getting and setting justify-self through JS"); | 181 debug("Test getting and setting justify-self through JS"); |
182 container = document.createElement("div"); | 182 container = document.createElement("div"); |
183 element = document.createElement("div"); | 183 element = document.createElement("div"); |
184 container.appendChild(element); | 184 container.appendChild(element); |
185 document.body.appendChild(container); | 185 document.body.appendChild(container); |
186 element.style.justifySelf = "center"; | 186 element.style.justifySelf = "center"; |
187 checkValues(element, "justifySelf", "justify-self", "center", "center"); | 187 checkValues(element, "justifySelf", "justify-self", "center", "center"); |
188 | 188 |
189 element.style.justifySelf = "unsafe start"; | 189 element.style.justifySelf = "unsafe start"; |
190 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsa
fe"); | 190 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsa
fe"); |
191 | 191 |
192 element.style.justifySelf = "flex-end safe"; | 192 element.style.justifySelf = "flex-end safe"; |
193 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end
safe"); | 193 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end
safe"); |
194 | 194 |
195 element.style.justifySelf = "right"; | 195 element.style.justifySelf = "right"; |
196 checkValues(element, "justifySelf", "justify-self", "right", "right"); | 196 checkValues(element, "justifySelf", "justify-self", "right", "right"); |
197 | 197 |
198 element.style.justifySelf = "center"; | 198 element.style.justifySelf = "center"; |
199 checkValues(element, "justifySelf", "justify-self", "center", "center"); | 199 checkValues(element, "justifySelf", "justify-self", "center", "center"); |
200 | 200 |
201 element.style.justifySelf = "self-start"; | 201 element.style.justifySelf = "self-start"; |
202 checkValues(element, "justifySelf", "justify-self", "self-start", "self-start")
; | 202 checkValues(element, "justifySelf", "justify-self", "self-start", "self-start")
; |
203 | 203 |
204 element.style.justifySelf = "auto"; | 204 element.style.justifySelf = "auto"; |
205 checkValues(element, "justifySelf", "justify-self", "auto", "start"); | 205 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
206 | 206 |
207 container.style.display = "flex"; | 207 container.style.display = "flex"; |
208 element.style.justifySelf = "auto"; | 208 element.style.justifySelf = "auto"; |
209 checkValues(element, "justifySelf", "justify-self", "auto", "stretch"); | 209 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
210 | 210 |
211 container.style.display = "grid"; | 211 container.style.display = "grid"; |
212 element.style.justifySelf = "auto"; | 212 element.style.justifySelf = "auto"; |
213 checkValues(element, "justifySelf", "justify-self", "auto", "stretch"); | 213 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
214 | 214 |
215 element.style.justifySelf = "self-end"; | 215 element.style.justifySelf = "self-end"; |
216 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); | 216 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); |
217 | 217 |
218 debug(""); | 218 debug(""); |
| 219 debug("Test 'auto' value resolution for the root node"); |
| 220 document.documentElement.style.justifySelf = "auto"; |
| 221 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "n
ormal"); |
| 222 |
| 223 debug(""); |
219 debug("Test bad combinations of justify-self"); | 224 debug("Test bad combinations of justify-self"); |
220 container = document.createElement("div"); | 225 container = document.createElement("div"); |
221 element = document.createElement("div"); | 226 element = document.createElement("div"); |
222 container.appendChild(element); | 227 container.appendChild(element); |
223 document.body.appendChild(container); | 228 document.body.appendChild(container); |
224 | 229 |
225 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto"); | 230 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto"); |
226 checkBadValues(element, "justifySelf", "justify-self", "auto safe"); | 231 checkBadValues(element, "justifySelf", "justify-self", "auto safe"); |
227 checkBadValues(element, "justifySelf", "justify-self", "auto left"); | 232 checkBadValues(element, "justifySelf", "justify-self", "auto left"); |
228 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); | 233 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
(...skipping 14 matching lines...) Expand all Loading... |
243 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); | 248 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); |
244 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); | 249 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); |
245 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); | 250 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); |
246 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); | 251 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); |
247 checkBadValues(element, "justifySelf", "justify-self", "legacy"); | 252 checkBadValues(element, "justifySelf", "justify-self", "legacy"); |
248 checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); | 253 checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); |
249 | 254 |
250 debug(""); | 255 debug(""); |
251 debug("Test the value 'initial'"); | 256 debug("Test the value 'initial'"); |
252 container.style.display = ""; | 257 container.style.display = ""; |
253 checkInitialValues(element, "justifySelf", "justify-self", "center", "start"); | 258 checkInitialValues(element, "justifySelf", "justify-self", "center", "normal"); |
254 | 259 |
255 debug(""); | 260 debug(""); |
256 debug("Test the value 'initial' for grid containers"); | 261 debug("Test the value 'initial' for grid containers"); |
257 container.style.display = "grid"; | 262 container.style.display = "grid"; |
258 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "stretch
"); | 263 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal"
); |
259 | 264 |
260 debug(""); | 265 debug(""); |
261 debug("Test the value 'initial' for flex containers"); | 266 debug("Test the value 'initial' for flex containers"); |
262 container.style.display = "flex"; | 267 container.style.display = "flex"; |
263 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "stre
tch"); | 268 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "norm
al"); |
264 | 269 |
265 debug(""); | 270 debug(""); |
266 debug("Test the value 'initial' for positioned elements"); | 271 debug("Test the value 'initial' for positioned elements"); |
267 container.style.display = ""; | 272 container.style.display = ""; |
268 element.style.position = "absolute"; | 273 element.style.position = "absolute"; |
269 checkInitialValues(element, "justifySelf", "justify-self", "left", "stretch"); | 274 checkInitialValues(element, "justifySelf", "justify-self", "left", "normal"); |
270 | 275 |
271 debug(""); | 276 debug(""); |
272 debug("Test the value 'initial' for positioned elements in grid containers"); | 277 debug("Test the value 'initial' for positioned elements in grid containers"); |
273 container.style.display = "grid"; | 278 container.style.display = "grid"; |
274 element.style.position = "absolute"; | 279 element.style.position = "absolute"; |
275 checkInitialValues(element, "justifySelf", "justify-self", "right", "stretch"); | 280 checkInitialValues(element, "justifySelf", "justify-self", "right", "normal"); |
276 | 281 |
277 debug(""); | 282 debug(""); |
278 debug("Test the value 'initial' for positioned elements in grid containers"); | 283 debug("Test the value 'initial' for positioned elements in grid containers"); |
279 container.style.display = "flex"; | 284 container.style.display = "flex"; |
280 element.style.position = "absolute"; | 285 element.style.position = "absolute"; |
281 checkInitialValues(element, "justifySelf", "justify-self", "end", "stretch"); | 286 checkInitialValues(element, "justifySelf", "justify-self", "end", "normal"); |
282 | 287 |
283 debug(""); | 288 debug(""); |
284 debug("Test the value 'inherit'"); | 289 debug("Test the value 'inherit'"); |
285 checkInheritValues("justifySelf", "justify-self", "end"); | 290 checkInheritValues("justifySelf", "justify-self", "end"); |
286 checkInheritValues("justifySelf", "justify-self", "left safe"); | 291 checkInheritValues("justifySelf", "justify-self", "left safe"); |
287 checkInheritValues("justifySelf", "justify-self", "center unsafe"); | 292 checkInheritValues("justifySelf", "justify-self", "center unsafe"); |
288 | 293 |
289 </script> | 294 </script> |
290 </body> | 295 </body> |
291 </html> | 296 </html> |
OLD | NEW |