Index: LayoutTests/fast/alignment/parse-justify-self.html |
diff --git a/LayoutTests/fast/alignment/parse-justify-self.html b/LayoutTests/fast/alignment/parse-justify-self.html |
index a697cae9940e303c171d1931762e2bb5e54449ec..1b8a605f0cde45c16ee8faf8577d4e429d451e44 100644 |
--- a/LayoutTests/fast/alignment/parse-justify-self.html |
+++ b/LayoutTests/fast/alignment/parse-justify-self.html |
@@ -6,6 +6,10 @@ |
justify-self: baseline; |
} |
+#justifySelfLastBaseline { |
+ justify-self: last-baseline; |
+} |
+ |
#justifySelfStretch { |
justify-self: stretch; |
} |
@@ -38,6 +42,14 @@ |
justify-self: right; |
} |
+#justifySelfFlexStart { |
+ justify-self: flex-start; |
+} |
+ |
+#justifySelfFlexEnd { |
+ justify-self: flex-end; |
+} |
+ |
#justifySelfEndTrue { |
justify-self: end true; |
} |
@@ -61,11 +73,20 @@ |
#justifySelfLeftTrue { |
justify-self: left true; |
} |
+ |
+#justifySelfFlexStartTrue { |
+ justify-self: flex-start true; |
+} |
+ |
+#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> |
@@ -74,6 +95,8 @@ |
<div id="justifySelfSelfEnd"></div> |
<div id="justifySelfLeft"></div> |
<div id="justifySelfRight"></div> |
+<div id="justifySelfFlexStart"></div> |
+<div id="justifySelfFlexEnd"></div> |
<div id="justifySelfEndTrue"></div> |
<div id="justifySelfCenterTrue"></div> |
@@ -81,6 +104,9 @@ |
<div id="justifySelfSelfStartSafe"></div> |
<div id="justifySelfRightSafe"></div> |
<div id="justifySelfLeftTrue"></div> |
+<div id="justifySelfFlexStartTrue"></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'); |
@@ -88,6 +114,9 @@ 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'"); |
@@ -112,6 +141,12 @@ shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') |
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 justifySelfEndTrue = document.getElementById("justifySelfEndTrue"); |
shouldBe("getComputedStyle(justifySelfEndTrue, '').getPropertyValue('justify-self')", "'end true'"); |
@@ -130,106 +165,108 @@ shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-s |
var justifySelfLeftTrue = document.getElementById("justifySelfLeftTrue"); |
shouldBe("getComputedStyle(justifySelfLeftTrue, '').getPropertyValue('justify-self')", "'left true'"); |
+var justifySelfFlexStartTrue = document.getElementById("justifySelfFlexStartTrue"); |
+shouldBe("getComputedStyle(justifySelfFlexStartTrue, '').getPropertyValue('justify-self')", "'flex-start true'"); |
+ |
+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')", "'auto'"); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'"); |
debug(""); |
debug("Test getting and setting justify-self through JS"); |
+container = document.createElement("div"); |
element = document.createElement("div"); |
-document.body.appendChild(element); |
+container.appendChild(element); |
+document.body.appendChild(container); |
element.style.justifySelf = "center"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'"); |
+checkValues(element, "justifySelf", "justify-self", "center", "center"); |
-element = document.createElement("div"); |
-document.body.appendChild(element); |
element.style.justifySelf = "true start"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start true'"); |
+checkValues(element, "justifySelf", "justify-self", "start true", "start true"); |
-element.style.justifySelf = "auto"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "flex-end safe"; |
+checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe"); |
-debug(""); |
-debug("Test bad combinaisons of justify-self"); |
-element = document.createElement("div"); |
-document.body.appendChild(element); |
-element.style.justifySelf = "true auto"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "right"; |
+checkValues(element, "justifySelf", "justify-self", "right", "right"); |
-element.style.justifySelf = "auto safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "auto left"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "baseline safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "baseline center"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "stretch true"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "stretch right"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "true true"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "true"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "true safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
- |
-element.style.justifySelf = "center start"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "center"; |
+checkValues(element, "justifySelf", "justify-self", "center", "center"); |
-element.style.justifySelf = "stretch true"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "self-start"; |
+checkValues(element, "justifySelf", "justify-self", "self-start", "self-start"); |
-element.style.justifySelf = "safe stretch"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "auto"; |
+checkValues(element, "justifySelf", "justify-self", "auto", "start"); |
-element.style.justifySelf = "baseline safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+container.style.display = "flex"; |
+element.style.justifySelf = "auto"; |
+checkValues(element, "justifySelf", "justify-self", "auto", "stretch"); |
-element.style.justifySelf = "true baseline"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+container.style.display = "grid"; |
+element.style.justifySelf = "auto"; |
+checkValues(element, "justifySelf", "justify-self", "auto", "stretch"); |
-element.style.justifySelf = "true safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+element.style.justifySelf = "self-end"; |
+checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); |
-element.style.justifySelf = "true safe left"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+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", "true 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 true"); |
+checkBadValues(element, "justifySelf", "justify-self", "stretch right"); |
+checkBadValues(element, "justifySelf", "justify-self", "true true"); |
+checkBadValues(element, "justifySelf", "justify-self", "true safe"); |
+checkBadValues(element, "justifySelf", "justify-self", "center start"); |
+checkBadValues(element, "justifySelf", "justify-self", "stretch true"); |
+checkBadValues(element, "justifySelf", "justify-self", "safe stretch"); |
+checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
+checkBadValues(element, "justifySelf", "justify-self", "true baseline"); |
+checkBadValues(element, "justifySelf", "justify-self", "true safe left"); |
+checkBadValues(element, "justifySelf", "justify-self", "true left safe"); |
+checkBadValues(element, "justifySelf", "justify-self", "left safe true safe"); |
+checkBadValues(element, "justifySelf", "justify-self", "legacy start"); |
+checkBadValues(element, "justifySelf", "justify-self", "legacy end"); |
+checkBadValues(element, "justifySelf", "justify-self", "legacy right true"); |
+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"); |
-element.style.justifySelf = "true left safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+debug(""); |
+debug("Test the value 'initial'"); |
+checkInitialValues(element, "justifySelf", "justify-self", "", "center"); |
-element.style.justifySelf = "left safe true safe"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+debug(""); |
+debug("Test the value 'initial' for grid containers"); |
+container.style.display = "grid"; |
+checkInitialValues(element, "justifySelf", "justify-self", "grid", "left safe"); |
debug(""); |
-debug("Test the value 'initial'"); |
-element.style.justifySelf = "center"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'"); |
-element.style.justifySelf = "initial"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'"); |
+debug("Test the value 'initial' for flex containers"); |
+container.style.display = "flex"; |
+checkInitialValues(element, "justifySelf", "justify-self", "flex", "right true"); |
debug(""); |
debug("Test the value 'inherit'"); |
-parentElement = document.createElement("div"); |
-document.body.appendChild(parentElement); |
-parentElement.style.justifySelf = "end"; |
-shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-self')", "'end'"); |
+checkInheritValues(element, "justifySelf", "justify-self", "end"); |
+checkInheritValues(element, "justifySelf", "justify-self", "left safe"); |
+checkInheritValues(element, "justifySelf", "justify-self", "center true"); |
-element = document.createElement("div"); |
-parentElement.appendChild(element); |
-element.style.justifySelf = "inherit"; |
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'end'"); |
</script> |
</body> |
</html> |