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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-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-align-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-align-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-align-self.html
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html
index 3531ca548758f001bec4b6657e19069ea8f5235c..149c1a0c3ad500ae2f7a67ddf0720ec46561cfb2 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html
@@ -1,13 +1,15 @@
<!DOCTYPE html>
-<html>
-<head>
<style>
#alignSelfBaseline {
align-self: baseline;
}
+#alignSelfFirstBaseline {
+ align-self: first baseline;
+}
+
#alignSelfLastBaseline {
- align-self: last-baseline;
+ align-self: last baseline;
}
#alignSelfStretch {
@@ -82,10 +84,9 @@
align-self: flex-end safe;
}
</style>
-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting align-self works as expected</p>
<div id="alignSelfBaseline"></div>
+<div id="alignSelfFirstBaseline"></div>
<div id="alignSelfLastBaseline"></div>
<div id="alignSelfStretch"></div>
<div id="alignSelfStart"></div>
@@ -106,191 +107,172 @@
<div id="alignSelfLeftUnsafe"></div>
<div id="alignSelfFlexStartUnsafe"></div>
<div id="alignSelfFlexEndSafe"></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 align-self works as expected');
-
-debug("Test getting align-self set through CSS");
-var alignSelfBaseline = document.getElementById("alignSelfBaseline");
-shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self')", "'baseline'");
-
-var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
-shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('align-self')", "'last-baseline'");
-
-var alignSelfStretch = document.getElementById("alignSelfStretch");
-shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self')", "'stretch'");
-
-var alignSelfStart = document.getElementById("alignSelfStart");
-shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('align-self')", "'start'");
-
-var alignSelfEnd = document.getElementById("alignSelfEnd");
-shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self')", "'end'");
-
-var alignSelfCenter = document.getElementById("alignSelfCenter");
-shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self')", "'center'");
-
-var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
-shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self')", "'self-end'");
-
-var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
-shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self')", "'self-start'");
-
-var alignSelfLeft = document.getElementById("alignSelfLeft");
-shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self')", "'left'");
-
-var alignSelfRight = document.getElementById("alignSelfRight");
-shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'");
-
-var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
-shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self')", "'flex-start'");
-
-var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
-shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')", "'flex-end'");
-
-var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
-shouldBe("getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('align-self')", "'end unsafe'");
-
-var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
-shouldBe("getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('align-self')", "'center unsafe'");
-
-var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
-shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-self')", "'self-end safe'");
-
-var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
-shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-self')", "'self-start safe'");
-
-var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
-shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self')", "'right safe'");
-
-var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
-shouldBe("getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('align-self')", "'left unsafe'");
-
-var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
-shouldBe("getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('align-self')", "'flex-start unsafe'");
-
-var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
-shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-self')", "'flex-end safe'");
-
-debug("");
-debug("Test initial value of align-self through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'normal'");
-
-debug("");
-debug("Test getting and setting align-self through JS");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-element.style.alignSelf = "center";
-checkValues(element, "alignSelf", "align-self", "center", "center");
-
-element.style.alignSelf = "unsafe start";
-checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe");
-
-element.style.alignSelf = "flex-end safe";
-checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
-
-element.style.alignSelf = "right";
-checkValues(element, "alignSelf", "align-self", "right", "right");
-
-element.style.alignSelf = "center";
-checkValues(element, "alignSelf", "align-self", "center", "center");
-
-element.style.alignSelf = "self-start";
-checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
-
-element.style.alignSelf = "auto";
-checkValues(element, "alignSelf", "align-self", "auto", "normal");
-
-container.style.display = "flex";
-element.style.alignSelf = "auto";
-checkValues(element, "alignSelf", "align-self", "auto", "normal");
-
-container.style.display = "grid";
-element.style.alignSelf = "auto";
-checkValues(element, "alignSelf", "align-self", "auto", "normal");
-
-element.style.alignSelf = "self-end";
-checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
-
-debug("");
-debug("Test 'auto' value resolution for the root node");
-document.documentElement.style.alignSelf = "auto";
-checkValues(document.documentElement, "alignSelf", "align-self", "auto", "normal");
-
-debug("");
-debug("Test bad combinations of align-self");
-container = document.createElement("div");
-element = document.createElement("div");
-container.appendChild(element);
-document.body.appendChild(container);
-
-checkBadValues(element, "alignSelf", "align-self", "unsafe auto");
-checkBadValues(element, "alignSelf", "align-self", "auto safe");
-checkBadValues(element, "alignSelf", "align-self", "auto left");
-checkBadValues(element, "alignSelf", "align-self", "baseline safe");
-checkBadValues(element, "alignSelf", "align-self", "baseline center");
-checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
-checkBadValues(element, "alignSelf", "align-self", "stretch right");
-checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
-checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
-checkBadValues(element, "alignSelf", "align-self", "center start");
-checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
-checkBadValues(element, "alignSelf", "align-self", "safe stretch");
-checkBadValues(element, "alignSelf", "align-self", "baseline safe");
-checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
-checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
-checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
-checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
-checkBadValues(element, "alignSelf", "align-self", "legacy start");
-checkBadValues(element, "alignSelf", "align-self", "legacy end");
-checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
-checkBadValues(element, "alignSelf", "align-self", "legacy auto");
-checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
-checkBadValues(element, "alignSelf", "align-self", "legacy");
-checkBadValues(element, "alignSelf", "align-self", "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-container.style.display = "";
-checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-container.style.display = "grid";
-checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-container.style.display = "flex";
-checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements");
-container.style.display = "";
-element.style.position = "absolute";
-checkInitialValues(element, "alignSelf", "align-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, "alignSelf", "align-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, "alignSelf", "align-self", "end", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("alignSelf", "align-self", "end");
-checkInheritValues("alignSelf", "align-self", "left safe");
-checkInheritValues("alignSelf", "align-self", "center unsafe");
-
+test(function() {
+ var alignSelfBaseline = document.getElementById("alignSelfBaseline");
+ checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
+ var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline");
+ checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline");
+ var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
+ checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
+ var alignSelfStretch = document.getElementById("alignSelfStretch");
+ checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
+ var alignSelfStart = document.getElementById("alignSelfStart");
+ checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
+ var alignSelfEnd = document.getElementById("alignSelfEnd");
+ checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
+ var alignSelfCenter = document.getElementById("alignSelfCenter");
+ checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
+ var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
+ checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
+ var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
+ checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start");
+ var alignSelfLeft = document.getElementById("alignSelfLeft");
+ checkValues(alignSelfLeft, "alignSelf", "align-self", "", "left");
+ var alignSelfRight = document.getElementById("alignSelfRight");
+ checkValues(alignSelfRight, "alignSelf", "align-self", "", "right");
+ var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
+ checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start");
+ var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
+ checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
+
+ var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
+ checkValues(alignSelfEndUnsafe, "alignSelf", "align-self", "", "end unsafe");
+ var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
+ checkValues(alignSelfCenterUnsafe, "alignSelf", "align-self", "", "center unsafe");
+ var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
+ checkValues(alignSelfSelfEndSafe, "alignSelf", "align-self", "", "self-end safe");
+ var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
+ checkValues(alignSelfSelfStartSafe, "alignSelf", "align-self", "", "self-start safe");
+ var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
+ checkValues(alignSelfRightSafe, "alignSelf", "align-self", "", "right safe");
+ var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
+ checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe");
+ var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
+ checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-start unsafe");
+ var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
+ checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end safe");
+}, "Test getting align-self set through CSS.");
+
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignSelf", "align-self", "", "normal");
+}, "Test initial value of align-self through JS");
+
+test(function() {
+ container = document.createElement("div");
+ element = document.createElement("div");
+ container.appendChild(element);
+ document.body.appendChild(container);
+ element.style.alignSelf = "center";
+ checkValues(element, "alignSelf", "align-self", "center", "center");
+
+ element.style.alignSelf = "unsafe start";
+ checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe");
+
+ element.style.alignSelf = "flex-end safe";
+ checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
+
+ element.style.alignSelf = "right";
+ checkValues(element, "alignSelf", "align-self", "right", "right");
+
+ element.style.alignSelf = "center";
+ checkValues(element, "alignSelf", "align-self", "center", "center");
+
+ element.style.alignSelf = "self-start";
+ checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
+
+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
+
+ container.style.display = "flex";
+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
+
+ container.style.display = "grid";
+ element.style.alignSelf = "auto";
+ checkValues(element, "alignSelf", "align-self", "auto", "normal");
+
+ element.style.alignSelf = "self-end";
+ checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
+}, "Test getting and setting align-self through JS");
+
+test(function() {
+ document.documentElement.style.alignSelf = "auto";
+ checkValues(document.documentElement, "alignSelf", "align-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, "alignSelf", "align-self", "auto safe");
+ checkBadValues(element, "alignSelf", "align-self", "auto left");
+ checkBadValues(element, "alignSelf", "align-self", "baseline safe");
+ checkBadValues(element, "alignSelf", "align-self", "baseline center");
+ checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "stretch right");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
+ checkBadValues(element, "alignSelf", "align-self", "center start");
+ checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "safe stretch");
+ checkBadValues(element, "alignSelf", "align-self", "baseline safe");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
+ checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
+ checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
+ checkBadValues(element, "alignSelf", "align-self", "legacy start");
+ checkBadValues(element, "alignSelf", "align-self", "legacy end");
+ checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
+ checkBadValues(element, "alignSelf", "align-self", "legacy auto");
+ checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
+ checkBadValues(element, "alignSelf", "align-self", "legacy");
+ checkBadValues(element, "alignSelf", "align-self", "legacy left right");
+}, "Test bad combinations of align-self");
+
+test(function() {
+ container.style.display = "";
+ checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+ container.style.display = "grid";
+ checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+ container.style.display = "flex";
+ checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+ container.style.display = "";
+ element.style.position = "absolute";
+ checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
+}, "Test the value 'initial' for positioned elements");
+
+test(function() {
+ container.style.display = "grid";
+ element.style.position = "absolute";
+ checkInitialValues(element, "alignSelf", "align-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, "alignSelf", "align-self", "end", "normal");
+}, "Test the value 'initial' for positioned elements in grid containers");
+
+test(function() {
+ checkInheritValues("alignSelf", "align-self", "end");
+ checkInheritValues("alignSelf", "align-self", "left safe");
+ checkInheritValues("alignSelf", "align-self", "center unsafe");
+}, "Test the value 'inherit'");
</script>
-</body>
-</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-align-self-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698