[css-align] Implement the new behavior of 'legacy' for justify-items

https://bugs.webkit.org/show_bug.cgi?id=172712

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Rebaselined Default Alignment related tests because of the new 'legacy' value.

* web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004-expected.txt:
* web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004.html:
* web-platform-tests/css/css-align/default-alignment/parse-justify-items-002-expected.txt:
* web-platform-tests/css/css-align/default-alignment/parse-justify-items-002.html:
* web-platform-tests/css/css-align/default-alignment/parse-justify-items-004-expected.txt:
* web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004-expected.txt:
* web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004.html:

Source/WebCore:

The syntax of the 'justify-items' property accepts a new 'legacy' value,
replacing the 'auto' value which is now parsed as invalid.

w3c/csswg-drafts#1318

This change affects also to the 'place-items' shorthand, which doesn't
accept 'auto' and, for the time being, neither 'legacy'.

Since the new value 'legacy' is also the default value, I don't expect
this change to break content of sites currently using the 'justify-items'
property.

No new tests, rebaselined existing test.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForItemPositionWithOverflowAlignment):
(WebCore::ComputedStyleExtractor::valueForPropertyinStyle):
* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator ItemPosition const):
* css/CSSProperties.json:
* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle):
* css/parser/CSSPropertyParser.cpp:
(WebCore::isAuto):
(WebCore::isNormalOrStretch):
(WebCore::consumeSelfPositionOverflowPosition):
(WebCore::consumeJustifyItems):
(WebCore::consumeSimplifiedDefaultPosition):
(WebCore::consumeSimplifiedSelfPosition):
(WebCore::CSSPropertyParser::consumePlaceItemsShorthand):
(WebCore::CSSPropertyParser::consumePlaceSelfShorthand):
* rendering/RenderFlexibleBox.cpp:
(WebCore::alignmentOffset):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::columnAxisPositionForChild const):
(WebCore::RenderGrid::rowAxisPositionForChild const):
* rendering/style/RenderStyle.cpp:
(WebCore::resolvedSelfAlignment):
(WebCore::RenderStyle::resolvedJustifyItems const):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialJustifyItems):
* rendering/style/RenderStyleConstants.h:
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):

LayoutTests:

Rebaselined Default Alignment related tests because of the new 'legacy' value.

* css3/parse-alignment-of-root-elements.html:
* css3/parse-place-items.html:
* fast/css/parse-justify-items.html:


Canonical link: https://commits.webkit.org/198450@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@228319 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,16 @@
+2018-02-09  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Implement the new behavior of 'legacy' for justify-items
+        https://bugs.webkit.org/show_bug.cgi?id=172712
+
+        Reviewed by Antti Koivisto.
+
+        Rebaselined Default Alignment related tests because of the new 'legacy' value.
+
+        * css3/parse-alignment-of-root-elements.html:
+        * css3/parse-place-items.html:
+        * fast/css/parse-justify-items.html:
+
 2018-02-08  Matt Lewis  <jlewis3@apple.com>
 
         Marked media/W3C/video/events/event_progress_manual.html as flaky on macOS WK2.

LayoutTests/css3/parse-alignment-of-root-elements-expected.txt

@@ -16,15 +16,15 @@ PASS Check out how the DOM's root element justify-items's value is used to resol
 PASS Check out how the DOM's root element deals with 'auto' value in justify-items. 
 PASS Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values. 
 PASS Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value. 
-FAIL Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self. assert_equals: alignItems specified value is not what it should. expected "right" but got ""
+PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self. 
 PASS Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self. 
 PASS Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node. 
-FAIL Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. assert_equals: alignItems specified value is not what it should. expected "left" but got ""
-FAIL Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. assert_equals: justifyItems is not what is should. expected "normal" but got "left"
-FAIL Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned. assert_equals: justifyItems is not what is should. expected "normal" but got "left"
-FAIL Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. assert_equals: alignItems specified value is not what it should. expected "left" but got ""
+FAIL Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. assert_equals: alignItems is not what is should. expected "normal" but got "end"
+FAIL Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned. assert_equals: justifyItems is not what is should. expected "left" but got "normal"
+PASS Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned. 
+PASS Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 
 PASS Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned. 
-FAIL Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned. assert_equals: justifyItems is not what is should. expected "normal" but got "legacy center"
-FAIL The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree. assert_equals: alignItems specified value is not what it should. expected "left" but got ""
+PASS Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned. 
+PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree. 
 PASS The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree. 
 

LayoutTests/css3/parse-alignment-of-root-elements.html

