[css-align] Adapt self-alignment properties to the new baseline syntax
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Mar 2017 22:01:11 +0000 (22:01 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 29 Mar 2017 22:01:11 +0000 (22:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=170235

Reviewed by David Hyatt.

Source/WebCore:

The baseline-position syntax has changed recently, so we need to update
the CSS properties using the old syntax. This patch address only the
self-alignment (align-self and justify-self) and default-alignment
(align-items and justify-items).

The content-distribution properties (align-content and justify-content)
will be updated in a follow up patch.

The new baseline syntax is "[first | last ]? baseline" which implies
modifying the parsing and computed value logic.

There are several layout tests affected by this change, so I'll update
them accordingly.

No new tests, just added/modified some cases to the tests we already have using the new baseline values.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForItemPositionWithOverflowAlignment):
* css/CSSValueKeywords.in:
* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData):
* css/parser/CSSPropertyParser.cpp:
(WebCore::consumeBaselineKeyword):
(WebCore::consumeSelfPositionOverflowPosition):

LayoutTests:

Added new cases to the alignment properties parsing tests so that we can verify the new
baseline-alignment syntax is parsed as expected.
Additionally, I modified the tests so that they use the testharness format.

* css3/parse-align-items-expected.txt:
* css3/parse-align-items.html:
* css3/parse-align-self-expected.txt:
* css3/parse-align-self.html:
* css3/resources/alignment-parsing-utils-th.js:
(checkValues):
* fast/css/parse-justify-items-expected.txt:
* fast/css/parse-justify-items.html:
* fast/css/parse-justify-self-expected.txt:
* fast/css/parse-justify-self.html:
* fast/css/resources/alignment-parsing-utils-th.js: Copied from LayoutTests/css3/resources/alignment-parsing-utils-th.js.
(checkValues):
(checkBadValues):
(checkInitialValues):
(checkInheritValues):
(checkLegacyValues):
(checkSupportedValues):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@214564 268f45cc-cd09-0410-ab3c-d52691b4dbfc

16 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/parse-align-items-expected.txt
LayoutTests/css3/parse-align-items.html
LayoutTests/css3/parse-align-self-expected.txt
LayoutTests/css3/parse-align-self.html
LayoutTests/css3/resources/alignment-parsing-utils-th.js
LayoutTests/fast/css/parse-justify-items-expected.txt
LayoutTests/fast/css/parse-justify-items.html
LayoutTests/fast/css/parse-justify-self-expected.txt
LayoutTests/fast/css/parse-justify-self.html
LayoutTests/fast/css/resources/alignment-parsing-utils-th.js [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleBuilderConverter.h
Source/WebCore/css/parser/CSSPropertyParser.cpp

index 086df48..f6ddf47 100644 (file)
@@ -1,3 +1,32 @@
+2017-03-29  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Adapt self-alignment properties to the new baseline syntax
+        https://bugs.webkit.org/show_bug.cgi?id=170235
+
+        Reviewed by David Hyatt.
+
+        Added new cases to the alignment properties parsing tests so that we can verify the new
+        baseline-alignment syntax is parsed as expected.
+        Additionally, I modified the tests so that they use the testharness format.
+
+        * css3/parse-align-items-expected.txt:
+        * css3/parse-align-items.html:
+        * css3/parse-align-self-expected.txt:
+        * css3/parse-align-self.html:
+        * css3/resources/alignment-parsing-utils-th.js:
+        (checkValues):
+        * fast/css/parse-justify-items-expected.txt:
+        * fast/css/parse-justify-items.html:
+        * fast/css/parse-justify-self-expected.txt:
+        * fast/css/parse-justify-self.html:
+        * fast/css/resources/alignment-parsing-utils-th.js: Copied from LayoutTests/css3/resources/alignment-parsing-utils-th.js.
+        (checkValues):
+        (checkBadValues):
+        (checkInitialValues):
+        (checkInheritValues):
+        (checkLegacyValues):
+        (checkSupportedValues):
+
 2017-03-29  Chris Dumez  <cdumez@apple.com>
 
         Animated SVG images are not paused in pages loaded in the background
index 10937c7..090e971 100644 (file)
 Test that setting and getting align-items works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting align-items set through CSS
-PASS getComputedStyle(alignItemsBaseline, '').getPropertyValue('-webkit-align-items') is 'baseline'
-PASS getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items') is 'last-baseline'
-PASS getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items') is 'stretch'
-PASS getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items') is 'start'
-PASS getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items') is 'end'
-PASS getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items') is 'center'
-PASS getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items') is 'self-end'
-PASS getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items') is 'self-start'
-PASS getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items') is 'left'
-PASS getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items') is 'right'
-PASS getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items') is 'flex-start'
-PASS getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items') is 'flex-end'
-PASS getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('-webkit-align-items') is 'end unsafe'
-PASS getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('-webkit-align-items') is 'center unsafe'
-PASS getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items') is 'self-end safe'
-PASS getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items') is 'self-start safe'
-PASS getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items') is 'right safe'
-PASS getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('-webkit-align-items') is 'left unsafe'
-PASS getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('-webkit-align-items') is 'flex-start unsafe'
-PASS getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-align-items') is 'flex-end safe'
-
-Test initial value of align-items through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is 'normal'
-
-Test getting and setting align-items through JS
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "start unsafe"
-PASS element.style.webkitAlignItems is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "flex-end safe"
-PASS element.style.webkitAlignItems is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right"
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "self-start"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-start"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "self-end"
-
-Test bad combinations of align-items
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-PASS element.style.webkitAlignItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial'
-PASS element.style.webkitAlignItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.webkitAlignItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.webkitAlignItems is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "right unsafe"
-PASS element.style.webkitAlignItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "normal"
-
-Test the value 'inherit'
-PASS element.style.webkitAlignItems is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "end"
-PASS element.style.webkitAlignItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "left safe"
-PASS element.style.webkitAlignItems is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center unsafe"
-PASS element.style.webkitAlignItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-items') is "center unsafe"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting align-items set through CSS. 
+PASS Test initial value of align-items through JS 
+PASS Test getting and setting align-items through JS 
+PASS Test bad combinations of align-items 
+PASS Test the value 'initial' 
+PASS Test the value 'initial' for grid containers 
+PASS Test the value 'initial' for flex containers 
+PASS Test the value 'inherit' 
 
index 4b54c05..79cbe84 100644 (file)
@@ -1,92 +1,92 @@
 <!DOCTYPE html>
-<html>
-<head>
 <style>
 #alignItemsBaseline {
-    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+
+#alignItemsFirstBaseline {
+    align-items: first baseline;
 }
 
 #alignItemsLastBaseline {
