Index: LayoutTests/fast/alignment/parse-justify-content.html |
diff --git a/LayoutTests/fast/alignment/parse-justify-content.html b/LayoutTests/fast/alignment/parse-justify-content.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cad2a52effc5dfdad7c4149d7a1a0fca7bd72bf3 |
--- /dev/null |
+++ b/LayoutTests/fast/alignment/parse-justify-content.html |
@@ -0,0 +1,339 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<style> |
+#justifyContentAuto { |
+ justify-content: auto; |
+} |
+ |
+#justifyContentBaseline { |
+ justify-content: baseline; |
+} |
+ |
+#justifyContentLastBaseline { |
+ justify-content: last-baseline; |
+} |
+ |
+#justifyContentSpaceBetween { |
+ justify-content: space-between; |
+} |
+ |
+#justifyContentSpaceAround { |
+ justify-content: space-around; |
+} |
+ |
+#justifyContentSpaceEvenly { |
+ justify-content: space-evenly; |
+} |
+ |
+#justifyContentStretch { |
+ justify-content: stretch; |
+} |
+ |
+#justifyContentSpaceBetweenSafe { |
+ justify-content: space-between safe; |
+} |
+ |
+#justifyContentSpaceAroundTrue { |
+ justify-content: space-around true; |
+} |
+ |
+#justifyContentStretchTrue { |
+ justify-content: stretch true; |
+} |
+ |
+#justifyContentStart { |
+ justify-content: start; |
+} |
+ |
+#justifyContentEnd { |
+ justify-content: end; |
+} |
+ |
+#justifyContentCenter { |
+ justify-content: center; |
+} |
+ |
+#justifyContentLeft { |
+ justify-content: left; |
+} |
+ |
+#justifyContentRight { |
+ justify-content: right; |
+} |
+ |
+#justifyContentFlexStart { |
+ justify-content: flex-start; |
+} |
+ |
+#justifyContentFlexEnd { |
+ justify-content: flex-end; |
+} |
+ |
+#justifyContentEndTrue { |
+ justify-content: end true; |
+} |
+ |
+#justifyContentCenterTrue { |
+ justify-content: center true; |
+} |
+ |
+#justifyContentRightSafe { |
+ justify-content: right safe; |
+} |
+ |
+#justifyContentLeftTrue { |
+ justify-content: left true; |
+} |
+ |
+#justifyContentFlexStartTrue { |
+ justify-content: flex-start true; |
+} |
+ |
+#justifyContentFlexEndSafe { |
+ justify-content: flex-end safe; |
+} |
+ |
+#justifyContentSpaceBetweenLeft { |
+ justify-content: space-between left; |
+} |
+ |
+#justifyContentSpaceAroundCenter { |
+ justify-content: space-around center; |
+} |
+ |
+#justifyContentSpaceEvenlyRight { |
+ justify-content: space-evenly right; |
+} |
+ |
+#justifyContentStretchStartSafe { |
+ justify-content: stretch start safe; |
+} |
+ |
+#justifyContentSpaceAroundEndTrue { |
+ justify-content: space-around end true; |
+} |
+ |
+#justifyContentSpaceEvenlyFlexStartSafe { |
+ justify-content: space-evenly flex-start safe; |
+} |
+ |
+</style> |
+<script src="../../resources/js-test.js"></script> |
+</head> |
+<body> |
+<div id="justifyContentAuto"></div> |
+<div id="justifyContentBaseline"></div> |
+<div id="justifyContentLastBaseline"></div> |
+<div id="justifyContentSpaceBetween"></div> |
+<div id="justifyContentSpaceAround"></div> |
+<div id="justifyContentSpaceEvenly"></div> |
+<div id="justifyContentStretch"></div> |
+<div id="justifyContentSpaceBetweenSafe"></div> |
+<div id="justifyContentSpaceAroundTrue"></div> |
+<div id="justifyContentStretchTrue"></div> |
+<div id="justifyContentStretchrue"></div> |
+<div id="justifyContentStart"></div> |
+<div id="justifyContentEnd"></div> |
+<div id="justifyContentCenter"></div> |
+<div id="justifyContentLeft"></div> |
+<div id="justifyContentRight"></div> |
+<div id="justifyContentFlexStart"></div> |
+<div id="justifyContentFlexEnd"></div> |
+<div id="justifyContentEndTrue"></div> |
+<div id="justifyContentCenterTrue"></div> |
+<div id="justifyContentRightSafe"></div> |
+<div id="justifyContentLeftTrue"></div> |
+<div id="justifyContentFlexStartTrue"></div> |
+<div id="justifyContentFlexEndSafe"></div> |
+<div id="justifyContentSpaceBetweenLeft"></div> |
+<div id="justifyContentSpaceAroundCenter"></div> |
+<div id="justifyContentSpaceEvenlyRight"></div> |
+<div id="justifyContentStretchStartSafe"></div> |
+<div id="justifyContentSpaceAroundEndTrue"></div> |
+<div id="justifyContentSpaceEvenlyFlexStartSafe"></div> |
+ |
+<script src="resources/alignment-parsing-utils.js"></script> |
+<script> |
+description('Test that setting and getting justify-content works as expected'); |
+ |
+debug("Test getting justify-content set through CSS"); |
+var justifyContentAuto = document.getElementById("justifyContentAuto"); |
+shouldBe("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "'start'"); |
+ |
+var justifyContentBaseline = document.getElementById("justifyContentBaseline"); |
+shouldBe("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "'baseline'"); |
+ |
+var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline"); |
+shouldBe("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "'last-baseline'"); |
+ |
+var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween"); |
+shouldBe("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "'space-between'"); |
+ |
+var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround"); |
+shouldBe("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "'space-around'"); |
+ |
+var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly"); |
+shouldBe("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "'space-evenly'"); |
+ |
+var justifyContentStretch = document.getElementById("justifyContentStretch"); |
+shouldBe("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "'stretch'"); |
+ |
+var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe"); |
+shouldBe("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "'space-between safe'"); |
+ |
+var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpaceAroundTrue"); |
+shouldBe("getComputedStyle(justifyContentSpaceAroundTrue, '').getPropertyValue('justify-content')", "'space-around true'"); |
+ |
+var justifyContentStretchTrue = document.getElementById("justifyContentStretchTrue"); |
+shouldBe("getComputedStyle(justifyContentStretchTrue, '').getPropertyValue('justify-content')", "'stretch true'"); |
+ |
+var justifyContentStart = document.getElementById("justifyContentStart"); |
+shouldBe("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "'start'"); |
+ |
+var justifyContentEnd = document.getElementById("justifyContentEnd"); |
+shouldBe("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "'end'"); |
+ |
+var justifyContentCenter = document.getElementById("justifyContentCenter"); |
+shouldBe("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "'center'"); |
+ |
+var justifyContentLeft = document.getElementById("justifyContentLeft"); |
+shouldBe("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "'left'"); |
+ |
+var justifyContentRight = document.getElementById("justifyContentRight"); |
+shouldBe("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "'right'"); |
+ |
+var justifyContentFlexStart = document.getElementById("justifyContentFlexStart"); |
+shouldBe("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "'flex-start'"); |
+ |
+var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); |
+shouldBe("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "'flex-end'"); |
+ |
+var justifyContentEndTrue = document.getElementById("justifyContentEndTrue"); |
+shouldBe("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify-content')", "'end true'"); |
+ |
+var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue"); |
+shouldBe("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justify-content')", "'center true'"); |
+ |
+var justifyContentRightSafe = document.getElementById("justifyContentRightSafe"); |
+shouldBe("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "'right safe'"); |
+ |
+var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue"); |
+shouldBe("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify-content')", "'left true'"); |
+ |
+var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexStartTrue"); |
+shouldBe("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('justify-content')", "'flex-start true'"); |
+ |
+var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe"); |
+shouldBe("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "'flex-end safe'"); |
+ |
+var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft"); |
+shouldBe("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "'space-between left'"); |
+ |
+var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter"); |
+shouldBe("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "'space-around center'"); |
+ |
+var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight"); |
+shouldBe("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "'space-evenly right'"); |
+ |
+var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe"); |
+shouldBe("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "'stretch start safe'"); |
+ |
+var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSpaceAroundEndTrue"); |
+shouldBe("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValue('justify-content')", "'space-around end true'"); |
+ |
+var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe"); |
+shouldBe("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "'space-evenly flex-start safe'"); |
+ |
+debug(""); |
+debug("Test initial value of justify-content through JS"); |
+element = document.createElement("div"); |
+document.body.appendChild(element); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-content')", "'start'"); |
+ |
+debug(""); |
+debug("Test getting and setting justify-content through JS"); |
+element = document.createElement("div"); |
+document.body.appendChild(element); |
+element.style.justifyContent = "center"; |
+checkValues(element, "justifyContent", "justify-content", "center", "center"); |
+ |
+element.style.justifyContent = "true start"; |
+checkValues(element, "justifyContent", "justify-content", "start true", "start true"); |
+ |
+element.style.justifyContent = "flex-end safe"; |
+checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe"); |
+ |
+element.style.justifyContent = "space-between right safe"; |
+checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe"); |
+ |
+element.style.justifyContent = "stretch center"; |
+checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center"); |
+ |
+element.style.justifyContent = "true space-around"; |
+checkValues(element, "justifyContent", "justify-content", "space-around true", "space-around true"); |
+ |
+element.style.justifyContent = "auto"; |
+checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
+ |
+element.style.display = "flex"; |
+element.style.justifyContent = "auto"; |
+checkValues(element, "justifyContent", "justify-content", "auto", "flex-start"); |
+ |
+element.style.display = "grid"; |
+element.style.justifyContent = "auto"; |
+checkValues(element, "justifyContent", "justify-content", "auto", "start"); |
+ |
+element.style.justifyContent = "flex-end"; |
+checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end"); |
+ |
+debug(""); |
+debug("Test bad combinations of justify-content"); |
+element = document.createElement("div"); |
+document.body.appendChild(element); |
+ |
+checkBadValues(element, "justifyContent", "justify-content", "true auto"); |
+checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
+checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "last baseline center"); |
+checkBadValues(element, "justifyContent", "justify-content", "true true"); |
+checkBadValues(element, "justifyContent", "justify-content", "true safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "center start"); |
+checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "true baseline"); |
+checkBadValues(element, "justifyContent", "justify-content", "true safe left"); |
+checkBadValues(element, "justifyContent", "justify-content", "true left safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "left safe true safe"); |
+checkBadValues(element, "justifyContent", "justify-content", "start space-between"); |
+checkBadValues(element, "justifyContent", "justify-content", "safe end stretch"); |
+checkBadValues(element, "justifyContent", "justify-content", "space-around stretch"); |
+checkBadValues(element, "justifyContent", "justify-content", "end start"); |
+checkBadValues(element, "justifyContent", "justify-content", "right safe space-evenly"); |
+checkBadValues(element, "justifyContent", "justify-content", "true"); |
+checkBadValues(element, "justifyContent", "justify-content", "safe"); |
+ |
+debug(""); |
+debug("Test the value 'initial'"); |
+element.style.display = ""; |
+checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start"); |
+ |
+debug(""); |
+debug("Test the value 'initial' for grid containers"); |
+element.style.display = "grid"; |
+checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start"); |
+ |
+debug(""); |
+debug("Test the value 'initial' for flex containers"); |
+element.style.display = "flex"; |
+checkInitialValues(element, "justifyContent", "justify-content", "right true", "flex-start"); |
+ |
+debug(""); |
+debug("Test the value 'inherit'"); |
+checkInheritValues("justifyContent", "justify-content", "end"); |
+checkInheritValues("justifyContent", "justify-content", "left safe"); |
+checkInheritValues("justifyContent", "justify-content", "stretch center"); |
+ |
+</script> |
+</body> |
+</html> |