| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #justifyItemsBaseline { |
| justify-items: baseline; |
| } |
| |
| #justifyItemsLastBaseline { |
| justify-items: last-baseline; |
| } |
| |
| #justifyItemsStretch { |
| justify-items: stretch; |
| } |
| |
| #justifyItemsStart { |
| justify-items: start; |
| } |
| |
| #justifyItemsEnd { |
| justify-items: end; |
| } |
| |
| #justifyItemsCenter { |
| justify-items: center; |
| } |
| |
| #justifyItemsSelfStart { |
| justify-items: self-start; |
| } |
| |
| #justifyItemsSelfEnd { |
| justify-items: self-end; |
| } |
| |
| #justifyItemsLeft { |
| justify-items: left; |
| } |
| |
| #justifyItemsRight { |
| justify-items: right; |
| } |
| |
| #justifyItemsFlexStart { |
| justify-items: flex-start; |
| } |
| |
| #justifyItemsFlexEnd { |
| justify-items: flex-end; |
| } |
| |
| #justifyItemsEndUnsafe { |
| justify-items: end unsafe; |
| } |
| |
| #justifyItemsCenterUnsafe { |
| justify-items: center unsafe; |
| } |
| |
| #justifyItemsSelfEndSafe { |
| justify-items: self-end safe; |
| } |
| |
| #justifyItemsSelfStartSafe { |
| justify-items: self-start safe; |
| } |
| |
| #justifyItemsRightSafe { |
| justify-items: right safe; |
| } |
| |
| #justifyItemsLeftUnsafe { |
| justify-items: left unsafe; |
| } |
| |
| #justifyItemsFlexStartUnsafe { |
| justify-items: flex-start unsafe; |
| } |
| |
| #justifyItemsFlexEndSafe { |
| justify-items: flex-end safe; |
| } |
| |
| #justifyItemsLegacyLeft { |
| justify-items: legacy left; |
| } |
| |
| #justifyItemsLegacyCenter { |
| justify-items: legacy center; |
| } |
| |
| #justifyItemsLegacyRight { |
| justify-items: legacy right; |
| } |
| |
| #justifyItemsLeftLegacy { |
| justify-items: left legacy; |
| } |
| |
| #justifyItemsCenterLegacy { |
| justify-items: center legacy; |
| } |
| |
| #justifyItemsRightLegacy { |
| justify-items: right legacy; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="justifyItemsBaseline"></div> |
| <div id="justifyItemsLastBaseline"></div> |
| <div id="justifyItemsStretch"></div> |
| <div id="justifyItemsStart"></div> |
| <div id="justifyItemsEnd"></div> |
| <div id="justifyItemsCenter"></div> |
| <div id="justifyItemsSelfStart"></div> |
| <div id="justifyItemsSelfEnd"></div> |
| <div id="justifyItemsLeft"></div> |
| <div id="justifyItemsRight"></div> |
| <div id="justifyItemsFlexStart"></div> |
| <div id="justifyItemsFlexEnd"></div> |
| |
| <div id="justifyItemsEndUnsafe"></div> |
| <div id="justifyItemsCenterUnsafe"></div> |
| <div id="justifyItemsSelfEndSafe"></div> |
| <div id="justifyItemsSelfStartSafe"></div> |
| <div id="justifyItemsRightSafe"></div> |
| <div id="justifyItemsLeftUnsafe"></div> |
| <div id="justifyItemsFlexStartUnsafe"></div> |
| <div id="justifyItemsFlexEndSafe"></div> |
| <div id="justifyItemsLegacyLeft"></div> |
| <div id="justifyItemsLegacyCenter"></div> |
| <div id="justifyItemsLegacyRight"></div> |
| <div id="justifyItemsLeftLegacy"></div> |
| <div id="justifyItemsCenterLegacy"></div> |
| <div id="justifyItemsRightLegacy"></div> |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting justify-items works as expected'); |
| |
| debug("Test getting justify-items set through CSS"); |
| var justifyItemsBaseline = document.getElementById("justifyItemsBaseline"); |
| shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'"); |
| |
| var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline"); |
| shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'"); |
| |
| var justifyItemsStretch = document.getElementById("justifyItemsStretch"); |
| shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'"); |
| |
| var justifyItemsStart = document.getElementById("justifyItemsStart"); |
| shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'"); |
| |
| var justifyItemsEnd = document.getElementById("justifyItemsEnd"); |
| shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'"); |
| |
| var justifyItemsCenter = document.getElementById("justifyItemsCenter"); |
| shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'"); |
| |
| var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd"); |
| shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'"); |
| |
| var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart"); |
| shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'"); |
| |
| var justifyItemsLeft = document.getElementById("justifyItemsLeft"); |
| shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'"); |
| |
| var justifyItemsRight = document.getElementById("justifyItemsRight"); |
| shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'"); |
| |
| var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); |
| shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'"); |
| |
| var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); |
| shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'"); |
| |
| var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe"); |
| shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items')", "'end unsafe'"); |
| |
| var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe"); |
| shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items')", "'center unsafe'"); |
| |
| var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe"); |
| shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'"); |
| |
| var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe"); |
| shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'"); |
| |
| var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); |
| shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'"); |
| |
| var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe"); |
| shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items')", "'left unsafe'"); |
| |
| var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe"); |
| shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items')", "'flex-start unsafe'"); |
| |
| var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe"); |
| shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'"); |
| |
| var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); |
| shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'"); |
| |
| var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter"); |
| shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'"); |
| |
| var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight"); |
| shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'"); |
| |
| var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy"); |
| shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'"); |
| |
| var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy"); |
| shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'"); |
| |
| var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy"); |
| shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'"); |
| |
| debug(""); |
| debug("Test initial value of justify-items through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
| |
| debug(""); |
| debug("Test getting and setting justify-items through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.justifyItems = "center"; |
| checkValues(element, "justifyItems", "justify-items", "center", "center"); |
| |
| element.style.justifyItems = "unsafe start"; |
| checkValues(element, "justifyItems", "justify-items", "start unsafe", "start unsafe"); |
| |
| element.style.justifyItems = "flex-end safe"; |
| checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-end safe"); |
| |
| element.style.justifyItems = "right legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right"); |
| |
| element.style.justifyItems = "center legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| |
| element.style.justifyItems = "left legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left"); |
| |
| element.style.justifyItems = "auto"; |
| checkValues(element, "justifyItems", "justify-items", "auto", "start"); |
| |
| element.style.display = "flex"; |
| element.style.justifyItems = "auto"; |
| checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); |
| |
| element.style.display = "grid"; |
| element.style.justifyItems = "auto"; |
| checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); |
| |
| element.style.justifyItems = "self-end"; |
| checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); |
| |
| debug(""); |
| debug("Test bad combinations of justify-items"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); |
| checkBadValues(element, "justifyItems", "justify-items", "auto safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "auto left"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline center"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch right"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "center start"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy start"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy end"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); |
| |
| debug(""); |
| debug("Test the value 'initial'"); |
| element.style.display = ""; |
| checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "start"); |
| |
| debug(""); |
| debug("Test the value 'initial' for grid containers"); |
| element.style.display = "grid"; |
| checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch"); |
| |
| debug(""); |
| debug("Test the value 'initial' for flex containers"); |
| element.style.display = "flex"; |
| checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "stretch"); |
| |
| debug(""); |
| debug("Test the value 'inherit'"); |
| checkInheritValues("justifyItems", "justify-items", "end"); |
| checkInheritValues("justifyItems", "justify-items", "left safe"); |
| checkInheritValues("justifyItems", "justify-items", "legacy center"); |
| |
| debug(""); |
| debug("Test the value 'legacy'"); |
| checkLegacyValues("justifyItems", "justify-items", "legacy left"); |
| checkLegacyValues("justifyItems", "justify-items", "legacy center"); |
| checkLegacyValues("justifyItems", "justify-items", "legacy right"); |
| |
| </script> |
| </body> |
| </html> |