@@ -55,41 +55,41 @@
     console.log();
     document.documentElement.style.justifyItems = "center";
     checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center");
-    document.body.style.justifyItems = "auto";
+    document.body.style.justifyItems = "legacy";
     document.body.style.justifySelf = "auto";
-    checkValues(document.body, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
-    block.style.justifyItems = "auto";
+    block.style.justifyItems = "legacy";
     block.style.justifySelf = "auto";
-    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(block, "justifyItems", "justify-items",  "legacy", "normal");
     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
 }, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values.");
 
 test(function() {
-    document.documentElement.style.justifyItems = "auto";
-    checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal");
+    document.documentElement.style.justifyItems = "legacy";
+    checkValues(document.documentElement, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
 }, "Check out how the DOM's root element deals with 'auto' value in justify-items.");
 
 test(function() {
     document.documentElement.style.justifyItems = "legacy center";
     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
-    document.body.style.justifyItems = "auto";
+    document.body.style.justifyItems = "legacy";
     document.body.style.justifySelf = "auto";
-    checkValues(document.body, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(document.body, "justifyItems", "justify-items",  "legacy", "legacy center");
     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
-    block.style.justifyItems = "auto";
+    block.style.justifyItems = "legacy";
     block.style.justifySelf = "auto";
-    checkValues(block, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(block, "justifyItems", "justify-items",  "legacy", "legacy center");
     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
 }, "Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.");
 
 test(function() {
-    document.documentElement.style.justifyItems = "auto";
-    checkValues(document.body, "justifyItems", "justify-items",  "auto", "normal");
+    document.documentElement.style.justifyItems = "legacy";
+    checkValues(document.body, "justifyItems", "justify-items",  "legacy", "normal");
     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
-    checkValues(block, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(block, "justifyItems", "justify-items",  "legacy", "normal");
     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
 }, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
 
@@ -106,9 +106,9 @@
 
 test(function() {
     shadowHost.style.alignItems = "center";
-    shadowNode.style.alignItems = "right";
+    shadowNode.style.alignItems = "end";
     checkValues(shadowHost, "alignItems", "align-items", "center", "center");
-    checkValues(shadowNode, "alignItems", "align-items", "right", "right");
+    checkValues(shadowNode, "alignItems", "align-items", "end", "end");
     shadowNode.style.alignItems = "";
     checkValues(shadowNode, "alignItems", "align-items", "", "normal");
     shadowNode.style.alignSelf = "auto";
@@ -127,22 +127,22 @@
 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self.");
 
 test(function() {
-    shadowHost.style.justifyItems = "auto";
+    shadowHost.style.justifyItems = "legacy";
     shadowNode.style.justifyItems = "right";
     shadowNode.style.justifySelf = "auto";
-    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
 
-    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
     document.documentElement.style.justifyItems = "legacy center";
     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
-    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
+    checkValues(shadowHost, "justifyItems", "justify-items",  "legacy", "legacy center");
     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
-    shadowNode.style.justifyItems = "auto";
-    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
-    document.documentElement.style.justifyItems = "auto";
+    shadowNode.style.justifyItems = "legacy";
+    checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
+    document.documentElement.style.justifyItems = "legacy";
 }, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node.");
 
 
@@ -153,11 +153,11 @@
 
 test(function() {
     shadowHost.style.alignItems = "center";
-    shadowNode.style.alignItems = "right";
-    slotted.style.alignItems = "left";
-    checkValues(slotted, "alignItems", "align-items", "left", "left");
-    slotted.style.alignItems = "normal";
-    checkValues(slotted, "alignItems", "align-items", "normal", "normal");
+    shadowNode.style.alignItems = "start";
+    slotted.style.alignItems = "end";
+    checkValues(slotted, "alignItems", "align-items", "end", "end");
+    slotted.style.alignItems = "";
+    checkValues(slotted, "alignItems", "align-items", "", "normal");
     slotted.style.alignSelf = "start";
     checkValues(slotted, "alignSelf", "align-self", "start", "start");
     slotted.style.alignSelf = "auto";
@@ -178,22 +178,22 @@
 }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
 
 test(function() {
-    shadowHost.style.justifyItems = "auto";
+    shadowHost.style.justifyItems = "legacy";
     shadowNode.style.justifyItems = "right";
-    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     document.documentElement.style.justifyItems = "legacy center";
     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
-    checkValues(shadowHost, "justifyItems", "justify-items",  "auto", "legacy center");
-    slotted.style.justifyItems = "auto";
-    checkValues(slotted, "justifyItems", "justify-items",  "auto", "normal");
+    checkValues(shadowHost, "justifyItems", "justify-items",  "legacy", "legacy center");
+    slotted.style.justifyItems = "legacy";
+    checkValues(slotted, "justifyItems", "justify-items",  "legacy", "normal");
     slotted.style.justifySelf = "auto";
     checkValues(slotted, "justifySelf", "justify-self",  "auto", "auto");
-    shadowNode.style.justifyItems = "auto";
-    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
-    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal");
+    shadowNode.style.justifyItems = "legacy";
+    checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
+    checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
-    document.documentElement.style.justifyItems = "auto";
+    document.documentElement.style.justifyItems = "legacy";
 }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned.");
 
 // Slot element is assigned now.
@@ -203,9 +203,9 @@
 
 test(function() {
     shadowHost.style.alignItems = "center";
-    shadowNode.style.alignItems = "right";
-    slotted.style.alignItems = "left";
-    checkValues(slotted, "alignItems", "align-items", "left", "left");
+    shadowNode.style.alignItems = "end";
+    slotted.style.alignItems = "start";
+    checkValues(slotted, "alignItems", "align-items", "start", "start");
     slotted.style.alignItems = "";
     checkValues(slotted, "alignItems", "align-items", "", "normal");
     slotted.style.alignSelf = "start";
@@ -228,33 +228,33 @@
 }, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
 
 test(function() {
-    shadowHost.style.justifyItems = "auto";
+    shadowHost.style.justifyItems = "legacy";
     shadowNode.style.justifyItems = "right";
-    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
+    checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
     document.documentElement.style.justifyItems = "legacy center";
     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
-    checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy center");
-    slotted.style.justifyItems = "auto";
-    checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode.
+    checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center");
+    slotted.style.justifyItems = "legacy";
+    checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal"); // Shadow host is not the parent now, but ShadowNode.
     slotted.style.justifySelf = "auto";
     checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode.
-    shadowNode.style.justifyItems = "auto";
-    checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy center");
-    checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center"); // Now that shadowNode is auto, 'legacy' applies.
+    shadowNode.style.justifyItems = "legacy";
+    checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
+    checkValues(slotted, "justifyItems", "justify-items", "legacy", "legacy center"); // Now that shadowNode is auto, 'legacy' applies.
     checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies.
-    document.documentElement.style.justifyItems = "auto";
+    document.documentElement.style.justifyItems = "legacy";
 }, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.");
 
 test(function() {
     shadowHost.style.alignItems = "center";
-    shadowNode.style.alignItems = "right";
-    slot.style.alignItems = "left";
-    checkValues(slot, "alignItems", "align-items",  "left", "left");
+    shadowNode.style.alignItems = "end";
+    slot.style.alignItems = "start";
+    checkValues(slot, "alignItems", "align-items",  "start", "start");
     slot.style.alignItems = "";
     checkValues(slot, "alignItems", "align-items", "", "normal");
-    slot.style.alignSelf = "left";
-    checkValues(slot, "alignSelf", "align-self",  "left", "left");
+    slot.style.alignSelf = "start";
+    checkValues(slot, "alignSelf", "align-self",  "start", "start");
     slot.style.alignSelf = "auto";
     checkValues(slot, "alignSelf", "align-self",  "auto", "auto");
 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree.");
@@ -265,8 +265,8 @@
 
     slot.style.justifyItems = "left";
     checkValues(slot, "justifyItems", "justify-items",  "left", "left");
-    slot.style.justifyItems = "auto";
-    checkValues(slot, "justifyItems", "justify-items", "auto", "normal");
+    slot.style.justifyItems = "legacy";
+    checkValues(slot, "justifyItems", "justify-items", "legacy", "normal");
     slot.style.justifySelf = "left";
     checkValues(slot, "justifySelf", "justify-self",  "left", "left");
     slot.style.justifySelf = "auto";

LayoutTests/css3/parse-place-items-expected.txt

@@ -2,7 +2,6 @@ Test to verify that the new place-items alignment shorthand is parsed as expecte
 
 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS. 
-PASS Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS. 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS. 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS. 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS. 
@@ -14,8 +13,8 @@ PASS Test getting the Computed Value of place-items's longhand properties when s
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS. 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS. 
 PASS Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS. 
-PASS Test setting '' as incorrect value through CSS. 
 PASS Test setting 'auto' as incorrect value through CSS. 
+PASS Test setting 'center auto' as incorrect value through CSS. 
 PASS Test setting 'none' as incorrect value through CSS. 
 PASS Test setting 'safe' as incorrect value through CSS. 
 PASS Test setting 'start safe' as incorrect value through CSS.