[css-align] Adapt content-alignment properties to the new baseline syntax
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Mar 2017 21:27:09 +0000 (21:27 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Mar 2017 21:27:09 +0000 (21:27 +0000)
https://bugs.webkit.org/show_bug.cgi?id=170262

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
content-alignment (align-content and justify-content).

I used this patch to adapt the implementation of the parsing logic for
these properties to the new Blink's CSS Parsing Design.

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::valueForContentPositionAndDistributionWithOverflowAlignment):
* css/CSSContentDistributionValue.cpp:
(WebCore::CSSContentDistributionValue::customCSSText):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::operator ItemPosition):
(WebCore::CSSPrimitiveValue::operator ContentPosition):
* css/CSSValueKeywords.in:
* css/parser/CSSPropertyParser.cpp:
(WebCore::isBaselineKeyword):
(WebCore::consumeBaselineKeyword):
(WebCore::consumeContentDistributionOverflowPosition):
(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-content-expected.txt:
* css3/parse-align-content.html:
* css3/parse-justify-content-expected.txt:
* css3/parse-justify-content.html:

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

LayoutTests/ChangeLog
LayoutTests/css3/parse-align-content-expected.txt
LayoutTests/css3/parse-align-content.html
LayoutTests/css3/parse-justify-content-expected.txt
LayoutTests/css3/parse-justify-content.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSContentDistributionValue.cpp
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/parser/CSSPropertyParser.cpp

index f6ce82e..fece93e 100644 (file)
@@ -1,3 +1,19 @@
+2017-03-30  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Adapt content-alignment properties to the new baseline syntax
+        https://bugs.webkit.org/show_bug.cgi?id=170262
+
+        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-content-expected.txt:
+        * css3/parse-align-content.html:
+        * css3/parse-justify-content-expected.txt:
+        * css3/parse-justify-content.html:
+
 2017-03-30  James Craig  <jcraig@apple.com>
 
         AX: Expose a new AXSubrole for explicit ARIA "group" role
index 23dc0cd..196ba81 100644 (file)
 Test that setting and getting align-content works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting align-content set through CSS
-PASS getComputedStyle(alignContentAuto, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content') is "baseline"
-PASS getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content') is "last-baseline"
-PASS getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content') is "space-between"
-PASS getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content') is "space-around"
-PASS getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content') is "space-evenly"
-PASS getComputedStyle(alignContentStretch, '').getPropertyValue('align-content') is "stretch"
-PASS getComputedStyle(alignContentStart, '').getPropertyValue('align-content') is "start"
-PASS getComputedStyle(alignContentEnd, '').getPropertyValue('align-content') is "end"
-PASS getComputedStyle(alignContentCenter, '').getPropertyValue('align-content') is "center"
-PASS getComputedStyle(alignContentLeft, '').getPropertyValue('align-content') is "left"
-PASS getComputedStyle(alignContentRight, '').getPropertyValue('align-content') is "right"
-PASS getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content') is "flex-start"
-PASS getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content') is "flex-end"
-PASS getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content') is "end unsafe"
-PASS getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content') is "center unsafe"
-PASS getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content') is "right safe"
-PASS getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content') is "left unsafe"
-PASS getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content') is "flex-start unsafe"
-PASS getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content') is "flex-end safe"
-PASS getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content') is "space-between left"
-PASS getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content') is "space-around center"
-PASS getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content') is "space-evenly right"
-PASS getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content') is "stretch start safe"
-PASS getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content') is "space-around end unsafe"
-PASS getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentSafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content') is "normal"
-PASS getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content') is "normal"
-
-Test initial value of align-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test getting and setting align-content through JS
-PASS element.style.alignContent is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "center"
-PASS element.style.alignContent is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "start unsafe"
-PASS element.style.alignContent is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end safe"
-PASS element.style.alignContent is "space-between right safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between right safe"
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is "flex-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "flex-end"
-
-Test bad combinations of align-content
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-PASS element.style.alignContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial'
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.alignContent is "space-between left"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "space-between left"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.alignContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "right unsafe"
-PASS element.style.alignContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "normal"
-
-Test the value 'inherit'
-PASS element.style.alignContent is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "end"
-PASS element.style.alignContent is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "left safe"
-PASS element.style.alignContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS element.style.alignContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('align-content') is "stretch center"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting align-content values previously set through CSS. 
+PASS Test setting invalid values to align-content through CSS. 
+PASS Test initial value of align-content through JS 
+PASS Test getting and setting align-content through JS 
+PASS Test bad combinations of align-content 
+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 408b895..2222848 100644 (file)
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html>
-<head>
 <style>
 #alignContentAuto {
     align-content: auto;
@@ -10,8 +8,12 @@
     align-content: baseline;
 }
 
+#alignContentFirstBaseline {
+    align-content: first baseline;
+}
+
 #alignContentLastBaseline {
-    align-content: last-baseline;
+    align-content: last baseline;
 }
 
 #alignContentSpaceBetween {
     align-content: center left;
 }
 </style>
-<script src="../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting align-content works as expected</p>
 <div id="alignContentAuto"></div>
 <div id="alignContentBaseline"></div>
