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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 363133003: [CSS Grid Layout] Adapting align-self, align-items and justify-self to the last CSS 3 spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Resolve grid and flex cases during cascade, the rest will wait for layout. Created 6 years, 5 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
« LayoutTests/fast/alignment/parse-align-items.html ('K') | « LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | LayoutTests/fast/alignment/parse-justify-self-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..bce3f92cfd74fad5f06c3f3db30d00980c1536cc 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,127 @@ 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 = "center";
+checkValues(element, "justifySelf", "justify-self", "center", "center");
-element.style.justifySelf = "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 = "true safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+element.style.justifySelf = "auto";
+checkValues(element, "justifySelf", "justify-self", "auto", "start");
-element.style.justifySelf = "center start";
-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 = "stretch true";
-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 = "safe stretch";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+element.style.justifySelf = "self-end";
+checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
-element.style.justifySelf = "baseline safe";
-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 baseline";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+debug("");
+debug("Test the value 'initial'");
+container.style.display = "";
+checkInitialValues(element, "justifySelf", "justify-self", "center", "start");
-element.style.justifySelf = "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", "left safe", "stretch");
-element.style.justifySelf = "true safe left";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+debug("");
+debug("Test the value 'initial' for flex containers");
+container.style.display = "flex";
+checkInitialValues(element, "justifySelf", "justify-self", "right true", "stretch");
-element.style.justifySelf = "true left safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+debug("");
+debug("Test the value 'initial' for positioned elements");
+container.style.display = "";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "left", "stretch");
-element.style.justifySelf = "left safe true safe";
-shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'auto'");
+debug("");
+debug("Test the value 'initial' for positioned elements in grid containers");
+container.style.display = "grid";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "right", "stretch");
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 positioned elements in grid containers");
+container.style.display = "flex";
+element.style.position = "absolute";
+checkInitialValues(element, "justifySelf", "justify-self", "end", "stretch");
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("justifySelf", "justify-self", "end");
+checkInheritValues("justifySelf", "justify-self", "left safe");
+checkInheritValues("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>
« LayoutTests/fast/alignment/parse-align-items.html ('K') | « LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | LayoutTests/fast/alignment/parse-justify-self-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698