-    -webkit-align-items: last-baseline;
+    align-items: last baseline;
 }
 
 #alignItemsStretch {
-    -webkit-align-items: stretch;
+    align-items: stretch;
 }
 
 #alignItemsStart {
-    -webkit-align-items: start;
+    align-items: start;
 }
 
 #alignItemsEnd {
-    -webkit-align-items: end;
+    align-items: end;
 }
 
 #alignItemsCenter {
-    -webkit-align-items: center;
+    align-items: center;
 }
 
 #alignItemsSelfStart {
-    -webkit-align-items: self-start;
+    align-items: self-start;
 }
 
 #alignItemsSelfEnd {
-    -webkit-align-items: self-end;
+    align-items: self-end;
 }
 
 #alignItemsLeft {
-    -webkit-align-items: left;
+    align-items: left;
 }
 
 #alignItemsRight {
-    -webkit-align-items: right;
+    align-items: right;
 }
 
 #alignItemsFlexStart {
-    -webkit-align-items: flex-start;
+    align-items: flex-start;
 }
 
 #alignItemsFlexEnd {
-    -webkit-align-items: flex-end;
+    align-items: flex-end;
 }
 
 #alignItemsEndUnsafe {
-    -webkit-align-items: end unsafe;
+    align-items: end unsafe;
 }
 
 #alignItemsCenterUnsafe {
-    -webkit-align-items: center unsafe;
+    align-items: center unsafe;
 }
 
 #alignItemsSelfEndSafe {
-    -webkit-align-items: self-end safe;
+    align-items: self-end safe;
 }
 
 #alignItemsSelfStartSafe {
-    -webkit-align-items: self-start safe;
+    align-items: self-start safe;
 }
 
 #alignItemsRightSafe {
-    -webkit-align-items: right safe;
+    align-items: right safe;
 }
 
 #alignItemsLeftUnsafe {
-    -webkit-align-items: left unsafe;
+    align-items: left unsafe;
 }
 
 #alignItemsFlexStartUnsafe {
-    -webkit-align-items: flex-start unsafe;
+    align-items: flex-start unsafe;
 }
 
 #alignItemsFlexEndSafe {
-    -webkit-align-items: flex-end safe;
+    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>
 <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('-webkit-align-items')", "'baseline'");