+<div id="alignContentFirstBaseline"></div>
 <div id="alignContentLastBaseline"></div>
 <div id="alignContentSpaceBetween"></div>
 <div id="alignContentSpaceAround"></div>
 <div id="alignContentSpaceEvenly"></div>
 <div id="alignContentStretch"></div>
-<div id="alignContentSpaceBetweenSafe"></div>
-<div id="alignContentSpaceAroundUnsafe"></div>
-<div id="alignContentStretchUnsafe"></div>
-<div id="alignContentStretchrue"></div>
 <div id="alignContentStart"></div>
 <div id="alignContentEnd"></div>
 <div id="alignContentCenter"></div>
 <div id="alignContentRightSafeUnsafe"></div>
 <div id="alignContentCenterLeft"></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-content works as expected');
-
-debug("Test getting align-content set through CSS");
-var alignContentAuto = document.getElementById("alignContentAuto");
-shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue('align-content')", "normal");
-
-var alignContentBaseline = document.getElementById("alignContentBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyValue('align-content')", "baseline");
-
-var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropertyValue('align-content')", "last-baseline");
-
-var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropertyValue('align-content')", "space-between");
-
-var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAround, '').getPropertyValue('align-content')", "space-around");
-
-var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenly, '').getPropertyValue('align-content')", "space-evenly");
-
-var alignContentStretch = document.getElementById("alignContentStretch");
-shouldBeEqualToString("getComputedStyle(alignContentStretch, '').getPropertyValue('align-content')", "stretch");
-
-var alignContentStart = document.getElementById("alignContentStart");
-shouldBeEqualToString("getComputedStyle(alignContentStart, '').getPropertyValue('align-content')", "start");
-
-var alignContentEnd = document.getElementById("alignContentEnd");
-shouldBeEqualToString("getComputedStyle(alignContentEnd, '').getPropertyValue('align-content')", "end");
-
-var alignContentCenter = document.getElementById("alignContentCenter");
-shouldBeEqualToString("getComputedStyle(alignContentCenter, '').getPropertyValue('align-content')", "center");
-
-var alignContentLeft = document.getElementById("alignContentLeft");
-shouldBeEqualToString("getComputedStyle(alignContentLeft, '').getPropertyValue('align-content')", "left");
-
-var alignContentRight = document.getElementById("alignContentRight");
-shouldBeEqualToString("getComputedStyle(alignContentRight, '').getPropertyValue('align-content')", "right");
-
-var alignContentFlexStart = document.getElementById("alignContentFlexStart");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStart, '').getPropertyValue('align-content')", "flex-start");
-
-var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(alignContentFlexEnd, '').getPropertyValue('align-content')", "flex-end");
-
-var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentEndUnsafe, '').getPropertyValue('align-content')", "end unsafe");
-
-var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentCenterUnsafe, '').getPropertyValue('align-content')", "center unsafe");
-
-var alignContentRightSafe = document.getElementById("alignContentRightSafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafe, '').getPropertyValue('align-content')", "right safe");
-
-var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentLeftUnsafe, '').getPropertyValue('align-content')", "left unsafe");
-
-var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentFlexStartUnsafe, '').getPropertyValue('align-content')", "flex-start unsafe");
-
-var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
-shouldBeEqualToString("getComputedStyle(alignContentFlexEndSafe, '').getPropertyValue('align-content')", "flex-end safe");
-
-var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenLeft, '').getPropertyValue('align-content')", "space-between left");
-
-var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundCenter, '').getPropertyValue('align-content')", "space-around center");
-
-var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyRight, '').getPropertyValue('align-content')", "space-evenly right");
-
-var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
-shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPropertyValue('align-content')", "stretch start safe");
-
-var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').getPropertyValue('align-content')", "space-around end unsafe");
-
-var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('align-content')", "space-evenly flex-start safe");
-
-var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe");
-shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getPropertyValue('align-content')", "normal");
-
-var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyValue('align-content')", "normal");
-
-debug("");
-debug("Test initial value of align-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-content')", "normal");
-
-debug("");
-debug("Test getting and setting align-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.alignContent = "center";
-checkValues(element, "alignContent", "align-content",  "center", "center");
-
-element.style.alignContent = "unsafe start";
-checkValues(element, "alignContent", "align-content",  "start unsafe", "start unsafe");
-
-element.style.alignContent = "flex-end safe";
-checkValues(element, "alignContent", "align-content",  "flex-end safe", "flex-end safe");
-
-element.style.alignContent = "space-between right safe";
-checkValues(element, "alignContent", "align-content",  "space-between right safe", "space-between right safe");
-
-element.style.alignContent = "stretch center";
-checkValues(element, "alignContent", "align-content",  "stretch center", "stretch center");
-
-element.style.alignContent = "right unsafe";
-checkValues(element, "alignContent", "align-content",  "right unsafe", "right unsafe");
-
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content",  "normal", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content",  "normal", "normal");
-
-element.style.display = "grid";
-element.style.alignContent = "normal";
-checkValues(element, "alignContent", "align-content",  "normal", "normal");
-
-element.style.alignContent = "flex-end";
-checkValues(element, "alignContent", "align-content",  "flex-end", "flex-end");
-
-debug("");
-debug("Test bad combinations of align-content");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "alignContent", "align-content",  "");
-checkBadValues(element, "alignContent", "align-content",  "auto");
-checkBadValues(element, "alignContent", "align-content",  "unsafe auto");
-checkBadValues(element, "alignContent", "align-content",  "auto safe");
-checkBadValues(element, "alignContent", "align-content",  "auto left");
-checkBadValues(element, "alignContent", "align-content",  "baseline safe");
-checkBadValues(element, "alignContent", "align-content",  "last baseline center");
-checkBadValues(element, "alignContent", "align-content",  "unsafe unsafe");
-checkBadValues(element, "alignContent", "align-content",  "unsafe safe");
-checkBadValues(element, "alignContent", "align-content",  "center start");
-checkBadValues(element, "alignContent", "align-content",  "baseline safe");
-checkBadValues(element, "alignContent", "align-content",  "unsafe baseline");
-checkBadValues(element, "alignContent", "align-content",  "unsafe safe left");
-checkBadValues(element, "alignContent", "align-content",  "unsafe left safe");
-checkBadValues(element, "alignContent", "align-content",  "left safe unsafe safe");
-checkBadValues(element, "alignContent", "align-content",  "start right space-between");
-checkBadValues(element, "alignContent", "align-content",  "safe stretch");
-checkBadValues(element, "alignContent", "align-content",  "space-around stretch");
-checkBadValues(element, "alignContent", "align-content",  "end space-between start");
-checkBadValues(element, "alignContent", "align-content",  "right safe left");
-checkBadValues(element, "alignContent", "align-content",  "unsafe");
-checkBadValues(element, "alignContent", "align-content",  "safe");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "alignContent", "align-content", "stretch center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "alignContent", "align-content", "space-between left", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("alignContent", "align-content", "end");
-checkInheritValues("alignContent", "align-content", "left safe");
-checkInheritValues("alignContent", "align-content", "stretch center");
-
+test(function() {
+    var alignContentAuto = document.getElementById("alignContentAuto");
+    checkValues(alignContentAuto, "alignContent", "align-content", "", "normal");
+    var alignContentBaseline = document.getElementById("alignContentBaseline");
+    checkValues(alignContentBaseline, "alignContent", "align-content", "", "baseline");
+    var alignContentLastBaseline = document.getElementById("alignContentFirstBaseline");
+    checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "baseline");
+    var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
+    checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "last baseline");
+    var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
+    checkValues(alignContentSpaceBetween, "alignContent", "align-content", "", "space-between");
+    var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
+    checkValues(alignContentSpaceAround, "alignContent", "align-content", "", "space-around");
+    var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
+    checkValues(alignContentSpaceEvenly, "alignContent", "align-content", "", "space-evenly");
+    var alignContentStretch = document.getElementById("alignContentStretch");
+    checkValues(alignContentStretch, "alignContent", "align-content", "", "stretch");
+    var alignContentStart = document.getElementById("alignContentStart");
+    checkValues(alignContentStart, "alignContent", "align-content", "", "start");
+    var alignContentEnd = document.getElementById("alignContentEnd");
+    checkValues(alignContentEnd, "alignContent", "align-content", "", "end");
+    var alignContentCenter = document.getElementById("alignContentCenter");
+    checkValues(alignContentCenter, "alignContent", "align-content", "", "center");
+    var alignContentLeft = document.getElementById("alignContentLeft");
+    checkValues(alignContentLeft, "alignContent", "align-content", "", "left");
+    var alignContentRight = document.getElementById("alignContentRight");
+    checkValues(alignContentRight, "alignContent", "align-content", "", "right");
+    var alignContentFlexStart = document.getElementById("alignContentFlexStart");
+    checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
+    var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
+    checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
+    var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
+    checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "end unsafe");
+    var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
+    checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "center unsafe");
+    var alignContentRightSafe = document.getElementById("alignContentRightSafe");
+    checkValues(alignContentRightSafe, "alignContent", "align-content", "", "right safe");
+    var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
+    checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "left unsafe");
+    var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
+    checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "flex-start unsafe");
+    var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
+    checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "flex-end safe");
+    var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
+    checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "space-between left");
+    var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
+    checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "space-around center");
+    var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
+    checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "space-evenly right");
+    var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
+    checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "stretch start safe");
+    var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
+    checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "space-around end unsafe");
+    var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
+    checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "space-evenly flex-start safe");
+}, "Test getting align-content values previously set through CSS.");
+
+test(function() {
+    var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
+    checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
+    var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
+    checkValues(alignContentSpaceBetweenStretch, "alignContent", "align-content", "", "normal");
+    var alignContentSafe = document.getElementById("alignContentSafe");
+    checkValues(alignContentSafe, "alignContent", "align-content", "", "normal");
+    var alignContentRightSafeUnsafe = document.getElementById("alignContentRightSafeUnsafe");
+    checkValues(alignContentRightSafeUnsafe, "alignContent", "align-content", "", "normal");
+    var alignContentCenterLeft = document.getElementById("alignContentCenterLeft");
+    checkValues(alignContentCenterLeft, "alignContent", "align-content", "", "normal");
+}, "Test setting invalid values to align-content through CSS.");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    checkValues(element, "alignContent", "align-content", "", "normal");
+}, "Test initial value of align-content through JS");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.alignContent = "center";
+    checkValues(element, "alignContent", "align-content",  "center", "center");
+
+    element.style.alignContent = "unsafe start";
+    checkValues(element, "alignContent", "align-content",  "start unsafe", "start unsafe");
+
+    element.style.alignContent = "flex-end safe";
+    checkValues(element, "alignContent", "align-content",  "flex-end safe", "flex-end safe");
+
+    element.style.alignContent = "space-between right safe";
+    checkValues(element, "alignContent", "align-content",  "space-between right safe", "space-between right safe");
+
+    element.style.alignContent = "stretch center";
+    checkValues(element, "alignContent", "align-content",  "stretch center", "stretch center");
+
+    element.style.alignContent = "right unsafe";
+    checkValues(element, "alignContent", "align-content",  "right unsafe", "right unsafe");
+
+    element.style.justifyContent = "first baseline";
+    checkValues(element, "justifyContent", "justify-content",  "first baseline", "baseline");
+
+    element.style.justifyContent = "last baseline";
+    checkValues(element, "justifyContent", "justify-content",  "last baseline", "last baseline");
+
+    element.style.alignContent = "normal";
+    checkValues(element, "alignContent", "align-content",  "normal", "normal");
+
+    element.style.display = "flex";
+    element.style.alignContent = "normal";
+    checkValues(element, "alignContent", "align-content",  "normal", "normal");
+
+    element.style.display = "grid";
+    element.style.alignContent = "normal";
+    checkValues(element, "alignContent", "align-content",  "normal", "normal");
+
+    element.style.alignContent = "flex-end";
+    checkValues(element, "alignContent", "align-content",  "flex-end", "flex-end");
+}, "Test getting and setting align-content through JS");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+
+    checkBadValues(element, "alignContent", "align-content",  "");
+    checkBadValues(element, "alignContent", "align-content",  "auto");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe auto");
+    checkBadValues(element, "alignContent", "align-content",  "auto safe");
+    checkBadValues(element, "alignContent", "align-content",  "auto left");
+    checkBadValues(element, "alignContent", "align-content",  "baseline safe");
+    checkBadValues(element, "alignContent", "align-content",  "last-baseline center");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe unsafe");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe safe");
+    checkBadValues(element, "alignContent", "align-content",  "center start");
+    checkBadValues(element, "alignContent", "align-content",  "baseline safe");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe baseline");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe safe left");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe left safe");
+    checkBadValues(element, "alignContent", "align-content",  "left safe unsafe safe");
+    checkBadValues(element, "alignContent", "align-content",  "start right space-between");
+    checkBadValues(element, "alignContent", "align-content",  "safe stretch");
+    checkBadValues(element, "alignContent", "align-content",  "normal space-between");
+    checkBadValues(element, "alignContent", "align-content",  "stretch normal");
+    checkBadValues(element, "alignContent", "align-content",  "normal safe");
+    checkBadValues(element, "alignContent", "align-content",  "space-around stretch");
+    checkBadValues(element, "alignContent", "align-content",  "end space-between start");
+    checkBadValues(element, "alignContent", "align-content",  "right safe left");
+    checkBadValues(element, "alignContent", "align-content",  "unsafe");
+    checkBadValues(element, "alignContent", "align-content",  "safe");
+}, "Test bad combinations of align-content");
+
+test(function() {
+    element.style.display = "";
+    checkInitialValues(element, "alignContent", "align-content", "center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+    element.style.display = "grid";
+    checkInitialValues(element, "alignContent", "align-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+    element.style.display = "flex";
+    checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+    checkInheritValues("alignContent", "align-content", "end");
+    checkInheritValues("alignContent", "align-content", "left safe");
+    checkInheritValues("alignContent", "align-content", "center unsafe");
+}, "Test the value 'inherit'");
 </script>
-</body>
-</html>
index eeaa69b..f6462d2 100644 (file)
 Test that setting and getting justify-content works as expected
 
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
-
-Test getting justify-content set through CSS
-PASS getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content') is "baseline"
-PASS getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content') is "last-baseline"
-PASS getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content') is "space-between"
-PASS getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content') is "space-around"
-PASS getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content') is "space-evenly"
-PASS getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content') is "stretch"
-PASS getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content') is "start"
-PASS getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content') is "end"
-PASS getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content') is "center"
-PASS getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content') is "left"
-PASS getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content') is "right"
-PASS getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content') is "flex-start"
-PASS getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content') is "flex-end"
-PASS getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content') is "end unsafe"
-PASS getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content') is "center unsafe"
-PASS getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content') is "right safe"
-PASS getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content') is "left unsafe"
-PASS getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content') is "flex-start unsafe"
-PASS getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content') is "flex-end safe"
-PASS getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content') is "space-between left"
-PASS getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content') is "space-around center"
-PASS getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content') is "space-evenly right"
-PASS getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content') is "stretch start safe"
-PASS getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content') is "space-around end unsafe"
-PASS getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content') is "space-evenly flex-start safe"
-PASS getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content') is "normal"
-PASS getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content') is "normal"
-
-Test initial value of justify-content through JS
-PASS getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test getting and setting justify-content through JS
-PASS element.style.justifyContent is "center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "center"
-PASS element.style.justifyContent is "start unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "start unsafe"
-PASS element.style.justifyContent is "flex-end safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end safe"
-PASS element.style.justifyContent is "space-between right safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between right safe"
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "normal"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is "flex-end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "flex-end"
-
-Test bad combinations of justify-content
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-PASS element.style.justifyContent is ""
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial'
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial' for grid containers
-PASS element.style.justifyContent is "space-between left"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "space-between left"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'initial' for flex containers
-PASS element.style.justifyContent is "right unsafe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "right unsafe"
-PASS element.style.justifyContent is "initial"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "normal"
-
-Test the value 'inherit'
-PASS element.style.justifyContent is "end"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "end"
-PASS element.style.justifyContent is "left safe"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "left safe"
-PASS element.style.justifyContent is "stretch center"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS element.style.justifyContent is "inherit"
-PASS window.getComputedStyle(element, '').getPropertyValue('justify-content') is "stretch center"
-PASS successfullyParsed is true
-
-TEST COMPLETE
+PASS Test getting justify-content values previously set through CSS. 
+PASS Test setting invalid values to justify-content through CSS. 
+PASS Test initial value of justify-content through JS 
+PASS Test getting and setting justify-content through JS 
+PASS Test bad combinations of justify-content 
+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 a3f66ee..832c2ad 100644 (file)
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-<html>
-<head>
 <style>
 #justifyContentAuto {
     justify-content: auto;
@@ -10,8 +8,12 @@
     justify-content: baseline;
 }
 
+#justifyContentFirstBaseline {
+    justify-content: first baseline;
+}
+
 #justifyContentLastBaseline {
