| 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 |