-
-var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
-shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('-webkit-align-items')", "'last-baseline'");
-
-var alignItemsStretch = document.getElementById("alignItemsStretch");
-shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('-webkit-align-items')", "'stretch'");
-
-var alignItemsStart = document.getElementById("alignItemsStart");
-shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('-webkit-align-items')", "'start'");
-
-var alignItemsEnd = document.getElementById("alignItemsEnd");
-shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('-webkit-align-items')", "'end'");
-
-var alignItemsCenter = document.getElementById("alignItemsCenter");
-shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('-webkit-align-items')", "'center'");
-
-var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
-shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('-webkit-align-items')", "'self-end'");
-
-var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
-shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('-webkit-align-items')", "'self-start'");
-
-var alignItemsLeft = document.getElementById("alignItemsLeft");
-shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('-webkit-align-items')", "'left'");
-
-var alignItemsRight = document.getElementById("alignItemsRight");
-shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('-webkit-align-items')", "'right'");
-
-var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
-shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('-webkit-align-items')", "'flex-start'");
-
-var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
-shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('-webkit-align-items')", "'flex-end'");
-
-var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
-shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('-webkit-align-items')", "'end unsafe'");
-
-var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
-shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('-webkit-align-items')", "'center unsafe'");
-
-var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
-shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('-webkit-align-items')", "'self-end safe'");
-
-var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
-shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('-webkit-align-items')", "'self-start safe'");
-
-var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
-shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('-webkit-align-items')", "'right safe'");
-
-var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
-shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('-webkit-align-items')", "'left unsafe'");
-
-var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
-shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('-webkit-align-items')", "'flex-start unsafe'");
-
-var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
-shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('-webkit-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('-webkit-align-items')", "'normal'");
-
-debug("");
-debug("Test getting and setting align-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.webkitAlignItems = "center";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
-
-element.style.webkitAlignItems = "unsafe start";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "start unsafe", "start unsafe");
-
-element.style.webkitAlignItems = "flex-end safe";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "flex-end safe", "flex-end safe");
-
-element.style.webkitAlignItems = "right";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "right", "right");
-
-element.style.webkitAlignItems = "center";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "center", "center");
-
-element.style.webkitAlignItems = "self-start";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-start", "self-start");
-
-<!-- The 'auto' value is no valid for the align-items property. -->
-element.style.webkitAlignItems = "";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "", "normal");
-
-element.style.display = "grid";
-element.style.webkitAlignItems = "auto";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "", "normal");
-
-element.style.webkitAlignItems = "self-end";
-checkValues(element, "webkitAlignItems", "-webkit-align-items",  "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of align-items");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "auto left");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline center");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch right");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "center start");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "stretch unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "safe stretch");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "baseline safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe baseline");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe safe left");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "unsafe left safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "left safe unsafe safe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy start");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy end");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy right unsafe");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy auto");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy stretch");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy");
-checkBadValues(element, "webkitAlignItems", "-webkit-align-items",  "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "-webkit-grid";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "webkitAlignItems", "-webkit-align-items", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "end");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "left safe");
-checkInheritValues("webkitAlignItems", "-webkit-align-items", "center unsafe");
-
+test(function() {
+    var alignItemsBaseline = document.getElementById("alignItemsBaseline");
+    checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline");
+    var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline");
+    checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "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.");
+
+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>
index 1ff234c..9dbaa3a 100644 (file)
 Test that setting and getting align-self works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting align-self set through CSS
-PASS getComputedStyle(alignSelfBaseline, '').getPropertyValue('-webkit-align-self') is 'baseline'
-PASS getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self') is 'last-baseline'
-PASS getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self') is 'stretch'
-PASS getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self') is 'start'
-PASS getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self') is 'end'
-PASS getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self') is 'center'
-PASS getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self') is 'self-end'
-PASS getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self') is 'self-start'
-PASS getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self') is 'left'
-PASS getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self') is 'right'
-PASS getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self') is 'flex-start'
-PASS getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self') is 'flex-end'
-PASS getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('-webkit-align-self') is 'end unsafe'
-PASS getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('-webkit-align-self') is 'center unsafe'
-PASS getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self') is 'self-end safe'
-PASS getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self') is 'self-start safe'
-PASS getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self') is 'right safe'
-PASS getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('-webkit-align-self') is 'left unsafe'
-PASS getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('-webkit-align-self') is 'flex-start unsafe'
-PASS getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-align-self') is 'flex-end safe'
-
-Test initial value of align-self through JS
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is 'normal'
-
-Test getting and setting align-self through JS
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "start unsafe"
-PASS element.style.webkitAlignSelf is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "flex-end safe"
-PASS element.style.webkitAlignSelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "self-start"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-start"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "self-end"
-
-Test 'auto' value resolution for the root node
-PASS element.style.webkitAlignSelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test bad combinations of align-self
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-PASS element.style.webkitAlignSelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial'
-PASS element.style.webkitAlignSelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.webkitAlignSelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.webkitAlignSelf is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right unsafe"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements
-PASS element.style.webkitAlignSelf is "left"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.webkitAlignSelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "right"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.webkitAlignSelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "normal"
-
-Test the value 'inherit'
-PASS element.style.webkitAlignSelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "end"
-PASS element.style.webkitAlignSelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "left safe"
-PASS element.style.webkitAlignSelf is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center unsafe"
-PASS element.style.webkitAlignSelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-align-self') is "center unsafe"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting align-self set through CSS. 
+PASS Test initial value of align-self through JS 
+PASS Test getting and setting align-self through JS 
+PASS Test 'auto' value resolution for the root node 
+PASS Test bad combinations of align-self 
+PASS Test the value 'initial' 
+PASS Test the value 'initial' for grid containers 
+PASS Test the value 'initial' for flex containers 
+PASS Test the value 'initial' for positioned elements 
+PASS Test the value 'initial' for positioned elements in grid containers 
+PASS Test the value 'initial' for positioned elements in grid containers 
+PASS Test the value 'inherit' 
 
index a636f94..2689a01 100644 (file)
@@ -1,91 +1,92 @@
 <!DOCTYPE html>
-<html>
-<head>
 <style>
 #alignSelfBaseline {
-    -webkit-align-self: baseline;
+    align-self: baseline;
+}
+
+#alignSelfFirstBaseline {
+    align-self: first baseline;
 }
 
 #alignSelfLastBaseline {
-    -webkit-align-self: last-baseline;
+    align-self: last baseline;
 }
 
 #alignSelfStretch {
-    -webkit-align-self: stretch;
+    align-self: stretch;
 }
 
 #alignSelfStart {
-    -webkit-align-self: start;
+    align-self: start;
 }
 
 #alignSelfEnd {
-    -webkit-align-self: end;
+    align-self: end;
 }
 
 #alignSelfCenter {
-    -webkit-align-self: center;
+    align-self: center;
 }
 
 #alignSelfSelfStart {
-    -webkit-align-self: self-start;
+    align-self: self-start;
 }
 
 #alignSelfSelfEnd {
-    -webkit-align-self: self-end;
+    align-self: self-end;
 }
 
 #alignSelfLeft {
-    -webkit-align-self: left;
+    align-self: left;
 }
 
 #alignSelfRight {
-    -webkit-align-self: right;
+    align-self: right;
 }
 
 #alignSelfFlexStart {
-    -webkit-align-self: flex-start;
+    align-self: flex-start;
 }
 
 #alignSelfFlexEnd {
-    -webkit-align-self: flex-end;
+    align-self: flex-end;
 }
 
 #alignSelfEndUnsafe {
-    -webkit-align-self: end unsafe;
+    align-self: end unsafe;
 }
 
 #alignSelfCenterUnsafe {