-    justify-content: last-baseline;
+    justify-content: last baseline;
 }
 
 #justifyContentSpaceBetween {
     justify-content: center left;
 }
 </style>
-<script src="../resources/js-test.js"></script>
-</head>
-<body>
+<p>Test that setting and getting justify-content works as expected</p>
 <div id="justifyContentAuto"></div>
 <div id="justifyContentBaseline"></div>
+<div id="justifyContentFirstBaseline"></div>
 <div id="justifyContentLastBaseline"></div>
 <div id="justifyContentSpaceBetween"></div>
 <div id="justifyContentSpaceAround"></div>
 <div id="justifyContentRightSafeUnsafe"></div>
 <div id="justifyContentCenterLeft"></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-content works as expected');
-
-debug("Test getting justify-content set through CSS");
-var justifyContentAuto = document.getElementById("justifyContentAuto");
-shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentBaseline = document.getElementById("justifyContentBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "baseline");
-
-var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
-shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "last-baseline");
-
-var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "space-between");
-
-var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "space-around");
-
-var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "space-evenly");
-
-var justifyContentStretch = document.getElementById("justifyContentStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "stretch");
-
-var justifyContentStart = document.getElementById("justifyContentStart");
-shouldBeEqualToString("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "start");
-
-var justifyContentEnd = document.getElementById("justifyContentEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "end");
-
-var justifyContentCenter = document.getElementById("justifyContentCenter");
-shouldBeEqualToString("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "center");
-
-var justifyContentLeft = document.getElementById("justifyContentLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "left");
-
-var justifyContentRight = document.getElementById("justifyContentRight");
-shouldBeEqualToString("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "right");
-
-var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "flex-start");
-
-var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "flex-end");
-
-var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentEndUnsafe, '').getPropertyValue('justify-content')", "end unsafe");
-
-var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterUnsafe, '').getPropertyValue('justify-content')", "center unsafe");
-
-var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "right safe");
-
-var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentLeftUnsafe, '').getPropertyValue('justify-content')", "left unsafe");
-
-var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexStartUnsafe, '').getPropertyValue('justify-content')", "flex-start unsafe");
-
-var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "flex-end safe");
-
-var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "space-between left");
-
-var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "space-around center");
-
-var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "space-evenly right");
-
-var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "stretch start safe");
-
-var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, '').getPropertyValue('justify-content')", "space-around end unsafe");
-
-var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
-
-var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpaceBetweenStretch");
-shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSafe");
-shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
-shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPropertyValue('justify-content')", "normal");
-
-var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCenterLeft");
-shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropertyValue('justify-content')", "normal");
-
-debug("");
-debug("Test initial value of justify-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-content')", "normal");
-
-debug("");
-debug("Test getting and setting justify-content through JS");
-element = document.createElement("div");
-document.body.appendChild(element);
-element.style.justifyContent = "center";
-checkValues(element, "justifyContent", "justify-content",  "center", "center");
-
-element.style.justifyContent = "unsafe start";
-checkValues(element, "justifyContent", "justify-content",  "start unsafe", "start unsafe");
-
-element.style.justifyContent = "flex-end safe";
-checkValues(element, "justifyContent", "justify-content",  "flex-end safe", "flex-end safe");
-
-element.style.justifyContent = "space-between right safe";
-checkValues(element, "justifyContent", "justify-content",  "space-between right safe", "space-between right safe");
-
-element.style.justifyContent = "center stretch";
-checkValues(element, "justifyContent", "justify-content",  "stretch center", "stretch center");
-
-element.style.justifyContent = "right unsafe";
-checkValues(element, "justifyContent", "justify-content",  "right unsafe", "right unsafe");
-
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
-
-element.style.display = "-webkit-flex";
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
-
-element.style.display = "grid";
-element.style.justifyContent = "normal";
-checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
-
-element.style.justifyContent = "flex-end";
-checkValues(element, "justifyContent", "justify-content",  "flex-end", "flex-end");
-
-debug("");
-debug("Test bad combinations of justify-content");
-element = document.createElement("div");
-document.body.appendChild(element);
-
-checkBadValues(element, "justifyContent", "justify-content",  "");
-checkBadValues(element, "justifyContent", "justify-content",  "auto");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe auto");
-checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
-checkBadValues(element, "justifyContent", "justify-content",  "auto left");
-checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
-checkBadValues(element, "justifyContent", "justify-content",  "last baseline center");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe unsafe");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe");
-checkBadValues(element, "justifyContent", "justify-content",  "center start");
-checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe baseline");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe left");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe left safe");
-checkBadValues(element, "justifyContent", "justify-content",  "left safe unsafe safe");
-checkBadValues(element, "justifyContent", "justify-content",  "start right space-between");
-checkBadValues(element, "justifyContent", "justify-content",  "safe stretch");
-checkBadValues(element, "justifyContent", "justify-content",  "space-around stretch");
-checkBadValues(element, "justifyContent", "justify-content",  "end space-between start");
-checkBadValues(element, "justifyContent", "justify-content",  "right safe left");
-checkBadValues(element, "justifyContent", "justify-content",  "unsafe");
-checkBadValues(element, "justifyContent", "justify-content",  "safe");
-
-debug("");
-debug("Test the value 'initial'");
-element.style.display = "";
-checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "normal");
-
-debug("");
-debug("Test the value 'initial' for grid containers");
-element.style.display = "grid";
-checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
-
-debug("");
-debug("Test the value 'initial' for flex containers");
-element.style.display = "-webkit-flex";
-checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
-
-debug("");
-debug("Test the value 'inherit'");
-checkInheritValues("justifyContent", "justify-content", "end");
-checkInheritValues("justifyContent", "justify-content", "left safe");
-checkInheritValues("justifyContent", "justify-content", "stretch center");
+test(function() {
+    var justifyContentAuto = document.getElementById("justifyContentAuto");
+    checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal");
+    var justifyContentBaseline = document.getElementById("justifyContentBaseline");
+    checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "baseline");
+    var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
+    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "baseline");
+    var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
+    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "last baseline");
+    var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
+    checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between");
+    var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
+    checkValues(justifyContentSpaceAround, "justifyContent", "justify-content", "", "space-around");
+    var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
+    checkValues(justifyContentSpaceEvenly, "justifyContent", "justify-content", "", "space-evenly");
+    var justifyContentStretch = document.getElementById("justifyContentStretch");
+    checkValues(justifyContentStretch, "justifyContent", "justify-content", "", "stretch");
+    var justifyContentStart = document.getElementById("justifyContentStart");
+    checkValues(justifyContentStart, "justifyContent", "justify-content", "", "start");
+    var justifyContentEnd = document.getElementById("justifyContentEnd");
+    checkValues(justifyContentEnd, "justifyContent", "justify-content", "", "end");
+    var justifyContentCenter = document.getElementById("justifyContentCenter");
+    checkValues(justifyContentCenter, "justifyContent", "justify-content", "", "center");
+    var justifyContentLeft = document.getElementById("justifyContentLeft");
+    checkValues(justifyContentLeft, "justifyContent", "justify-content", "", "left");
+    var justifyContentRight = document.getElementById("justifyContentRight");
+    checkValues(justifyContentRight, "justifyContent", "justify-content", "", "right");
+    var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
+    checkValues(justifyContentFlexStart, "justifyContent", "justify-content", "", "flex-start");
+    var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
+    checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "", "flex-end");
+    var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
+    checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "end unsafe");
+    var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
+    checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "center unsafe");
+    var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
+    checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "right safe");
+    var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
+    checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "left unsafe");
+    var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
+    checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "flex-start unsafe");
+    var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
+    checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "flex-end safe");
+    var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
+    checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "space-between left");
+    var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
+    checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "space-around center");
+    var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
+    checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "space-evenly right");
+    var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
+    checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "stretch start safe");
+    var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
+    checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "space-around end unsafe");
+    var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
+    checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "space-evenly flex-start safe");
+}, "Test getting justify-content values previously set through CSS.");
+
+test(function() {
+    var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
+    checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-content", "", "normal");
+    var justifyContentSpaceBetweenStretch = document.getElementById("justifyContentSpaceBetweenStretch");
+    checkValues(justifyContentSpaceBetweenStretch, "justifyContent", "justify-content", "", "normal");
+    var justifyContentSafe = document.getElementById("justifyContentSafe");
+    checkValues(justifyContentSafe, "justifyContent", "justify-content", "", "normal");
+    var justifyContentRightSafeUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
+    checkValues(justifyContentRightSafeUnsafe, "justifyContent", "justify-content", "", "normal");
+    var justifyContentCenterLeft = document.getElementById("justifyContentCenterLeft");
+    checkValues(justifyContentCenterLeft, "justifyContent", "justify-content", "", "normal");
+}, "Test setting invalid values to justify-content through CSS.");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    checkValues(element, "justifyContent", "justify-content", "", "normal");
+}, "Test initial value of justify-content through JS");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+    element.style.justifyContent = "center";
+    checkValues(element, "justifyContent", "justify-content",  "center", "center");
+
+    element.style.justifyContent = "unsafe start";
+    checkValues(element, "justifyContent", "justify-content",  "start unsafe", "start unsafe");
+
+    element.style.justifyContent = "flex-end safe";
+    checkValues(element, "justifyContent", "justify-content",  "flex-end safe", "flex-end safe");
+
+    element.style.justifyContent = "space-between right safe";
+    checkValues(element, "justifyContent", "justify-content",  "space-between right safe", "space-between right safe");
+
+    element.style.justifyContent = "center stretch";
+    checkValues(element, "justifyContent", "justify-content",  "stretch center", "stretch center");
+
+    element.style.justifyContent = "right unsafe";
+    checkValues(element, "justifyContent", "justify-content",  "right unsafe", "right unsafe");
+
+    element.style.justifyContent = "first baseline";
+    checkValues(element, "justifyContent", "justify-content",  "first baseline", "baseline");
+
+    element.style.justifyContent = "last baseline";
+    checkValues(element, "justifyContent", "justify-content",  "last baseline", "last baseline");
+
+    element.style.justifyContent = "normal";
+    checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
+
+    element.style.display = "flex";
+    element.style.justifyContent = "normal";
+    checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
+
+    element.style.display = "grid";
+    element.style.justifyContent = "normal";
+    checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
+
+    element.style.justifyContent = "flex-end";
+    checkValues(element, "justifyContent", "justify-content",  "flex-end", "flex-end");
+}, "Test getting and setting justify-content through JS");
+
+test(function() {
+    element = document.createElement("div");
+    document.body.appendChild(element);
+
+    checkBadValues(element, "justifyContent", "justify-content",  "");
+    checkBadValues(element, "justifyContent", "justify-content",  "auto");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe auto");
+    checkBadValues(element, "justifyContent", "justify-content",  "auto safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "auto left");
+    checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "last-baseline center");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe unsafe");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "center start");
+    checkBadValues(element, "justifyContent", "justify-content",  "baseline safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe baseline");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe safe left");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe left safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "left safe unsafe safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "start right space-between");
+    checkBadValues(element, "justifyContent", "justify-content",  "safe stretch");
+    checkBadValues(element, "justifyContent", "justify-content",  "normal space-between");
+    checkBadValues(element, "justifyContent", "justify-content",  "stretch normal");
+    checkBadValues(element, "justifyContent", "justify-content",  "normal safe");
+    checkBadValues(element, "justifyContent", "justify-content",  "space-around stretch");
+    checkBadValues(element, "justifyContent", "justify-content",  "end space-between start");
+    checkBadValues(element, "justifyContent", "justify-content",  "right safe left");
+    checkBadValues(element, "justifyContent", "justify-content",  "unsafe");
+    checkBadValues(element, "justifyContent", "justify-content",  "safe");
+}, "Test bad combinations of justify-content");
+
+test(function() {
+    element.style.display = "";
+    checkInitialValues(element, "justifyContent", "justify-content", "center", "normal");
+}, "Test the value 'initial'");
+
+test(function() {
+    element.style.display = "grid";
+    checkInitialValues(element, "justifyContent", "justify-content", "left safe", "normal");
+}, "Test the value 'initial' for grid containers");
+
+test(function() {
+    element.style.display = "flex";
+    checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
+}, "Test the value 'initial' for flex containers");
+
+test(function() {
+    checkInheritValues("justifyContent", "justify-content", "end");
+    checkInheritValues("justifyContent", "justify-content", "left safe");
+    checkInheritValues("justifyContent", "justify-content", "center unsafe");
+}, "Test the value 'inherit'");
 
 </script>
 </body>
