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

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: Modifying computed value resolution. 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..6eb7d07b8568dd54aaed2ec277356778f3b1c9fe
--- /dev/null
+++ b/LayoutTests/fast/alignment/parse-justify-items.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#justifyItemsBaseline {
+ justify-items: baseline;
Julien - ping for review 2014/06/24 19:04:56 I think we should test last-baseline as it's a val
jfernandez 2014/06/26 12:58:43 Done.
+}
+
+#justifyItemsStretch {
+ justify-items: stretch;
+}
+
+#justifyItemsStart {
+ justify-items: start;
+}
+
+#justifyItemsEnd {
+ justify-items: end;
+}
+
+#justifyItemsCenter {
+ justify-items: center;
+}
+
+#justifyItemsItemsStart {
+ justify-items: self-start;
+}
+
+#justifyItemsItemsEnd {
+ justify-items: self-end;
+}
+
+#justifyItemsLeft {
+ justify-items: left;
+}
+
+#justifyItemsRight {
+ justify-items: right;
+}
+
Julien - ping for review 2014/06/24 19:04:56 I don't see any testing for flex-start / flex-end
jfernandez 2014/06/26 12:58:43 Done.
+#justifyItemsEndTrue {
+ justify-items: end true;
+}
+
+#justifyItemsCenterTrue {
+ justify-items: center true;
+}
+
+#justifyItemsItemsEndSafe {
+ justify-items: self-end safe;
+}
+
+#justifyItemsItemsStartSafe {
+ justify-items: self-start safe;
+}
+
+#justifyItemsRightSafe {
+ justify-items: right safe;
+}
+
+#justifyItemsLeftTrue {
+ justify-items: left true;
+}
+
+#justifyItemsLegacyLeft {
+ justify-items: legacy left;
+}
+
+#justifyItemsLegacyCenter {
+ justify-items: legacy center;
+}
+
+#justifyItemsLegacyRight {
+ justify-items: legacy right;
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<div id="justifyItemsBaseline"></div>
+<div id="justifyItemsStretch"></div>
+<div id="justifyItemsStart"></div>
+<div id="justifyItemsEnd"></div>
+<div id="justifyItemsCenter"></div>
+<div id="justifyItemsItemsStart"></div>
+<div id="justifyItemsItemsEnd"></div>
+<div id="justifyItemsLeft"></div>
+<div id="justifyItemsRight"></div>
+
+<div id="justifyItemsEndTrue"></div>
+<div id="justifyItemsCenterTrue"></div>
+<div id="justifyItemsItemsEndSafe"></div>
+<div id="justifyItemsItemsStartSafe"></div>
+<div id="justifyItemsRightSafe"></div>
+<div id="justifyItemsLeftTrue"></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 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 justifyItemsItemsEnd = document.getElementById("justifyItemsItemsEnd");
+shouldBe("getComputedStyle(justifyItemsItemsEnd, '').getPropertyValue('justify-items')", "'self-end'");
+
+var justifyItemsItemsStart = document.getElementById("justifyItemsItemsStart");
+shouldBe("getComputedStyle(justifyItemsItemsStart, '').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 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 justifyItemsItemsEndSafe = document.getElementById("justifyItemsItemsEndSafe");
+shouldBe("getComputedStyle(justifyItemsItemsEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");
+
+var justifyItemsItemsStartSafe = document.getElementById("justifyItemsItemsStartSafe");
+shouldBe("getComputedStyle(justifyItemsItemsStartSafe, '').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 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'");
+
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.justifyItems = "true start";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start true'");
+
+element.style.justifyItems = "auto";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+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'");
+
+element.style.justifyItems = "auto safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "auto left";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "baseline safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "baseline center";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "stretch true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "stretch right";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "center start";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "stretch true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "safe stretch";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "baseline safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true baseline";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true safe left";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "true left safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "left safe true safe";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "legacy start";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "legacy end";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "legacy right true";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+element.style.justifyItems = "legacy";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
Julien - ping for review 2014/06/24 19:04:56 Maybe we should test legacy + auto / stretch too.
jfernandez 2014/06/26 12:58:44 Done.
+
+debug("");
+debug("Test the value 'initial'");
+element.style.justifyItems = "center";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'center'");
+element.style.justifyItems = "initial";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
Julien - ping for review 2014/06/24 19:04:56 Would it be worth checking flex-container too as i
jfernandez 2014/06/26 12:58:43 Done.
+
+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'");
+
+element = document.createElement("div");
+parentElement.appendChild(element);
+element.style.justifyItems = "inherit";
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'end'");
Julien - ping for review 2014/06/24 19:04:56 That's awesome that you cover getComputedStyle wit
jfernandez 2014/06/26 12:58:43 Done.
+</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