-    -webkit-align-self: center unsafe;
+    align-self: center unsafe;
 }
 
 #alignSelfSelfEndSafe {
-    -webkit-align-self: self-end safe;
-x}
+    align-self: self-end safe;
+}
 
 #alignSelfSelfStartSafe {
-    -webkit-align-self: self-start safe;
+    align-self: self-start safe;
 }
 
 #alignSelfRightSafe {
-    -webkit-align-self: right safe;
+    align-self: right safe;
 }
 
 #alignSelfLeftUnsafe {
-    -webkit-align-self: left unsafe;
+    align-self: left unsafe;
 }
 
 #alignSelfFlexStartUnsafe {
-    -webkit-align-self: flex-start unsafe;
+    align-self: flex-start unsafe;
 }
 
 #alignSelfFlexEndSafe {
-    -webkit-align-self: flex-end safe;
+    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 @@ x}
 <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('-webkit-align-self')", "'baseline'");
-
-var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
-shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('-webkit-align-self')", "'last-baseline'");
-
-var alignSelfStretch = document.getElementById("alignSelfStretch");
-shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('-webkit-align-self')", "'stretch'");
-
-var alignSelfStart = document.getElementById("alignSelfStart");
-shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('-webkit-align-self')", "'start'");
-
-var alignSelfEnd = document.getElementById("alignSelfEnd");
-shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('-webkit-align-self')", "'end'");
-
-var alignSelfCenter = document.getElementById("alignSelfCenter");
-shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('-webkit-align-self')", "'center'");
-
-var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
-shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('-webkit-align-self')", "'self-end'");
-
-var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
-shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('-webkit-align-self')", "'self-start'");
-
-var alignSelfLeft = document.getElementById("alignSelfLeft");
-shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('-webkit-align-self')", "'left'");
-
-var alignSelfRight = document.getElementById("alignSelfRight");
-shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('-webkit-align-self')", "'right'");
-
-var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
-shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('-webkit-align-self')", "'flex-start'");
-
-var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
-shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('-webkit-align-self')", "'flex-end'");
-
-var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
-shouldBe("getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('-webkit-align-self')", "'end unsafe'");
-
-var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
-shouldBe("getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('-webkit-align-self')", "'center unsafe'");
-
-var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
-shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('-webkit-align-self')", "'self-end safe'");
-
-var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
-shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('-webkit-align-self')", "'self-start safe'");
-
-var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
-shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('-webkit-align-self')", "'right safe'");
-
-var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
-shouldBe("getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('-webkit-align-self')", "'left unsafe'");
-
-var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe");
-shouldBe("getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('-webkit-align-self')", "'flex-start unsafe'");
-
-var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
-shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('-webkit-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('-webkit-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.webkitAlignSelf = "center";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "center", "center");
-
-element.style.webkitAlignSelf = "unsafe start";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "start unsafe", "start unsafe");
-
-element.style.webkitAlignSelf = "flex-end safe";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "flex-end safe", "flex-end safe");
-
-element.style.webkitAlignSelf = "right";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "right", "right");
-
-element.style.webkitAlignSelf = "center";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "center", "center");
-
-element.style.webkitAlignSelf = "self-start";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "self-start", "self-start");
-
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "normal");
-
-container.style.display = "-webkit-flex";
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "normal");
-
-container.style.display = "grid";
-element.style.webkitAlignSelf = "auto";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto", "normal");
-
-element.style.webkitAlignSelf = "self-end";
-checkValues(element, "webkitAlignSelf", "-webkit-align-self",  "self-end", "self-end");
-
-debug("");
-debug("Test 'auto' value resolution for the root node");
-document.documentElement.style.webkitAlignSelf = "auto";
-checkValues(document.documentElement, "webkitAlignSelf", "-webkit-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, "webkitAlignSelf", "-webkit-align-self",  "unsafe auto");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "auto left");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline center");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch right");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "unsafe unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "unsafe safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "center start");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "stretch unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "safe stretch");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "baseline safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "unsafe baseline");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "unsafe safe left");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "unsafe left safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "left safe unsafe safe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy start");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy end");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy right unsafe");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy auto");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy stretch");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy");
-checkBadValues(element, "webkitAlignSelf", "-webkit-align-self",  "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-container.style.display = "";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-container.style.display = "-webkit-grid";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-container.style.display = "-webkit-flex";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements");
-container.style.display = "";
-element.style.position = "absolute";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-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, "webkitAlignSelf", "-webkit-align-self", "right", "normal");
-
-debug("");
-debug("Test the value 'initial' for positioned elements in grid containers");
-container.style.display = "-webkit-flex";
-element.style.position = "absolute";
-checkInitialValues(element, "webkitAlignSelf", "-webkit-align-self", "end", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("webkitAlignSelf", "-webkit-align-self", "end");
-checkInheritValues("webkitAlignSelf", "-webkit-align-self", "left safe");
-checkInheritValues("webkitAlignSelf", "-webkit-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>
index 4bfe591..e8b6e92 100644 (file)
@@ -3,7 +3,7 @@ function checkValues(element, property, propertyID, value, computedValue)
     window.element = element;
     var elementID = element.id || "element";
     assert_equals(eval('element.style.' + property), value, property + ' specified value is not what it should.');
-    assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what it should.");
+    assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what is should.");
 }
 
 function checkBadValues(element, property, propertyID, value)
index 6332a2f..1b578c1 100644 (file)
 Test that setting and getting justify-items works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting justify-items set through CSS
-PASS getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items') is 'baseline'
-PASS getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items') is 'last-baseline'
-PASS getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items') is 'stretch'
-PASS getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items') is 'start'
-PASS getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items') is 'end'
-PASS getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items') is 'center'
-PASS getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items') is 'self-end'
-PASS getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items') is 'self-start'
-PASS getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items') is 'left'
-PASS getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items') is 'right'
-PASS getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items') is 'flex-start'
-PASS getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items') is 'flex-end'
-PASS getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items') is 'end unsafe'
-PASS getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items') is 'center unsafe'
-PASS getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items') is 'self-end safe'
-PASS getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items') is 'self-start safe'
-PASS getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items') is 'right safe'
-PASS getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items') is 'left unsafe'
-PASS getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items') is 'flex-start unsafe'
-PASS getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items') is 'flex-end safe'
-PASS getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items') is 'legacy left'
-PASS getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items') is 'legacy center'
-PASS getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items') is 'legacy right'
-PASS getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items') is 'legacy left'
-PASS getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items') is 'legacy center'
-PASS getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items') is 'legacy right'
-
-Test initial value of justify-items through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'normal'
-
-Test getting and setting justify-items through JS
-PASS element.style.justifyItems is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
-PASS element.style.justifyItems is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start unsafe"
-PASS element.style.justifyItems is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "flex-end safe"
-PASS element.style.justifyItems is "legacy right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "legacy left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "self-end"
-
-Test bad combinations of justify-items
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial'
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.justifyItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.justifyItems is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "right unsafe"
-PASS element.style.justifyItems is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "normal"
-
-Test the value 'inherit'
-PASS element.style.justifyItems is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
-PASS element.style.justifyItems is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-
-Test the value 'legacy'
-PASS element.style.justifyItems is "legacy left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
-PASS element.style.justifyItems is "legacy center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
-PASS element.style.justifyItems is "legacy right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS element.style.justifyItems is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting justify-items set through CSS. 
+PASS Test initial value of justify-items through JS 
+PASS Test getting and setting justify-items through JS 
+PASS Test 'auto' value resolution for the root node 
+PASS Test bad combinations of justify-items 
+PASS Test the value 'initial' 
+PASS Test the value 'initial' for grid containers 
+PASS Test the value 'initial' for flex containers 
+PASS Test the value 'inherit' 
+PASS Test the value 'legacy' 
 
index 3a2aa6a..21d8d71 100644 (file)
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
-<html>
-<head>
 <style>
 #justifyItemsBaseline {
     justify-items: baseline;
 }
 
