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

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: Applied suggested changes. 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/core/css/CSSComputedStyleDeclaration.cpp » ('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..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>
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-items-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698