| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #justifySelfBaseline { |
| justify-self: baseline; |
| } |
| |
| #justifySelfLastBaseline { |
| justify-self: last-baseline; |
| } |
| |
| #justifySelfStretch { |
| justify-self: stretch; |
| } |
| |
| #justifySelfStart { |
| justify-self: start; |
| } |
| |
| #justifySelfEnd { |
| justify-self: end; |
| } |
| |
| #justifySelfCenter { |
| justify-self: center; |
| } |
| |
| #justifySelfSelfStart { |
| justify-self: self-start; |
| } |
| |
| #justifySelfSelfEnd { |
| justify-self: self-end; |
| } |
| |
| #justifySelfLeft { |
| justify-self: left; |
| } |
| |
| #justifySelfRight { |
| justify-self: right; |
| } |
| |
| #justifySelfFlexStart { |
| justify-self: flex-start; |
| } |
| |
| #justifySelfFlexEnd { |
| justify-self: flex-end; |
| } |
| |
| #justifySelfEndUnsafe { |
| justify-self: end unsafe; |
| } |
| |
| #justifySelfCenterUnsafe { |
| justify-self: center unsafe; |
| } |
| |
| #justifySelfSelfEndSafe { |
| justify-self: self-end safe; |
| } |
| |
| #justifySelfSelfStartSafe { |
| justify-self: self-start safe; |
| } |
| |
| #justifySelfRightSafe { |
| justify-self: right safe; |
| } |
| |
| #justifySelfLeftUnsafe { |
| justify-self: left unsafe; |
| } |
| |
| #justifySelfFlexStartUnsafe { |
| justify-self: flex-start unsafe; |
| } |
| |
| #justifySelfFlexEndSafe { |
| justify-self: flex-end safe; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="justifySelfBaseline"></div> |
| <div id="justifySelfLastBaseline"></div> |
| <div id="justifySelfStretch"></div> |
| <div id="justifySelfStart"></div> |
| <div id="justifySelfEnd"></div> |
| <div id="justifySelfCenter"></div> |
| <div id="justifySelfSelfStart"></div> |
| <div id="justifySelfSelfEnd"></div> |
| <div id="justifySelfLeft"></div> |
| <div id="justifySelfRight"></div> |
| <div id="justifySelfFlexStart"></div> |
| <div id="justifySelfFlexEnd"></div> |
| |
| <div id="justifySelfEndUnsafe"></div> |
| <div id="justifySelfCenterUnsafe"></div> |
| <div id="justifySelfSelfEndSafe"></div> |
| <div id="justifySelfSelfStartSafe"></div> |
| <div id="justifySelfRightSafe"></div> |
| <div id="justifySelfLeftUnsafe"></div> |
| <div id="justifySelfFlexStartUnsafe"></div> |
| <div id="justifySelfFlexEndSafe"></div> |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting justify-self works as expected'); |
| |
| debug("Test getting justify-self set through CSS"); |
| var justifySelfBaseline = document.getElementById("justifySelfBaseline"); |
| shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self')", "'baseline'"); |
| |
| var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline"); |
| shouldBe("getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self')", "'last-baseline'"); |
| |
| var justifySelfStretch = document.getElementById("justifySelfStretch"); |
| shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self')", "'stretch'"); |
| |
| var justifySelfStart = document.getElementById("justifySelfStart"); |
| shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self')", "'start'"); |
| |
| var justifySelfEnd = document.getElementById("justifySelfEnd"); |
| shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self')", "'end'"); |
| |
| var justifySelfCenter = document.getElementById("justifySelfCenter"); |
| shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self')", "'center'"); |
| |
| var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd"); |
| shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self')", "'self-end'"); |
| |
| var justifySelfSelfStart = document.getElementById("justifySelfSelfStart"); |
| shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self')", "'self-start'"); |
| |
| var justifySelfLeft = document.getElementById("justifySelfLeft"); |
| shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self')", "'left'"); |
| |
| var justifySelfRight = document.getElementById("justifySelfRight"); |
| shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self')", "'right'"); |
| |
| var justifySelfFlexStart = document.getElementById("justifySelfFlexStart"); |
| shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self')", "'flex-start'"); |
| |
| var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd"); |
| shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self')", "'flex-end'"); |
| |
| var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe"); |
| shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self')", "'end unsafe'"); |
| |
| var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe"); |
| shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self')", "'center unsafe'"); |
| |
| var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe"); |
| shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self')", "'self-end safe'"); |
| |
| var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe"); |
| shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self')", "'self-start safe'"); |
| |
| var justifySelfRightSafe = document.getElementById("justifySelfRightSafe"); |
| shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self')", "'right safe'"); |
| |
| var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe"); |
| shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self')", "'left unsafe'"); |
| |
| var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe"); |
| shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self')", "'flex-start unsafe'"); |
| |
| var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe"); |
| shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self')", "'flex-end safe'"); |
| |
| debug(""); |
| debug("Test initial value of justify-self through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'normal'"); |
| |
| debug(""); |
| debug("Test getting and setting justify-self through JS"); |
| container = document.createElement("div"); |
| element = document.createElement("div"); |
| container.appendChild(element); |
| document.body.appendChild(container); |
| element.style.justifySelf = "center"; |
| checkValues(element, "justifySelf", "justify-self", "center", "center"); |
| |
| element.style.justifySelf = "unsafe start"; |
| checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe"); |
| |
| element.style.justifySelf = "flex-end safe"; |
| checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe"); |
| |
| element.style.justifySelf = "right"; |
| checkValues(element, "justifySelf", "justify-self", "right", "right"); |
| |
| element.style.justifySelf = "center"; |
| checkValues(element, "justifySelf", "justify-self", "center", "center"); |
| |
| element.style.justifySelf = "self-start"; |
| checkValues(element, "justifySelf", "justify-self", "self-start", "self-start"); |
| |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
| |
| container.style.display = "flex"; |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
| |
| container.style.display = "grid"; |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "normal"); |
| |
| element.style.justifySelf = "self-end"; |
| checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); |
| |
| debug(""); |
| debug("Test 'auto' value resolution for the root node"); |
| document.documentElement.style.justifySelf = "auto"; |
| checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Test bad combinations of justify-self"); |
| container = document.createElement("div"); |
| element = document.createElement("div"); |
| container.appendChild(element); |
| document.body.appendChild(container); |
| |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe auto"); |
| checkBadValues(element, "justifySelf", "justify-self", "auto safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "auto left"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline center"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch right"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "center start"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "safe stretch"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy start"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy end"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); |
| |
| debug(""); |
| debug("Test the value 'initial'"); |
| container.style.display = ""; |
| checkInitialValues(element, "justifySelf", "justify-self", "center", "normal"); |
| |
| debug(""); |
| debug("Test the value 'initial' for grid containers"); |
| container.style.display = "grid"; |
| checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal"); |
| |
| debug(""); |
| debug("Test the value 'initial' for flex containers"); |
| container.style.display = "flex"; |
| checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal"); |
| |
| debug(""); |
| debug("Test the value 'initial' for positioned elements"); |
| container.style.display = ""; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "left", "normal"); |
| |
| debug(""); |
| debug("Test the value 'initial' for positioned elements in grid containers"); |
| container.style.display = "grid"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "right", "normal"); |
| |
| debug(""); |
| debug("Test the value 'initial' for positioned elements in grid containers"); |
| container.style.display = "flex"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "end", "normal"); |
| |
| debug(""); |
| debug("Test the value 'inherit'"); |
| checkInheritValues("justifySelf", "justify-self", "end"); |
| checkInheritValues("justifySelf", "justify-self", "left safe"); |
| checkInheritValues("justifySelf", "justify-self", "center unsafe"); |
| |
| </script> |
| </body> |
| </html> |