+#justifyItemsFirstBaseline {
+    justify-items: first baseline;
+}
+
 #justifyItemsLastBaseline {
-    justify-items: last-baseline;
+    justify-items: last baseline;
 }
 
 #justifyItemsStretch {
     justify-items: right legacy;
 }
 </style>
-<script src="../../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting justify-items works as expected</p>
 <div id="justifyItemsBaseline"></div>
+<div id="justifyItemsFirstBaseline"></div>
 <div id="justifyItemsLastBaseline"></div>
 <div id="justifyItemsStretch"></div>
 <div id="justifyItemsStart"></div>
 <div id="justifyItemsLeftLegacy"></div>
 <div id="justifyItemsCenterLegacy"></div>
 <div id="justifyItemsRightLegacy"></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-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 justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
-shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items')", "'end unsafe'");
-
-var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
-shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items')", "'center unsafe'");
-
-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 justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
-shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items')", "'left unsafe'");
-
-var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
-shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items')", "'flex-start unsafe'");
-
-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'");
-
-var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
-shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");
-
-var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
-shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");
-
-var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
-shouldBe("getComputedStyle(justifyItemsRightLegacy, '').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')", "'normal'");
-
-debug("");
-debug("Test getting and setting justify-items through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.justifyItems = "center";
-checkValues(element, "justifyItems", "justify-items",  "center", "center");
-
-element.style.justifyItems = "unsafe start";
-checkValues(element, "justifyItems", "justify-items",  "start unsafe", "start unsafe");
-
-element.style.justifyItems = "flex-end safe";
-checkValues(element, "justifyItems", "justify-items",  "flex-end safe", "flex-end safe");
-
-element.style.justifyItems = "right legacy";
-checkValues(element, "justifyItems", "justify-items",  "legacy right", "legacy right");
-
-element.style.justifyItems = "center legacy";
-checkValues(element, "justifyItems", "justify-items",  "legacy center", "legacy center");
-
-element.style.justifyItems = "left legacy";
-checkValues(element, "justifyItems", "justify-items",  "legacy left", "legacy left");
-
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
-
-element.style.display = "flex";
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
-
-element.style.display = "grid";
-element.style.justifyItems = "auto";
-checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
-
-element.style.justifyItems = "self-end";
-checkValues(element, "justifyItems", "justify-items",  "self-end", "self-end");
-
-debug("");
-debug("Test bad combinations of justify-items");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe auto");
-checkBadValues(element, "justifyItems", "justify-items",  "auto safe");
-checkBadValues(element, "justifyItems", "justify-items",  "auto left");
-checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
-checkBadValues(element, "justifyItems", "justify-items",  "baseline center");
-checkBadValues(element, "justifyItems", "justify-items",  "stretch unsafe");
-checkBadValues(element, "justifyItems", "justify-items",  "stretch right");
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe unsafe");
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe safe");
-checkBadValues(element, "justifyItems", "justify-items",  "center start");
-checkBadValues(element, "justifyItems", "justify-items",  "stretch unsafe");
-checkBadValues(element, "justifyItems", "justify-items",  "safe stretch");
-checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe baseline");
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe safe left");
-checkBadValues(element, "justifyItems", "justify-items",  "unsafe left safe");
-checkBadValues(element, "justifyItems", "justify-items",  "left safe unsafe safe");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy start");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy end");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy right unsafe");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy auto");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy stretch");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy");
-checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "flex";
-checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifyItems", "justify-items", "end");
-checkInheritValues("justifyItems", "justify-items", "left safe");
-checkInheritValues("justifyItems", "justify-items", "legacy center");
-
-debug("");
-debug("Test the value 'legacy'");
-checkLegacyValues("justifyItems", "justify-items", "legacy left");
-checkLegacyValues("justifyItems", "justify-items", "legacy center");
-checkLegacyValues("justifyItems", "justify-items", "legacy right");
-
+test(function() {
+    var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
+    checkValues(justifyItemsBaseline, "justifyItems", "justify-items", "", "baseline");
+    var justifyItemsFirstBaseline = document.getElementById("justifyItemsFirstBaseline");
+    checkValues(justifyItemsFirstBaseline, "justifyItems", "justify-items", "", "baseline");
+    var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
+    checkValues(justifyItemsLastBaseline, "justifyItems", "justify-items", "", "last baseline");
+    var justifyItemsStretch = document.getElementById("justifyItemsStretch");
+    checkValues(justifyItemsStretch, "justifyItems", "justify-items", "", "stretch");
+    var justifyItemsStart = document.getElementById("justifyItemsStart");
+    checkValues(justifyItemsStart, "justifyItems", "justify-items", "", "start");
+    var justifyItemsEnd = document.getElementById("justifyItemsEnd");
+    checkValues(justifyItemsEnd, "justifyItems", "justify-items", "", "end");
+    var justifyItemsCenter = document.getElementById("justifyItemsCenter");
+    checkValues(justifyItemsCenter, "justifyItems", "justify-items", "", "center");
+    var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
+    checkValues(justifyItemsSelfEnd, "justifyItems", "justify-items", "", "self-end");
+    var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
+    checkValues(justifyItemsSelfStart, "justifyItems", "justify-items", "", "self-start");
+    var justifyItemsLeft = document.getElementById("justifyItemsLeft");
+    checkValues(justifyItemsLeft, "justifyItems", "justify-items", "", "left");
+    var justifyItemsRight = document.getElementById("justifyItemsRight");
+    checkValues(justifyItemsRight, "justifyItems", "justify-items", "", "right");
+    var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
+    checkValues(justifyItemsFlexStart, "justifyItems", "justify-items", "", "flex-start");
+    var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
+    checkValues(justifyItemsFlexEnd, "justifyItems", "justify-items", "", "flex-end");
+
+    var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
+    checkValues(justifyItemsEndUnsafe, "justifyItems", "justify-items", "", "end unsafe");
+    var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
+    checkValues(justifyItemsCenterUnsafe, "justifyItems", "justify-items", "", "center unsafe");
+    var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
+    checkValues(justifyItemsSelfEndSafe, "justifyItems", "justify-items", "", "self-end safe");
+    var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
+    checkValues(justifyItemsSelfStartSafe, "justifyItems", "justify-items", "", "self-start safe");
+    var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
+    checkValues(justifyItemsRightSafe, "justifyItems", "justify-items", "", "right safe");
+    var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
+    checkValues(justifyItemsLeftUnsafe, "justifyItems", "justify-items", "", "left unsafe");
+    var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
+    checkValues(justifyItemsFlexStartUnsafe, "justifyItems", "justify-items", "", "flex-start unsafe");
+    var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
+    checkValues(justifyItemsFlexEndSafe, "justifyItems", "justify-items", "", "flex-end safe");
+    var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
+    checkValues(justifyItemsLegacyLeft, "justifyItems", "justify-items", "", "legacy left");
+    var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
+    checkValues(justifyItemsLegacyCenter, "justifyItems", "justify-items", "", "legacy center");
+    var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
+    checkValues(justifyItemsLegacyRight, "justifyItems", "justify-items", "", "legacy right");
+    var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
+    checkValues(justifyItemsLeftLegacy, "justifyItems", "justify-items", "", "legacy left");
+    var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
+    checkValues(justifyItemsCenterLegacy, "justifyItems", "justify-items", "", "legacy center");
+    var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
+    checkValues(justifyItemsRightLegacy, "justifyItems", "justify-items", "", "legacy right");
+}, "Test getting justify-items set through CSS.");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    checkValues(element, "justifyItems", "justify-items", "", "normal");
+}, "Test initial value of justify-items through JS");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.justifyItems = "center";
+    checkValues(element, "justifyItems", "justify-items",  "center", "center");
+
+    element.style.justifyItems = "unsafe start";
+    checkValues(element, "justifyItems", "justify-items",  "start unsafe", "start unsafe");
+
+    element.style.justifyItems = "flex-end safe";
+    checkValues(element, "justifyItems", "justify-items",  "flex-end safe", "flex-end safe");
+
+    element.style.justifyItems = "right legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy right", "legacy right");
+
+    element.style.justifyItems = "center legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy center", "legacy center");
+
+    element.style.justifyItems = "left legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy left", "legacy left");
+
+    element.style.justifyItems = "auto";
+    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+
+    element.style.display = "flex";
+    element.style.justifyItems = "auto";
+    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+
+    element.style.display = "grid";
+    element.style.justifyItems = "auto";
+    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+
+    element.style.justifyItems = "self-end";
+    checkValues(element, "justifyItems", "justify-items",  "self-end", "self-end");
+}, "Test getting and setting justify-items through JS");
+
+test(function() {
+    document.documentElement.style.justifyItems = "auto";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "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, "justifyItems", "justify-items",  "unsafe auto");
+    checkBadValues(element, "justifyItems", "justify-items",  "auto safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "auto left");
+    checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "baseline center");
+    checkBadValues(element, "justifyItems", "justify-items",  "stretch unsafe");
+    checkBadValues(element, "justifyItems", "justify-items",  "stretch right");
+    checkBadValues(element, "justifyItems", "justify-items",  "unsafe unsafe");
+    checkBadValues(element, "justifyItems", "justify-items",  "unsafe safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "center start");
+    checkBadValues(element, "justifyItems", "justify-items",  "stretch unsafe");
+    checkBadValues(element, "justifyItems", "justify-items",  "safe stretch");
+    checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "unsafe baseline");
+    checkBadValues(element, "justifyItems", "justify-items",  "unsafe safe left");
+    checkBadValues(element, "justifyItems", "justify-items",  "unsafe left safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "left safe unsafe safe");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy start");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy end");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy right unsafe");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy auto");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy stretch");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy");
+    checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");
+}, "Test bad combinations of justify-items");
+
+test(function() {
+    element.style.display = "";
+    checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+    element.style.display = "grid";
+    checkInitialValues(element, "justifyItems", "justify-items", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+    element.style.display = "flex";
+    checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+    checkInheritValues("justifyItems", "justify-items", "end");
+    checkInheritValues("justifyItems", "justify-items", "left safe");
+    checkInheritValues("justifyItems", "justify-items", "legacy center");
+}, "Test the value 'inherit'");
+
+test(function() {
+    checkLegacyValues("justifyItems", "justify-items", "legacy left");
+    checkLegacyValues("justifyItems", "justify-items", "legacy center");
+    checkLegacyValues("justifyItems", "justify-items", "legacy right");
+}, "Test the value 'legacy'");
 </script>
-</body>
-</html>
index cf7b29c..5d5811d 100644 (file)
 Test that setting and getting justify-self works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting justify-self set through CSS
-PASS getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-self') is 'baseline'
-PASS getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justify-self') is 'last-baseline'
-PASS getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self') is 'stretch'
-PASS getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self') is 'start'
-PASS getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self') is 'end'
-PASS getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self') is 'center'
-PASS getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self') is 'self-end'
-PASS getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self') is 'self-start'
-PASS getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') is 'left'
-PASS getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self') is 'right'
-PASS getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-self') is 'flex-start'
-PASS getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-self') is 'flex-end'
-PASS getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self') is 'end unsafe'
-PASS getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self') is 'center unsafe'
-PASS getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self') is 'self-end safe'
-PASS getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self') is 'self-start safe'
-PASS getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self') is 'right safe'
-PASS getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self') is 'left unsafe'
-PASS getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('justify-self') is 'flex-start unsafe'
-PASS getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify-self') is 'flex-end safe'
-
-Test initial value of justify-self through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-self') is 'normal'
-
-Test getting and setting justify-self through JS
-PASS element.style.justifySelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
-PASS element.style.justifySelf is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "start unsafe"
-PASS element.style.justifySelf is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "flex-end safe"
-PASS element.style.justifySelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
-PASS element.style.justifySelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
-PASS element.style.justifySelf is "self-start"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-start"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is "auto"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is "self-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "self-end"
-
-Test bad combinations of justify-self
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-PASS element.style.justifySelf is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial'
-PASS element.style.justifySelf is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.justifySelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.justifySelf is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right unsafe"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial' for positioned elements
-PASS element.style.justifySelf is "left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.justifySelf is "right"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "right"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'initial' for positioned elements in grid containers
-PASS element.style.justifySelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
-PASS element.style.justifySelf is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "normal"
-
-Test the value 'inherit'
-PASS element.style.justifySelf is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
-PASS element.style.justifySelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "end"
-PASS element.style.justifySelf is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
-PASS element.style.justifySelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "left safe"
-PASS element.style.justifySelf is "center unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
-PASS element.style.justifySelf is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-self') is "center unsafe"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting justify-self set through CSS. 
+PASS Test initial value of justify-self through JS 
+PASS Test getting and setting justify-self through JS 
+PASS Test 'auto' value resolution for the root node 
+PASS Test bad combinations of justify-self 
+PASS Test the value 'initial' 
+PASS Test the value 'initial' for grid containers 
+PASS Test the value 'initial' for flex containers 
+PASS Test the value 'initial' for positioned elements 
+PASS Test the value 'initial' for positioned elements in grid containers 
+PASS Test the value 'initial' for positioned elements in grid containers 
+PASS Test the value 'inherit' 
 
index 31f0bc6..4a4b760 100644 (file)
@@ -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 {
     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>
 <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 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>
diff --git a/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js b/LayoutTests/fast/css/resources/alignment-parsing-utils-th.js
new file mode 100644 (file)
index 0000000..e8b6e92
--- /dev/null
@@ -0,0 +1,55 @@
+function checkValues(element, property, propertyID, value, computedValue)
+{
+    window.element = element;
+    var elementID = element.id || "element";
+    assert_equals(eval('element.style.' + property), value, property + ' specified value is not what it should.');
+    assert_equals(eval("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')"), computedValue, property + " is not what is should.");
+}
+
+function checkBadValues(element, property, propertyID, value)
+{
+    var elementID = element.id || "element";
+    var initialValue = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + propertyID + "')");
+    element.style[property] = value;
+    checkValues(element, property, propertyID, "", initialValue);
+}
+
+function checkInitialValues(element, property, propertyID, value, initial)
+{
+    element.style[property] = value;
+    checkValues(element, property, propertyID, value, value);
+    element.style[property] = "initial";
+    checkValues(element, property, propertyID, "initial", initial);
+}
+
+function checkInheritValues(property, propertyID, value)
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style[property] = value;
+    checkValues(parentElement, property, propertyID, value, value);
+
+    var element = document.createElement("div");
+    parentElement.appendChild(element);
+    element.style[property] = "inherit";
+    checkValues(element, property, propertyID, "inherit", value);
+}
+
+function checkLegacyValues(property, propertyID, value)
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style[property] = value;
+    checkValues(parentElement, property, propertyID, value, value);
+
+    var element = document.createElement("div");
+    parentElement.appendChild(element);
+    checkValues(element, property, propertyID, "", value);
+}
+
+function checkSupportedValues(elementID, property)
+{
+    var value = eval("window.getComputedStyle(" + elementID + " , '').getPropertyValue('" + property + "')");
+    var value1 = eval("window.getComputedStyle(" + elementID + " , '')");
+    shouldBeTrue("CSS.supports('" + property + "', '" + value + "')");
+}
index 54589eb..4bdb99b 100644 (file)
@@ -1,3 +1,35 @@
+2017-03-29  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Adapt self-alignment properties to the new baseline syntax
+        https://bugs.webkit.org/show_bug.cgi?id=170235
+
+        Reviewed by David Hyatt.
+
+        The baseline-position syntax has changed recently, so we need to update
+        the CSS properties using the old syntax. This patch address only the
+        self-alignment (align-self and justify-self) and default-alignment
+        (align-items and justify-items).
+
+        The content-distribution properties (align-content and justify-content)
+        will be updated in a follow up patch.
+
+        The new baseline syntax is "[first | last ]? baseline" which implies
+        modifying the parsing and computed value logic.
+
+        There are several layout tests affected by this change, so I'll update
+        them accordingly.
+
+        No new tests, just added/modified some cases to the tests we already have using the new baseline values.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForItemPositionWithOverflowAlignment):
+        * css/CSSValueKeywords.in:
+        * css/StyleBuilderConverter.h:
+        (WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData):
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::consumeBaselineKeyword):
+        (WebCore::consumeSelfPositionOverflowPosition):
+
 2017-03-29  Chris Dumez  <cdumez@apple.com>
 
         Animated SVG images are not paused in pages loaded in the background
