Index: LayoutTests/fast/alignment/parse-justify-items.html |
diff --git a/LayoutTests/fast/alignment/parse-justify-items.html b/LayoutTests/fast/alignment/parse-justify-items.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8c10a2cdd26357cb28e3ff2c80b6c389adf1b095 |
--- /dev/null |
+++ b/LayoutTests/fast/alignment/parse-justify-items.html |
@@ -0,0 +1,403 @@ |
+<!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; |
+} |
+ |
+#justifyItemsEndTrue { |
+ justify-items: end true; |
+} |
+ |
+#justifyItemsCenterTrue { |
+ justify-items: center true; |
+} |
+ |
+#justifyItemsSelfEndSafe { |
+ justify-items: self-end safe; |
+} |
+ |
+#justifyItemsSelfStartSafe { |
+ justify-items: self-start safe; |
+} |
+ |
+#justifyItemsRightSafe { |
+ justify-items: right safe; |
+} |
+ |
+#justifyItemsLeftTrue { |
+ justify-items: left true; |
+} |
+ |
+#justifyItemsFlexStartTrue { |
+ justify-items: flex-start true; |
+} |
+ |
+#justifyItemsFlexEndSafe { |
+ justify-items: flex-end safe; |
+} |
+ |
+#justifyItemsLegacyLeft { |
+ justify-items: legacy left; |
+} |
+ |
+#justifyItemsLegacyCenter { |
+ justify-items: legacy center; |
+} |
+ |
+#justifyItemsLegacyRight { |
+ justify-items: legacy right; |
+} |
Julien - ping for review
2014/06/26 17:37:20
Your test coverage still doesn't cover the case [
jfernandez
2014/06/26 22:36:05
Done.
|
+</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="justifyItemsEndTrue"></div> |
+<div id="justifyItemsCenterTrue"></div> |
+<div id="justifyItemsSelfEndSafe"></div> |
+<div id="justifyItemsSelfStartSafe"></div> |
+<div id="justifyItemsRightSafe"></div> |
+<div id="justifyItemsLeftTrue"></div> |
+<div id="justifyItemsFlexStartTrue"></div> |
+<div id="justifyItemsFlexEndSafe"></div> |
+<div id="justifyItemsLegacyLeft"></div> |
+<div id="justifyItemsLegacyCenter"></div> |
+<div id="justifyItemsLegacyRight"></div> |
+<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 justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue"); |
+shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-items')", "'end true'"); |
+ |
+var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue"); |
+shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify-items')", "'center true'"); |
+ |
+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 justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue"); |
+shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-items')", "'left true'"); |
+ |
+var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTrue"); |
+shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('justify-items')", "'flex-start true'"); |
+ |
+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'"); |
+ |
+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"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'center'"); |
+shouldBe("element.style.justifyItems", "'center'"); |
+ |
+element.style.justifyItems = "true start"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start true'"); |
+shouldBe("element.style.justifyItems", "'start true'"); |
+ |
+element.style.justifyItems = "flex-end safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'flex-end safe'"); |
+shouldBe("element.style.justifyItems", "'flex-end safe'"); |
Julien - ping for review
2014/06/26 17:37:20
Nit: Refactor these 2 lines repeated a lot into a
jfernandez
2014/06/26 22:36:05
Done.
|
+ |
+element.style.justifyItems = "legacy center"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'legacy center'"); |
+shouldBe("element.style.justifyItems", "'legacy center'"); |
+ |
+element.style.justifyItems = "left legacy"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'legacy left'"); |
+shouldBe("element.style.justifyItems", "'legacy left'"); |
+ |
+element.style.justifyItems = "auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "'auto'"); |
+ |
+element.style.display = "flex"; |
+element.style.justifyItems = "auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'"); |
+shouldBe("element.style.justifyItems", "'auto'"); |
+ |
+element.style.display = "grid"; |
+element.style.justifyItems = "auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'"); |
+shouldBe("element.style.justifyItems", "'auto'"); |
+ |
+element.style.justifyItems = "self-end"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'self-end'"); |
+shouldBe("element.style.justifyItems", "'self-end'"); |
+ |
+debug(""); |
+debug("Test bad combinaisons of justify-items"); |
+element = document.createElement("div"); |
+document.body.appendChild(element); |
+element.style.justifyItems = "true auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "auto safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "auto left"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "baseline safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "baseline center"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "stretch true"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "stretch right"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "true true"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "true safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "center start"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "stretch true"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "safe stretch"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "baseline safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "true baseline"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "true safe left"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "true left safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "left safe true safe"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy start"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy end"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy right true"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy auto"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy stretch"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+element.style.justifyItems = "legacy left right"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+debug(""); |
+debug("Test the value 'initial'"); |
+element.style.justifyItems = "center"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'center'"); |
+shouldBe("element.style.justifyItems", "'center'"); |
+element.style.justifyItems = "initial"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'"); |
+shouldBe("element.style.justifyItems", "'initial'"); |
+ |
+debug(""); |
+debug("Test the value 'initial' for grid containers"); |
+element.style.display = "grid"; |
+element.style.justifyItems = "center"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'center'"); |
+shouldBe("element.style.justifyItems", "'center'"); |
+element.style.justifyItems = "initial"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'"); |
+shouldBe("element.style.justifyItems", "'initial'"); |
+ |
+debug(""); |
+debug("Test the value 'initial' for flex containers"); |
+element.style.display = "flex"; |
+element.style.justifyItems = "center"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'center'"); |
+shouldBe("element.style.justifyItems", "'center'"); |
+element.style.justifyItems = "initial"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'"); |
+shouldBe("element.style.justifyItems", "'initial'"); |
+ |
+debug(""); |
+debug("Test the value 'inherit'"); |
+parentElement = document.createElement("div"); |
+document.body.appendChild(parentElement); |
+parentElement.style.justifyItems = "end"; |
+shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-items')", "'end'"); |
+shouldBe("parentElement.style.justifyItems", "'end'"); |
+ |
+element = document.createElement("div"); |
+parentElement.appendChild(element); |
+element.style.justifyItems = "inherit"; |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'end'"); |
+shouldBe("element.style.justifyItems", "'inherit'"); |
+ |
+debug(""); |
+debug("Test the value 'legacy'"); |
+parentElement = document.createElement("div"); |
+document.body.appendChild(parentElement); |
+parentElement.style.justifyItems = "legacy right"; |
+shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-items')", "'legacy right'"); |
+shouldBe("parentElement.style.justifyItems", "'legacy right'"); |
+ |
+element = document.createElement("div"); |
+parentElement.appendChild(element); |
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'legacy right'"); |
+shouldBe("element.style.justifyItems", "''"); |
+ |
+</script> |
+</body> |
+</html> |