index 32e304a..55320a2 100644 (file)
@@ -1,3 +1,40 @@
+2017-03-30  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Adapt content-alignment properties to the new baseline syntax
+        https://bugs.webkit.org/show_bug.cgi?id=170262
+
+        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
+        content-alignment (align-content and justify-content).
+
+        I used this patch to adapt the implementation of the parsing logic for
+        these properties to the new Blink's CSS Parsing Design.
+
+        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::valueForContentPositionAndDistributionWithOverflowAlignment):
+        * css/CSSContentDistributionValue.cpp:
+        (WebCore::CSSContentDistributionValue::customCSSText):
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::operator ItemPosition):
+        (WebCore::CSSPrimitiveValue::operator ContentPosition):
+        * css/CSSValueKeywords.in:
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::isBaselineKeyword):
+        (WebCore::consumeBaselineKeyword):
+        (WebCore::consumeContentDistributionOverflowPosition):
+        (WebCore::consumeSelfPositionOverflowPosition):
+
 2017-03-30  James Craig  <jcraig@apple.com>
 
         AX: Expose a new AXSubrole for explicit ARIA "group" role
index f5c5c45..78c0f05 100644 (file)
@@ -2479,16 +2479,29 @@ static Ref<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlign
 {
     auto& cssValuePool = CSSValuePool::singleton();
     auto result = CSSValueList::createSpaceSeparated();
+    // Handle content-distribution values
     if (data.distribution() != ContentDistributionDefault)
         result->append(cssValuePool.createValue(data.distribution()));
-    if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal) {
-        bool gridEnabled = false;
-        gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
-        if (data.position() != ContentPositionNormal || gridEnabled)
-            result->append(cssValuePool.createValue(data.position()));
-        else
-            result->append(cssValuePool.createIdentifierValue(normalBehaviorValueID));
+
+    bool gridEnabled = false;
+    gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
+
+    // Handle content-position values (either as fallback or actual value)
+    switch (data.position()) {
+    case ContentPositionNormal:
+        // Handle 'normal' value, not valid as content-distribution fallback.
+        if (data.distribution() == ContentDistributionDefault)
+            result->append(cssValuePool.createIdentifierValue(gridEnabled ? CSSValueNormal : normalBehaviorValueID));
+        break;
+    case ContentPositionLastBaseline:
+        result->append(cssValuePool.createIdentifierValue(CSSValueLast));
+        result->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+        break;
+    default:
+        result->append(cssValuePool.createValue(data.position()));
     }
+
+    // Handle overflow-alignment (only allowed for content-position values)
     if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
         result->append(cssValuePool.createValue(data.overflow()));
     ASSERT(result->length() > 0);
index 0349ede..6c27424 100644 (file)
@@ -45,11 +45,18 @@ CSSContentDistributionValue::~CSSContentDistributionValue()
 
 String CSSContentDistributionValue::customCSSText() const
 {
+    auto& cssValuePool = CSSValuePool::singleton();
     auto list = CSSValueList::createSpaceSeparated();
     if (m_distribution != CSSValueInvalid)
         list->append(distribution());
-    if (m_position != CSSValueInvalid)
-        list->append(position());
+    if (m_position != CSSValueInvalid) {
+        if (m_position == CSSValueFirstBaseline || m_position == CSSValueLastBaseline) {
+            CSSValueID preference = m_position == CSSValueFirstBaseline ? CSSValueFirst : CSSValueLast;
+            list->append(cssValuePool.createIdentifierValue(preference));
+            list->append(cssValuePool.createIdentifierValue(CSSValueBaseline));
+        } else
+            list->append(position());
+    }
     if (m_overflow != CSSValueInvalid)
         list->append(overflow());
     return list->customCSSText();
index 35c5caf..cce8e9b 100644 (file)
@@ -5024,6 +5024,8 @@ template<> inline CSSPrimitiveValue::operator ItemPosition() const
         return ItemPositionStretch;
     case CSSValueBaseline:
         return ItemPositionBaseline;
+    case CSSValueFirstBaseline:
+        return ItemPositionBaseline;
     case CSSValueLastBaseline:
         return ItemPositionLastBaseline;
     case CSSValueCenter:
@@ -5127,6 +5129,8 @@ template<> inline CSSPrimitiveValue::operator ContentPosition() const
         return ContentPositionNormal;
     case CSSValueBaseline:
         return ContentPositionBaseline;
+    case CSSValueFirstBaseline:
+        return ContentPositionBaseline;
     case CSSValueLastBaseline:
         return ContentPositionLastBaseline;
     case CSSValueCenter:
index 5a8cc22..f6f544e 100644 (file)
@@ -588,6 +588,7 @@ space-evenly
 // flex-end
 // center
 // baseline
+first-baseline
 last-baseline
 // stretch
 
index 7f95c6f..2bcbd5c 100644 (file)
@@ -2619,11 +2619,46 @@ static RefPtr<CSSValue> consumeShapeOutside(CSSParserTokenRange& range, const CS
     return list;
 }
 
+static bool isBaselineKeyword(CSSValueID id)
+{
+    return identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(id);
+}
+
+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> consumeContentDistributionOverflowPosition(CSSParserTokenRange& range)
 {
-    if (identMatches<CSSValueNormal, CSSValueBaseline, CSSValueLastBaseline>(range.peek().id()))
+    CSSValueID id = range.peek().id();
+    if (identMatches<CSSValueNormal>(id))
         return CSSContentDistributionValue::create(CSSValueInvalid, range.consumeIncludingWhitespace().id(), CSSValueInvalid);
 
+    if (isBaselineKeyword(id)) {
+        RefPtr<CSSValue> baseline = consumeBaselineKeyword(range);
+        if (!baseline)
+            return nullptr;
+        CSSValueID baselineID = CSSValueBaseline;
+        auto& primitiveValue = downcast<CSSPrimitiveValue>(*baseline);
+        if (auto* pairValue = primitiveValue.pairValue()) {
+            if (pairValue->first()->valueID() == CSSValueLast)
+                baselineID = CSSValueLastBaseline;
+            else
+                baselineID = CSSValueFirstBaseline;
+        }
+        return CSSContentDistributionValue::create(CSSValueInvalid, baselineID, CSSValueInvalid);
+    }
+
     CSSValueID distribution = CSSValueInvalid;
     CSSValueID position = CSSValueInvalid;
     CSSValueID overflow = CSSValueInvalid;
@@ -3017,25 +3052,13 @@ 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>(range.peek().id()))
+    CSSValueID id = range.peek().id();
+    if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(id))
         return consumeIdent(range);
 
-    if (identMatches<CSSValueFirst, CSSValueLast, CSSValueBaseline>(range.peek().id()))
+    if (isBaselineKeyword(id))
         return consumeBaselineKeyword(range);
 
     RefPtr<CSSPrimitiveValue> overflowPosition = consumeIdent<CSSValueUnsafe, CSSValueSafe>(range);