Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(24)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/alignment/parse-justify-items.html

Issue 333423005: [CSS Grid Layout] Implement 'justify-items' parsing (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch rebased. Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-items-expected.txt » ('j') | Source/build/scripts/templates/StyleBuilderFunctions.cpp.tmpl » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..3c0f09a4d4d60807b39fd1cf0461198245eb8517
--- /dev/null
+++ b/LayoutTests/fast/alignment/parse-justify-items.html
@@ -0,0 +1,333 @@
+<!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;
+}
+
+#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="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>
+<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 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'");
+
+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 = "true start";
+checkValues(element, "justifyItems", "justify-items", "start true", "start true");
+
+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");
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'");
+shouldBe("element.style.justifyItems", "'auto'");
+
+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", "true 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 true");
+checkBadValues(element, "justifyItems", "justify-items", "stretch right");
+checkBadValues(element, "justifyItems", "justify-items", "true true");
+checkBadValues(element, "justifyItems", "justify-items", "true safe");
+checkBadValues(element, "justifyItems", "justify-items", "center start");
+checkBadValues(element, "justifyItems", "justify-items", "stretch true");
+checkBadValues(element, "justifyItems", "justify-items", "safe stretch");
+checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
+checkBadValues(element, "justifyItems", "justify-items", "true baseline");
+checkBadValues(element, "justifyItems", "justify-items", "true safe left");
+checkBadValues(element, "justifyItems", "justify-items", "true left safe");
+checkBadValues(element, "justifyItems", "justify-items", "left safe true safe");
+checkBadValues(element, "justifyItems", "justify-items", "legacy start");
+checkBadValues(element, "justifyItems", "justify-items", "legacy end");
+checkBadValues(element, "justifyItems", "justify-items", "legacy right true");
+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'");
+checkInitialValues(element, "justifyItems", "justify-items");
+
+debug("");
+debug("Test the value 'initial' for grid containers");
+checkInitialValues(element, "justifyItems", "justify-items", "grid");
+
+debug("");
+debug("Test the value 'initial' for flex containers");
+checkInitialValues(element, "justifyItems", "justify-items", "flex");
+
+debug("");
+debug("Test the value 'inherit'");
+parentElement = document.createElement("div");
+document.body.appendChild(parentElement);
+parentElement.style.justifyItems = "end";
+checkValues(parentElement, "justifyItems", "justify-items", "end", "end");
+
+element = document.createElement("div");
+parentElement.appendChild(element);
+element.style.justifyItems = "inherit";
+checkValues(element, "justifyItems", "justify-items", "inherit", "end");
+
+debug("");
+debug("Test the value 'legacy'");
+parentElement = document.createElement("div");
+document.body.appendChild(parentElement);
+parentElement.style.justifyItems = "legacy right";
+checkValues(parentElement, "justifyItems", "justify-items", "legacy right", "legacy right");
+
+element = document.createElement("div");
+parentElement.appendChild(element);
+checkValues(element, "justifyItems", "justify-items", "", "legacy right");
+
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-items-expected.txt » ('j') | Source/build/scripts/templates/StyleBuilderFunctions.cpp.tmpl » ('J')

Powered by Google App Engine
This is Rietveld 408576698