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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.html

Issue 2746453005: [css-align] Adapt self-alignment properties to the new baseline syntax (Closed)
Patch Set: 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 | « no previous file | third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-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-items.html
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.html
index b8bb7f4ee996fe1a2f4f3757c4f7490f411bcccb..fd77e3997d0f0347d2225a37ebf99b3bd6b30aab 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.html
@@ -1,13 +1,15 @@
<!DOCTYPE html>
-<html>
-<head>
<style>
#alignItemsBaseline {
align-items: baseline;
}
+#alignItemsFirstBaseline {
+ align-items: first baseline;
+}
+
#alignItemsLastBaseline {
- align-items: last-baseline;
+ align-items: last baseline;
}
#alignItemsStretch {
@@ -81,12 +83,10 @@
#alignItemsFlexEndSafe {
align-items: flex-end safe;
}
-
</style>
-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting align-items works as expected</p>
<div id="alignItemsBaseline"></div>
+<div id="alignItemsFirstBaseline"></div>
<div id="alignItemsLastBaseline"></div>
<div id="alignItemsStretch"></div>
<div id="alignItemsStart"></div>
@@ -107,167 +107,153 @@
<div id="alignItemsLeftUnsafe"></div>
<div id="alignItemsFlexStartUnsafe"></div>
<div id="alignItemsFlexEndSafe"></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-items works as expected');
-
-debug("Test getting align-items set through CSS");
-var alignItemsBaseline = document.getElementById("alignItemsBaseline");
-shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items')", "'baseline'");
-
-var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
-shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('align-items')", "'last-baseline'");
-
-var alignItemsStretch = document.getElementById("alignItemsStretch");
-shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items')", "'stretch'");
-
-var alignItemsStart = document.getElementById("alignItemsStart");
-shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')", "'start'");
-
-var alignItemsEnd = document.getElementById("alignItemsEnd");
-shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'");
-
-var alignItemsCenter = document.getElementById("alignItemsCenter");
-shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items')", "'center'");
-
-var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
-shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('align-items')", "'self-end'");
-
-var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
-shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('align-items')", "'self-start'");
-
-var alignItemsLeft = document.getElementById("alignItemsLeft");
-shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'");
-
-var alignItemsRight = document.getElementById("alignItemsRight");
-shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')", "'right'");
-
-var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
-shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-items')", "'flex-start'");
-
-var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
-shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items')", "'flex-end'");
-
-var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
-shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('align-items')", "'end unsafe'");
-
-var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
-shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('align-items')", "'center unsafe'");
-
-var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
-shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-items')", "'self-end safe'");
-
-var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
-shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align-items')", "'self-start safe'");
-
-var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
-shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-items')", "'right safe'");
-
-var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
-shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('align-items')", "'left unsafe'");
-
-var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
-shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('align-items')", "'flex-start unsafe'");
-
-var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
-shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-items')", "'flex-end safe'");
-
-debug("");
-debug("Test initial value of align-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'normal'");
-
-debug("");
-debug("Test getting and setting align-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.alignItems = "center";
-checkValues(element, "alignItems", "align-items", "center", "center");
-
-element.style.alignItems = "unsafe start";
-checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe");
-
-element.style.alignItems = "flex-end safe";
-checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe");
-
-element.style.alignItems = "right";
-checkValues(element, "alignItems", "align-items", "right", "right");
-
-element.style.alignItems = "center";
-checkValues(element, "alignItems", "align-items", "center", "center");
-
-element.style.alignItems = "self-start";
-checkValues(element, "alignItems", "align-items", "self-start", "self-start");
-
-// The 'auto' value is not valid for the align-items property.
-element.style.alignItems = "";
-element.style.alignItems = "auto";
-checkValues(element, "alignItems", "align-items", "", "normal");
-
-element.style.display = "flex";
-element.style.alignItems = "auto";
-checkValues(element, "alignItems", "align-items", "", "normal");
-
-element.style.display = "grid";
-element.style.alignItems = "auto";
-checkValues(element, "alignItems", "align-items", "", "normal");
-
-element.style.alignItems = "self-end";
-checkValues(element, "alignItems", "align-items", "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of align-items");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "alignItems", "align-items", "auto");
-checkBadValues(element, "alignItems", "align-items", "unsafe auto");
-checkBadValues(element, "alignItems", "align-items", "auto safe");
-checkBadValues(element, "alignItems", "align-items", "auto left");
-checkBadValues(element, "alignItems", "align-items", "baseline safe");
-checkBadValues(element, "alignItems", "align-items", "baseline center");
-checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
-checkBadValues(element, "alignItems", "align-items", "stretch right");
-checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
-checkBadValues(element, "alignItems", "align-items", "unsafe safe");
-checkBadValues(element, "alignItems", "align-items", "center start");
-checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
-checkBadValues(element, "alignItems", "align-items", "safe stretch");
-checkBadValues(element, "alignItems", "align-items", "baseline safe");
-checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
-checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
-checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
-checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe");
-checkBadValues(element, "alignItems", "align-items", "legacy start");
-checkBadValues(element, "alignItems", "align-items", "legacy end");
-checkBadValues(element, "alignItems", "align-items", "legacy right unsafe");
-checkBadValues(element, "alignItems", "align-items", "legacy auto");
-checkBadValues(element, "alignItems", "align-items", "legacy stretch");
-checkBadValues(element, "alignItems", "align-items", "legacy");
-checkBadValues(element, "alignItems", "align-items", "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "alignItems", "align-items", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "flex";
-checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("alignItems", "align-items", "end");
-checkInheritValues("alignItems", "align-items", "left safe");
-checkInheritValues("alignItems", "align-items", "center unsafe");
-
+test(function() {
+ var alignItemsBaseline = document.getElementById("alignItemsBaseline");
+ checkValues(alignItemsBaseline, "alignItems", "align-items", "", "first baseline");
+ var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline");
+ checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "first baseline");
+ var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
+ checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline");
+ var alignItemsStretch = document.getElementById("alignItemsStretch");
+ checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
+ var alignItemsStart = document.getElementById("alignItemsStart");
+ checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
+ var alignItemsEnd = document.getElementById("alignItemsEnd");
+ checkValues(alignItemsEnd, "alignItems", "align-items", "", "end");
+ var alignItemsCenter = document.getElementById("alignItemsCenter");
+ checkValues(alignItemsCenter, "alignItems", "align-items", "", "center");
+ var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
+ checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end");
+ var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
+ checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-start");
+ var alignItemsLeft = document.getElementById("alignItemsLeft");
+ checkValues(alignItemsLeft, "alignItems", "align-items", "", "left");
+ var alignItemsRight = document.getElementById("alignItemsRight");
+ checkValues(alignItemsRight, "alignItems", "align-items", "", "right");
+ var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
+ checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start");
+ var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
+ checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");
+
+ var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
+ checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsafe");
+ var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
+ checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
+ var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
+ checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-end safe");
+ var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
+ checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self-start safe");
+ var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
+ checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right safe");
+ var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
+ checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left unsafe");
+ var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
+ checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "flex-start unsafe");
+ var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
+ checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-end safe");
+}, "Test getting align-items set through CSS.");
meade_UTC10 2017/03/10 04:13:53 Can this test be broken up a bit? I generally find
jfernandez 2017/03/10 08:54:56 Yes, I agree. We have more or less the same probl
+
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ checkValues(element, "alignItems", "align-items", "", "normal");
+}, "Test initial value of align-items through JS");
+
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+ element.style.alignItems = "center";
+ checkValues(element, "alignItems", "align-items", "center", "center");
+
+ element.style.alignItems = "unsafe start";
+ checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe");
+
+ element.style.alignItems = "flex-end safe";
+ checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe");
+
+ element.style.alignItems = "right";
+ checkValues(element, "alignItems", "align-items", "right", "right");
+
+ element.style.alignItems = "center";
+ checkValues(element, "alignItems", "align-items", "center", "center");
+
+ element.style.alignItems = "self-start";
+ checkValues(element, "alignItems", "align-items", "self-start", "self-start");
+
+ // The 'auto' value is not valid for the align-items property.
+ element.style.alignItems = "";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
+
+ element.style.display = "flex";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
+
+ element.style.display = "grid";
+ element.style.alignItems = "auto";
+ checkValues(element, "alignItems", "align-items", "", "normal");
+
+ element.style.alignItems = "self-end";
+ checkValues(element, "alignItems", "align-items", "self-end", "self-end");
+}, "Test getting and setting align-items through JS");
+
+test(function() {
+ element = document.createElement("div");
+ document.body.appendChild(element);
+
+ checkBadValues(element, "alignItems", "align-items", "auto");
+ checkBadValues(element, "alignItems", "align-items", "unsafe auto");
+ checkBadValues(element, "alignItems", "align-items", "auto safe");
+ checkBadValues(element, "alignItems", "align-items", "auto left");
+ checkBadValues(element, "alignItems", "align-items", "baseline safe");
+ checkBadValues(element, "alignItems", "align-items", "baseline center");
+ checkBadValues(element, "alignItems", "align-items", "first baseline center");
+ checkBadValues(element, "alignItems", "align-items", "last baseline center");
+ checkBadValues(element, "alignItems", "align-items", "baseline last");
+ checkBadValues(element, "alignItems", "align-items", "baseline first");
+ checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
+ checkBadValues(element, "alignItems", "align-items", "stretch right");
+ checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
+ checkBadValues(element, "alignItems", "align-items", "unsafe safe");
+ checkBadValues(element, "alignItems", "align-items", "center start");
+ checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
+ checkBadValues(element, "alignItems", "align-items", "safe stretch");
+ checkBadValues(element, "alignItems", "align-items", "baseline safe");
+ checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
+ checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
+ checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
+ checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe");
+ checkBadValues(element, "alignItems", "align-items", "legacy start");
+ checkBadValues(element, "alignItems", "align-items", "legacy end");
+ checkBadValues(element, "alignItems", "align-items", "legacy right unsafe");
+ checkBadValues(element, "alignItems", "align-items", "legacy auto");
+ checkBadValues(element, "alignItems", "align-items", "legacy stretch");
+ checkBadValues(element, "alignItems", "align-items", "legacy");
+ checkBadValues(element, "alignItems", "align-items", "legacy left right");
+}, "Test bad combinations of align-items");
+
+test(function() {
+ element.style.display = "";
+ checkInitialValues(element, "alignItems", "align-items", "center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+ element.style.display = "grid";
+ checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+ element.style.display = "flex";
+ checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+ checkInheritValues("alignItems", "align-items", "end");
+ checkInheritValues("alignItems", "align-items", "left safe");
+ checkInheritValues("alignItems", "align-items", "center unsafe");
+}, "Test the value 'inherit'");
</script>
-</body>
-</html>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698