index a2abd17..f5c5c45 100644 (file)
@@ -2462,7 +2462,13 @@ static Ref<CSSValueList> valueForItemPositionWithOverflowAlignment(const StyleSe
     auto result = CSSValueList::createSpaceSeparated();
     if (data.positionType() == LegacyPosition)
         result->append(cssValuePool.createIdentifierValue(CSSValueLegacy));
-    result->append(cssValuePool.createValue(data.position()));
+    if (data.position() == ItemPositionBaseline)
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+    else if (data.position() == ItemPositionLastBaseline) {
+        result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+    } else
+        result->append(cssValuePool.createValue(data.position()));
     if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
         result->append(cssValuePool.createValue(data.overflow()));
     ASSERT(result->length() <= 2);
index f415324..5a8cc22 100644 (file)
@@ -606,7 +606,8 @@ last-baseline
 // auto
 // stretch
 // baseline
-// last-baseline
+// last baseline
+// first baseline
 // center
 // start
 // end
index 4c14a1f..4c8c442 100644 (file)
@@ -1361,6 +1361,10 @@ inline StyleSelfAlignmentData StyleBuilderConverter::convertSelfOrDefaultAlignme
         if (pairValue->first()->valueID() == CSSValueLegacy) {
             alignmentData.setPositionType(LegacyPosition);
             alignmentData.setPosition(*pairValue->second());
+        } else if (pairValue->first()->valueID() == CSSValueFirst) {
+            alignmentData.setPosition(ItemPositionBaseline);
+        } else if (pairValue->first()->valueID() == CSSValueLast) {
+            alignmentData.setPosition(ItemPositionLastBaseline);
         } else {
             alignmentData.setPosition(*pairValue->first());
             alignmentData.setOverflow(*pairValue->second());
index 6fcdbf6..725efd9 100644 (file)
@@ -3017,11 +3017,27 @@ static RefPtr<CSSPrimitiveValue> consumeSelfPositionKeyword(CSSParserTokenRange&
     return nullptr;
 }
 
+static RefPtr<CSSValue> consumeBaselineKeyword(CSSParserTokenRange& range)
+{
+    CSSValueID id = range.peek().id();
+    if (identMatches<CSSValueBaseline>(id))
+        return consumeIdent(range);
+
+    if (RefPtr<CSSPrimitiveValue> preference = consumeIdent<CSSValueFirst, CSSValueLast>(range)) {
+        if (range.peek().id() == CSSValueBaseline)
+            return createPrimitiveValuePair(preference.releaseNonNull(), consumeIdent(range), Pair::IdenticalValueEncoding::Coalesce);
+    }
+    return nullptr;
+}
+
 static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
 {
-    if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch, CSSValueBaseline, CSSValueLastBaseline>(range.peek().id()))
+    if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(range.peek().id()))
         return consumeIdent(range);
 
+    if (identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(range.peek().id()))
+        return consumeBaselineKeyword(range);
+
     RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);
     RefPtr<CSSPrimitiveValue> selfPosition = consumeSelfPositionKeyword(range);
     if (!selfPosition)