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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2746453005: [css-align] Adapt self-alignment properties to the new baseline syntax (Closed)
Patch Set: More layout tests fixes. Created 3 years, 9 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 | « third_party/WebKit/LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | third_party/WebKit/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: third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html
index 87edfda777ba6adcc5e9287ca52a7f64a895d267..4a4b7602110672b2931fbbdfc69c4009559ae409 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self.html
@@ -1,13 +1,15 @@
<!DOCTYPE html>
-<html>
-<head>
<style>
#justifySelfBaseline {
justify-self: baseline;
}
+#justifySelfFirstBaseline {
+ justify-self: first baseline;
+}
+
#justifySelfLastBaseline {
- justify-self: last-baseline;
+ justify-self: last baseline;
}
#justifySelfStretch {
@@ -82,10 +84,9 @@
justify-self: flex-end safe;
}
</style>
-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting justify-self works as expected</p>
<div id="justifySelfBaseline"></div>
+<div id="justifySelfFirstBaseline"></div>
<div id="justifySelfLastBaseline"></div>
<div id="justifySelfStretch"></div>
<div id="justifySelfStart"></div>
@@ -106,191 +107,173 @@
<div id="justifySelfLeftUnsafe"></div>
<div id="justifySelfFlexStartUnsafe"></div>
<div id="justifySelfFlexEndSafe"></div>
-<script src="resources/alignment-parsing-utils.js"></script>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
<script>
-description('Test that setting and getting justify-self works as expected');
-
-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'");
-
-var justifySelfStart = document.getElementById("justifySelfStart");
-shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self')", "'start'");
-
-var justifySelfEnd = document.getElementById("justifySelfEnd");
-shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self')", "'end'");
-
-var justifySelfCenter = document.getElementById("justifySelfCenter");
-shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self')", "'center'");
-
-var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
-shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self')", "'self-end'");
-
-var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
-shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self')", "'self-start'");
-
-var justifySelfLeft = document.getElementById("justifySelfLeft");
-shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self')", "'left'");
-
-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 justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
-shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self')", "'end unsafe'");
-
-var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
-shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self')", "'center unsafe'");
-
-var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
-shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self')", "'self-end safe'");
-
-var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
-shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self')", "'self-start safe'");
-
-var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
-shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self')", "'right safe'");
-
-var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
-shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self')", "'left unsafe'");
-
-var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
-shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self')", "'flex-start unsafe'");
-
-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')", "'normal'");
-
-debug("");
-debug("Test getting and setting justify-self through JS");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-element.style.justifySelf = "center";
-checkValues(element, "justifySelf", "justify-self", "center", "center");
-
-element.style.justifySelf = "unsafe start";
-checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
-
-element.style.justifySelf = "flex-end safe";
-checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
-
-element.style.justifySelf = "right";
-checkValues(element, "justifySelf", "justify-self", "right", "right");
-
-element.style.justifySelf = "center";
-checkValues(element, "justifySelf", "justify-self", "center", "center");
-
-element.style.justifySelf = "self-start";
-checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
-
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-container.style.display = "flex";
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-container.style.display = "grid";
-element.style.justifySelf = "auto";
-checkValues(element, "justifySelf", "justify-self", "auto", "normal");
-
-element.style.justifySelf = "self-end";
-checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
-
-debug("");
-debug("Test 'auto' value resolution for the root node");
-document.documentElement.style.justifySelf = "auto";
-checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
-
-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", "unsafe 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 unsafe");
-checkBadValues(element, "justifySelf", "justify-self", "stretch right");
-checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
-checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
-checkBadValues(element, "justifySelf", "justify-self", "center start");
-checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
-checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
-checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
-checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
-checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
-checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
-checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe");
-checkBadValues(element, "justifySelf", "justify-self", "legacy start");
-checkBadValues(element, "justifySelf", "justify-self", "legacy end");
-checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
-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");
-
-debug("");
-debug("Test the value 'initial'");
-container.style.display = "";
-checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-container.style.display = "grid";
-checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-container.style.display = "flex";
-checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements");
-container.style.display = "";
-element.style.position = "absolute";
-checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
-
-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", "normal");
-
-debug("");
-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", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifySelf", "justify-self", "end");
-checkInheritValues("justifySelf", "justify-self", "left safe");
-checkInheritValues("justifySelf", "justify-self", "center unsafe");
-
+test(function() {
+ var justifySelfBaseline = document.getElementById("justifySelfBaseline");
+ checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baseline");
+ var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBaseline");
+ checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "baseline");
+ var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
+ checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline");
+ var justifySelfStretch = document.getElementById("justifySelfStretch");
+ checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
+ var justifySelfStart = document.getElementById("justifySelfStart");
+ checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
+ var justifySelfEnd = document.getElementById("justifySelfEnd");
+ checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
+ var justifySelfCenter = document.getElementById("justifySelfCenter");
+ checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
+ var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
+ checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end");
+ var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
+ checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-start");
+ var justifySelfLeft = document.getElementById("justifySelfLeft");
+ checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left");
+ var justifySelfRight = document.getElementById("justifySelfRight");
+ checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right");
+ var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
+ checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-start");
+ var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
+ checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end");
+
+ var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
+ checkValues(justifySelfEndUnsafe, "justifySelf", "justify-self", "", "end unsafe");
+ var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
+ checkValues(justifySelfCenterUnsafe, "justifySelf", "justify-self", "", "center unsafe");
+ var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
+ checkValues(justifySelfSelfEndSafe, "justifySelf", "justify-self", "", "self-end safe");
+ var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
+ checkValues(justifySelfSelfStartSafe, "justifySelf", "justify-self", "", "self-start safe");
+ var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
+ checkValues(justifySelfRightSafe, "justifySelf", "justify-self", "", "right safe");
+ var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
+ checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe");
+ var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUnsafe");
+ checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", "flex-start unsafe");
+ var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe");
+ checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex-end safe");
+}, "Test getting justify-self set through CSS.");
+
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "justifySelf", "justify-self", "", "normal");
+}, "Test initial value of justify-self through JS");
+
+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
+ element.style.justifySelf = "center";
+ checkValues(element, "justifySelf", "justify-self", "center", "center");
+
+ element.style.justifySelf = "unsafe start";
+ checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
+
+ element.style.justifySelf = "flex-end safe";
+ checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
+
+ element.style.justifySelf = "right";
+ checkValues(element, "justifySelf", "justify-self", "right", "right");
+
+ element.style.justifySelf = "center";
+ checkValues(element, "justifySelf", "justify-self", "center", "center");
+
+ element.style.justifySelf = "self-start";
+ checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
+
+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
+
+ container.style.display = "flex";
+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
+
+ container.style.display = "grid";
+ element.style.justifySelf = "auto";
+ checkValues(element, "justifySelf", "justify-self", "auto", "normal");
+
+ element.style.justifySelf = "self-end";
+ checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
+}, "Test getting and setting justify-self through JS");
+
+test(function() {
+ document.documentElement.style.justifySelf = "auto";
+ checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal");
+}, "Test 'auto' value resolution for the root node");
+
+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
+
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe 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 unsafe");
+ checkBadValues(element, "justifySelf", "justify-self", "stretch right");
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
+ checkBadValues(element, "justifySelf", "justify-self", "center start");
+ checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
+ checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
+ checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
+ checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
+ checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe");
+ checkBadValues(element, "justifySelf", "justify-self", "legacy start");
+ checkBadValues(element, "justifySelf", "justify-self", "legacy end");
+ checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
+ 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");
+}, "Test bad combinations of justify-self");
+
+test(function() {
+ container.style.display = "";
+ checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+ container.style.display = "grid";
+ checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+ container.style.display = "flex";
+ checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+ container.style.display = "";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "left", "normal");
+}, "Test the value 'initial' for positioned elements");
+
+test(function() {
+ container.style.display = "grid";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "right", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
+
+test(function() {
+ container.style.display = "flex";
+ element.style.position = "absolute";
+ checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
+
+test(function() {
+ checkInheritValues("justifySelf", "justify-self", "end");
+ checkInheritValues("justifySelf", "justify-self", "left safe");
+ checkInheritValues("justifySelf", "justify-self", "center unsafe");
+}, "Test the value 'inherit'");
</script>
-</body>
-</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-justify-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-justify-self-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698