| 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 bad combinations of justify-self"); | 219 debug("Test bad combinations of justify-self"); |
| 220 container = document.createElement("div"); | 220 container = document.createElement("div"); |
| 221 element = document.createElement("div"); | 221 element = document.createElement("div"); |
| 222 container.appendChild(element); | 222 container.appendChild(element); |
| 223 document.body.appendChild(container); | 223 document.body.appendChild(container); |
| (...skipping 19 matching lines...) Expand all Loading... |
| 243 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); | 243 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); |
| 244 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); | 244 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); |
| 245 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); | 245 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); |
| 246 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); | 246 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); |
| 247 checkBadValues(element, "justifySelf", "justify-self", "legacy"); | 247 checkBadValues(element, "justifySelf", "justify-self", "legacy"); |
| 248 checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); | 248 checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); |
| 249 | 249 |
| 250 debug(""); | 250 debug(""); |
| 251 debug("Test the value 'initial'"); | 251 debug("Test the value 'initial'"); |
| 252 container.style.display = ""; | 252 container.style.display = ""; |
| 253 checkInitialValues(element, "justifySelf", "justify-self", "center", "start"); | 253 checkInitialValues(element, "justifySelf", "justify-self", "center", "normal"); |
| 254 | 254 |
| 255 debug(""); | 255 debug(""); |
| 256 debug("Test the value 'initial' for grid containers"); | 256 debug("Test the value 'initial' for grid containers"); |
| 257 container.style.display = "grid"; | 257 container.style.display = "grid"; |
| 258 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "stretch
"); | 258 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal"
); |
| 259 | 259 |
| 260 debug(""); | 260 debug(""); |
| 261 debug("Test the value 'initial' for flex containers"); | 261 debug("Test the value 'initial' for flex containers"); |
| 262 container.style.display = "flex"; | 262 container.style.display = "flex"; |
| 263 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "stre
tch"); | 263 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "norm
al"); |
| 264 | 264 |
| 265 debug(""); | 265 debug(""); |
| 266 debug("Test the value 'initial' for positioned elements"); | 266 debug("Test the value 'initial' for positioned elements"); |
| 267 container.style.display = ""; | 267 container.style.display = ""; |
| 268 element.style.position = "absolute"; | 268 element.style.position = "absolute"; |
| 269 checkInitialValues(element, "justifySelf", "justify-self", "left", "stretch"); | 269 checkInitialValues(element, "justifySelf", "justify-self", "left", "normal"); |
| 270 | 270 |
| 271 debug(""); | 271 debug(""); |
| 272 debug("Test the value 'initial' for positioned elements in grid containers"); | 272 debug("Test the value 'initial' for positioned elements in grid containers"); |
| 273 container.style.display = "grid"; | 273 container.style.display = "grid"; |
| 274 element.style.position = "absolute"; | 274 element.style.position = "absolute"; |
| 275 checkInitialValues(element, "justifySelf", "justify-self", "right", "stretch"); | 275 checkInitialValues(element, "justifySelf", "justify-self", "right", "normal"); |
| 276 | 276 |
| 277 debug(""); | 277 debug(""); |
| 278 debug("Test the value 'initial' for positioned elements in grid containers"); | 278 debug("Test the value 'initial' for positioned elements in grid containers"); |
| 279 container.style.display = "flex"; | 279 container.style.display = "flex"; |
| 280 element.style.position = "absolute"; | 280 element.style.position = "absolute"; |
| 281 checkInitialValues(element, "justifySelf", "justify-self", "end", "stretch"); | 281 checkInitialValues(element, "justifySelf", "justify-self", "end", "normal"); |
| 282 | 282 |
| 283 debug(""); | 283 debug(""); |
| 284 debug("Test the value 'inherit'"); | 284 debug("Test the value 'inherit'"); |
| 285 checkInheritValues("justifySelf", "justify-self", "end"); | 285 checkInheritValues("justifySelf", "justify-self", "end"); |
| 286 checkInheritValues("justifySelf", "justify-self", "left safe"); | 286 checkInheritValues("justifySelf", "justify-self", "left safe"); |
| 287 checkInheritValues("justifySelf", "justify-self", "center unsafe"); | 287 checkInheritValues("justifySelf", "justify-self", "center unsafe"); |
| 288 | 288 |
| 289 </script> | 289 </script> |
| 290 </body> | 290 </body> |
| 291 </html> | 291 </html> |
| OLD | NEW |