[css-align] Implement the new behavior of 'legacy' for justify-items
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Feb 2018 14:57:12 +0000 (14:57 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Feb 2018 14:57:12 +0000 (14:57 +0000)
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.

https://github.com/w3c/csswg-drafts/issues/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:

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

28 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/parse-alignment-of-root-elements-expected.txt
LayoutTests/css3/parse-alignment-of-root-elements.html
LayoutTests/css3/parse-place-items-expected.txt
LayoutTests/css3/parse-place-items.html
LayoutTests/fast/css/parse-justify-items-expected.txt
LayoutTests/fast/css/parse-justify-items.html
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004.html
LayoutTests/imported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-002-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-002.html
LayoutTests/imported/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004-expected.txt
LayoutTests/imported/w3c/web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/parser/CSSPropertyParser.cpp
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp

index b5cd3b8..b0ff036 100644 (file)
@@ -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.
index c7c803f..3c36d41 100644 (file)
@@ -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. 
 
index c427cda..4c22231 100644 (file)
@@ -55,19 +55,19 @@ test(function() {
     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.");
@@ -75,21 +75,21 @@ test(function() {
 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 @@ console.log();
 
 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 @@ test(function() {
 }, "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 @@ var slotted = document.getElementById("slotted");
 
 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 @@ test(function() {
 }, "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 @@ shadowNode.appendChild(slot);
 
 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 @@ test(function() {
 }, "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 @@ test(function() {
 
     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";
index 5363bc8..4d5a195 100644 (file)
@@ -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. 
index 16bf97b..e7a8bbf 100644 (file)
@@ -5,9 +5,6 @@
 #placeItemsNormal {
   place-items: normal;
 }
-#placeItemsCenterAuto {
-  place-items: center auto;
-}
 #placeItemsBaseline {
   place-items: baseline;
 }
@@ -49,6 +46,9 @@
 #placeItemsAuto {
   place-items: auto;
 }
+#placeItemsCenterAuto {
+  place-items: center auto;
+}
 #placeItemsNone {
   place-items: none;
 }
@@ -74,7 +74,6 @@
   <div id="log"></div>
 
   <div id="placeItemsNormal"></div>
-  <div id="placeItemsCenterAuto"></div>
   <div id="placeItemsBaseline"></div>
   <div id="placeItemsFirstBaseline"></div>
   <div id="placeItemsLastBaseline"></div>
@@ -89,6 +88,7 @@
 
   <div id="placeItemsEmpty"></div>
   <div id="placeItemsAuto"></div>
+  <div id="placeItemsCenterAuto"></div>
   <div id="placeItemsNone"></div>
   <div id="placeItemsSafe"></div>
   <div id="placeItemsStartSafe"></div>
@@ -125,11 +125,6 @@ test(function() {
 }, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");
 
 test(function() {
-  checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center normal");
-  checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal");
-}, "Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS.");
-
-test(function() {
   checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
   checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
 }, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
@@ -187,12 +182,12 @@ test(function() {
 test(function() {
   checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
   checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
-}, "Test setting '' as incorrect value through CSS.");
+}, "Test setting 'auto' as incorrect value through CSS.");
 
 test(function() {
-  checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
-  checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
-}, "Test setting 'auto' as incorrect value through CSS.");
+  checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal");
+}, "Test setting 'center auto' as incorrect value through CSS.");
 
 test(function() {
   checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
@@ -227,7 +222,11 @@ test(function() {
 }, "Test setting values through JS.");
 
 test(function() {
+  checkPlaceItemsValuesBadJS("auto");
   checkPlaceItemsValuesBadJS("auto normal");
+  checkPlaceItemsValuesBadJS("center auto");
+  checkPlaceItemsValuesBadJS("legacy");
+  checkPlaceItemsValuesBadJS("left legacy");
   checkPlaceItemsValuesBadJS("space-between");
   checkPlaceItemsValuesBadJS("center safe");
   checkPlaceItemsValuesBadJS("center self-start center");
index 1b578c1..448a910 100644 (file)
@@ -4,11 +4,11 @@ Test that setting and getting justify-items works as expected
 PASS Test getting justify-items set through CSS. 
 PASS Test initial value of justify-items through JS 
 PASS Test getting and setting justify-items through JS 
-PASS Test 'auto' value resolution for the root node 
+PASS Test 'legacy' value resolution for the root node 
 PASS Test bad combinations of justify-items 
 PASS Test the value 'initial' 
 PASS Test the value 'initial' for grid containers 
 PASS Test the value 'initial' for flex containers 
 PASS Test the value 'inherit' 
-PASS Test the value 'legacy' 
+PASS Test the legacy alignment 
 
index cf2411d..2e5b4a1 100644 (file)
@@ -245,32 +245,31 @@ test(function() {
     element.style.justifyItems = "normal";
     checkValues(element, "justifyItems", "justify-items",  "normal", "normal");
 
-    element.style.justifyItems = "auto";
-    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+    element.style.justifyItems = "legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");
 
     element.style.display = "flex";
-    element.style.justifyItems = "auto";
-    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+    element.style.justifyItems = "legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");
 
     element.style.display = "grid";
-    element.style.justifyItems = "auto";
-    checkValues(element, "justifyItems", "justify-items",  "auto", "normal");
+    element.style.justifyItems = "legacy";
+    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");
 
     element.style.justifyItems = "self-end";
     checkValues(element, "justifyItems", "justify-items",  "self-end", "self-end");
 }, "Test getting and setting justify-items through JS");
 
 test(function() {
-    document.documentElement.style.justifyItems = "auto";
-    checkValues(document.documentElement, "justifyItems", "justify-items",  "auto", "normal");
-}, "Test 'auto' value resolution for the root node");
+    document.documentElement.style.justifyItems = "legacy";
+    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy", "normal");
+}, "Test 'legacy' value resolution for the root node");
 
 test(function() {
-    container = document.createElement("div");
     element = document.createElement("div");
-    container.appendChild(element);
-    document.body.appendChild(container);
+    document.body.appendChild(element);
 
+    checkBadValues(element, "justifyItems", "justify-items",  "auto");
     checkBadValues(element, "justifyItems", "justify-items",  "unsafe auto");
     checkBadValues(element, "justifyItems", "justify-items",  "auto safe");
     checkBadValues(element, "justifyItems", "justify-items",  "auto left");
@@ -300,7 +299,7 @@ test(function() {
     checkBadValues(element, "justifyItems", "justify-items",  "legacy right unsafe");
     checkBadValues(element, "justifyItems", "justify-items",  "legacy auto");
     checkBadValues(element, "justifyItems", "justify-items",  "legacy stretch");
-    checkBadValues(element, "justifyItems", "justify-items",  "legacy");
+    checkBadValues(element, "justifyItems", "justify-items",  "safe legacy");
     checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");
     checkBadValues(element, "justifyItems", "justify-items",  "start safe");
     checkBadValues(element, "justifyItems", "justify-items",  "end unsafe");
@@ -331,5 +330,5 @@ test(function() {
     checkLegacyValues("justifyItems", "justify-items", "legacy left");
     checkLegacyValues("justifyItems", "justify-items", "legacy center");
     checkLegacyValues("justifyItems", "justify-items", "legacy right");
-}, "Test the value 'legacy'");
+}, "Test the legacy alignment");
 </script>
index 48ae4a8..f39cb1e 100644 (file)
@@ -1,3 +1,20 @@
+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.
+
+        * 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:
+
 2018-02-08  Antoine Quint  <graouts@apple.com>
 
         [Web Animations] Always expose "composite" in output of getKeyframes()
index 5075be1..9d9e999 100644 (file)
@@ -5,5 +5,6 @@ PASS Verify 'left' and 'right' values are invalid for block/cross axis alignment
 PASS Verify <baseline-position> values are invalid for the justify-content property 
 PASS Verify numeric values are invalid 
 PASS Verify 'auto' values are invalid 
+PASS Verify self-position values are invalid 
 PASS Verify empty declaration is invalid 
 
index 30f45b6..3f9bd88 100644 (file)
     }, "Verify 'auto' values are invalid");
 
     test(function() {
+        checkInvalidValues("self-start")
+        checkInvalidValues("center self-end")
+        checkInvalidValues("self-end start")
+    }, "Verify self-position values are invalid");
+
+    test(function() {
         checkInvalidValues("")
     }, "Verify empty declaration is invalid");
 </script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html
new file mode 100644 (file)
index 0000000..67727f4
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io">
+<style>
+div {
+  width: 400px;
+  height: 400px;
+  background: blue;
+  position: relative;
+}
+span {
+  background: green;
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 0;
+  left: 100px;
+}
+</style>
+Should see a green square centered and at the bottom of the blue square.
+<div><span></span></div>
index 4af560c..814f35f 100644 (file)
@@ -1,9 +1,9 @@
 
-FAIL Test 'initial' value when nothing is specified assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test grid items justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test flex items justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test absolute positioned elements justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test absolute positioned grid items justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
-FAIL Test absolute positioned flex items justify-items: 'initial' assert_equals: justify-items computed style is not what is should. expected "legacy" but got "normal"
+PASS Test 'initial' value when nothing is specified 
+PASS Test justify-items: 'initial' 
+PASS Test grid items justify-items: 'initial' 
+PASS Test flex items justify-items: 'initial' 
+PASS Test absolute positioned elements justify-items: 'initial' 
+PASS Test absolute positioned grid items justify-items: 'initial' 
+PASS Test absolute positioned flex items justify-items: 'initial' 
 
index 6ba2c7c..1806fa2 100644 (file)
@@ -19,39 +19,39 @@ document.body.appendChild(container);
 test(function() {
     element = document.createElement("div");
     document.body.appendChild(element);
-    checkValues(element, "justifyItems", "justify-items", "", "legacy");
+    checkValues(element, "justifyItems", "justify-items", "", "normal");
 }, "Test 'initial' value when nothing is specified");
 
 test(function() {
     container.style.display = "";
-    checkInitialValues(element, "justifyItems", "justify-items", "center", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "center", "normal");
 }, "Test justify-items: 'initial'");
 
 test(function() {
     container.style.display = "grid";
-    checkInitialValues(element, "justifyItems", "justify-items", "safe start", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "safe start", "normal");
 }, "Test grid items justify-items: 'initial'");
 
 test(function() {
     container.style.display = "flex";
-    checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "normal");
 }, "Test flex items justify-items: 'initial'");
 
 test(function() {
     container.style.display = "";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifyItems", "justify-items", "start", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "start", "normal");
 }, "Test absolute positioned elements justify-items: 'initial'");
 
 test(function() {
     container.style.display = "grid";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifyItems", "justify-items", "end", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "end", "normal");
 }, "Test absolute positioned grid items justify-items: 'initial'");
 
 test(function() {
     container.style.display = "flex";
     element.style.position = "absolute";
-    checkInitialValues(element, "justifyItems", "justify-items", "end", "legacy");
+    checkInitialValues(element, "justifyItems", "justify-items", "end", "normal");
 }, "Test absolute positioned flex items justify-items: 'initial'");
 </script>
index acfe7be..ecd3bec 100644 (file)
@@ -1,5 +1,5 @@
 
-FAIL Checking invalid combination - justify-items: auto assert_equals: justify-items specified value is not what it should. expected "" but got "auto"
+PASS Checking invalid combination - justify-items: auto 
 PASS Checking invalid combination - justify-items: space-around 
 PASS Checking invalid combination - justify-items: auto safe 
 PASS Checking invalid combination - justify-items: auto left 
index d2fd989..847894d 100644 (file)
@@ -3,6 +3,7 @@ PASS Verify overflow keywords are invalid
 PASS Verify fallback values are invalid 
 PASS Verify 'left' and 'right' values are invalid for block/cross axis alignment 
 PASS Verify numeric values are invalid 
-PASS Verify 'auto' value is invalid as first longhand value. 
+PASS Verify 'auto' value is invalid. 
+PASS Verify 'legacy' value is invalid. 
 PASS Verify empty declaration is invalid 
 
index c5d9472..aa3ff30 100644 (file)
        checkInvalidValues("auto")
        checkInvalidValues("auto right")
        checkInvalidValues("auto auto")
-    }, "Verify 'auto' value is invalid as first longhand value.");
+       checkInvalidValues("center auto")
+    }, "Verify 'auto' value is invalid.");
+
+    test(function() {
+       checkInvalidValues("legacy")
+       checkInvalidValues("legacy start")
+       checkInvalidValues("end legacy")
+       checkInvalidValues("legacy left")
+       checkInvalidValues("center legacy")
+       checkInvalidValues("start legacy center")
+    }, "Verify 'legacy' value is invalid.");
+
 
     test(function() {
         checkInvalidValues("")
index 785a994..dde4e8a 100644 (file)
@@ -1,3 +1,56 @@
+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.
+
+        The syntax of the 'justify-items' property accepts a new 'legacy' value,
+        replacing the 'auto' value which is now parsed as invalid.
+
+        https://github.com/w3c/csswg-drafts/issues/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):
+
 2018-02-09  Yacine Bandou  <yacine.bandou_ext@softathome.com>
 
         [EME][GStreamer] Add support for encrypted caps in GStreamerUtilities
index 3276d66..209e29a 100644 (file)
@@ -2524,7 +2524,10 @@ static Ref<CSSValueList> valueForItemPositionWithOverflowAlignment(const StyleSe
     } else {
         if (data.position() >= ItemPositionCenter && data.overflow() != OverflowAlignmentDefault)
             result->append(cssValuePool.createValue(data.overflow()));
-        result->append(cssValuePool.createValue(data.position()));
+        if (data.position() == ItemPositionLegacy)
+            result->append(cssValuePool.createIdentifierValue(CSSValueNormal));
+        else
+            result->append(cssValuePool.createValue(data.position()));
     }
     ASSERT(result->length() <= 2);
     return result;
@@ -3003,7 +3006,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyinStyle(const RenderSty
         case CSSPropertyJustifyContent:
             return valueForContentPositionAndDistributionWithOverflowAlignment(style.justifyContent(), CSSValueFlexStart);
         case CSSPropertyJustifyItems:
-            return valueForItemPositionWithOverflowAlignment(style.justifyItems().position() == ItemPositionAuto ? RenderStyle::initialDefaultAlignment() : style.justifyItems());
+            return valueForItemPositionWithOverflowAlignment(style.justifyItems());
         case CSSPropertyJustifySelf:
             return valueForItemPositionWithOverflowAlignment(style.justifySelf());
         case CSSPropertyPlaceContent:
index 2a0d9e1..ff61400 100644 (file)
@@ -4962,6 +4962,9 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ItemPosition itemPosition
 {
     m_primitiveUnitType = CSS_VALUE_ID;
     switch (itemPosition) {
+    case ItemPositionLegacy:
+        m_value.valueID = CSSValueLegacy;
+        break;
     case ItemPositionAuto:
         m_value.valueID = CSSValueAuto;
         break;
@@ -5010,6 +5013,8 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ItemPosition itemPosition
 template<> inline CSSPrimitiveValue::operator ItemPosition() const
 {
     switch (m_value.valueID) {
+    case CSSValueLegacy:
+        return ItemPositionLegacy;
     case CSSValueAuto:
         return ItemPositionAuto;
     case CSSValueNormal:
index afd7870..a3b70f4 100644 (file)
                 "aliases": [
                     "-webkit-justify-items"
                 ],
-                "initial": "initialSelfAlignment",
                 "converter": "SelfOrDefaultAlignmentData"
             },
             "specification": {
index b30a336..6a68ade 100644 (file)
@@ -1063,13 +1063,10 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
             style.setDisplay(BLOCK);
     }
 
-    // If the inherited value of justify-items includes the 'legacy' keyword,
-    // 'auto' computes to the inherited value. Otherwise, 'auto' computes to
-    // 'normal'.
-    if (style.justifyItems().position() == ItemPositionAuto) {
-        if (parentBoxStyle->justifyItems().positionType() == LegacyPosition)
-            style.setJustifyItems(parentBoxStyle->justifyItems());
-    }
+    // If the inherited value of justify-items includes the 'legacy' keyword (plus 'left', 'right' or
+    // 'center'), 'legacy' computes to the the inherited value. Otherwise, 'auto' computes to 'normal'.
+    if (parentBoxStyle->justifyItems().positionType() == LegacyPosition && style.justifyItems().position() == ItemPositionLegacy)
+        style.setJustifyItems(parentBoxStyle->justifyItems());
 }
 
 static void checkForOrientationChange(RenderStyle* style)
index a13c7c6..1ae0b8b 100644 (file)
@@ -2661,9 +2661,14 @@ static RefPtr<CSSValue> consumeShapeOutside(CSSParserTokenRange& range, const CS
     return list;
 }
 
-static bool isAutoOrNormalOrStretch(CSSValueID id)
+static bool isAuto(CSSValueID id)
 {
-    return identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(id);
+    return identMatches<CSSValueAuto>(id);
+}
+
+static bool isNormalOrStretch(CSSValueID id)
+{
+    return identMatches<CSSValueNormal, CSSValueStretch>(id);
 }
 
 static bool isLeftOrRightKeyword(CSSValueID id)
@@ -3113,7 +3118,7 @@ static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange&
 {
     ASSERT(isPositionKeyword);
     CSSValueID id = range.peek().id();
-    if (isAutoOrNormalOrStretch(id))
+    if (isAuto(id) || isNormalOrStretch(id))
         return consumeIdent(range);
 
     if (isBaselineKeyword(id))
@@ -3138,14 +3143,19 @@ static RefPtr<CSSValue> consumeAlignItems(CSSParserTokenRange& range)
 
 static RefPtr<CSSValue> consumeJustifyItems(CSSParserTokenRange& range)
 {
+    // justify-items property does not allow the 'auto' value.
+    if (identMatches<CSSValueAuto>(range.peek().id()))
+        return nullptr;
     CSSParserTokenRange rangeCopy = range;
     RefPtr<CSSPrimitiveValue> legacy = consumeIdent<CSSValueLegacy>(rangeCopy);
     RefPtr<CSSPrimitiveValue> positionKeyword = consumeIdent<CSSValueCenter, CSSValueLeft, CSSValueRight>(rangeCopy);
     if (!legacy)
         legacy = consumeIdent<CSSValueLegacy>(rangeCopy);
-    if (legacy && positionKeyword) {
+    if (legacy) {
         range = rangeCopy;
-        return createPrimitiveValuePair(legacy.releaseNonNull(), positionKeyword.releaseNonNull(), Pair::IdenticalValueEncoding::Coalesce);
+        if (positionKeyword)
+            return createPrimitiveValuePair(legacy.releaseNonNull(), positionKeyword.releaseNonNull(), Pair::IdenticalValueEncoding::Coalesce);
+        return legacy;
     }
     return consumeSelfPositionOverflowPosition(range, isSelfPositionOrLeftOrRightKeyword);
 }
@@ -5568,11 +5578,11 @@ bool CSSPropertyParser::consumePlaceContentShorthand(bool important)
     return true;
 }
 
-static RefPtr<CSSValue> consumeSimplifiedItemPosition(CSSParserTokenRange& range, IsPositionKeyword isPositionKeyword)
+static RefPtr<CSSValue> consumeSimplifiedDefaultPosition(CSSParserTokenRange& range, IsPositionKeyword isPositionKeyword)
 {
     ASSERT(isPositionKeyword);
     CSSValueID id = range.peek().id();
-    if (isAutoOrNormalOrStretch(id) || isPositionKeyword(id))
+    if (isNormalOrStretch(id) || isPositionKeyword(id))
         return consumeIdent(range);
 
     if (isBaselineKeyword(id))
@@ -5581,18 +5591,22 @@ static RefPtr<CSSValue> consumeSimplifiedItemPosition(CSSParserTokenRange& range
     return nullptr;
 }
 
+static RefPtr<CSSValue> consumeSimplifiedSelfPosition(CSSParserTokenRange& range, IsPositionKeyword isPositionKeyword)
+{
+    ASSERT(isPositionKeyword);
+    if (isAuto(range.peek().id()))
+        return consumeIdent(range);
+    return consumeSimplifiedDefaultPosition(range, isPositionKeyword);
+}
+
 bool CSSPropertyParser::consumePlaceItemsShorthand(bool important)
 {
     ASSERT(shorthandForProperty(CSSPropertyPlaceItems).length() == 2);
 
-    // align-items property does not allow the 'auto' value.
-    if (identMatches<CSSValueAuto>(m_range.peek().id()))
-        return false;
-
-    RefPtr<CSSValue> alignItemsValue = consumeSimplifiedItemPosition(m_range, isSelfPositionKeyword);
+    RefPtr<CSSValue> alignItemsValue = consumeSimplifiedDefaultPosition(m_range, isSelfPositionKeyword);
     if (!alignItemsValue)
         return false;
-    RefPtr<CSSValue> justifyItemsValue = m_range.atEnd() ? alignItemsValue : consumeSimplifiedItemPosition(m_range, isSelfPositionOrLeftOrRightKeyword);
+    RefPtr<CSSValue> justifyItemsValue = m_range.atEnd() ? alignItemsValue : consumeSimplifiedDefaultPosition(m_range, isSelfPositionOrLeftOrRightKeyword);
     if (!justifyItemsValue)
         return false;
 
@@ -5608,10 +5622,10 @@ bool CSSPropertyParser::consumePlaceSelfShorthand(bool important)
 {
     ASSERT(shorthandForProperty(CSSPropertyPlaceSelf).length() == 2);
 
-    RefPtr<CSSValue> alignSelfValue = consumeSimplifiedItemPosition(m_range, isSelfPositionKeyword);
+    RefPtr<CSSValue> alignSelfValue = consumeSimplifiedSelfPosition(m_range, isSelfPositionKeyword);
     if (!alignSelfValue)
         return false;
-    RefPtr<CSSValue> justifySelfValue = m_range.atEnd() ? alignSelfValue : consumeSimplifiedItemPosition(m_range, isSelfPositionOrLeftOrRightKeyword);
+    RefPtr<CSSValue> justifySelfValue = m_range.atEnd() ? alignSelfValue : consumeSimplifiedSelfPosition(m_range, isSelfPositionOrLeftOrRightKeyword);
     if (!justifySelfValue)
         return false;
 
index 4d6ad75..ea9d236 100644 (file)
@@ -1336,6 +1336,7 @@ static LayoutUnit justifyContentSpaceBetweenChildren(LayoutUnit availableFreeSpa
 static LayoutUnit alignmentOffset(LayoutUnit availableFreeSpace, ItemPosition position, LayoutUnit ascent, LayoutUnit maxAscent, bool isWrapReverse)
 {
     switch (position) {
+    case ItemPositionLegacy:
     case ItemPositionAuto:
     case ItemPositionNormal:
         ASSERT_NOT_REACHED();
index 19697cc..ee457ea 100644 (file)
@@ -1296,6 +1296,7 @@ GridAxisPosition RenderGrid::columnAxisPositionForChild(const RenderBox& child)
     case ItemPositionLastBaseline:
         // FIXME: Implement the previous values. For now, we always 'start' align the child.
         return GridAxisStart;
+    case ItemPositionLegacy:
     case ItemPositionAuto:
     case ItemPositionNormal:
         break;
@@ -1363,6 +1364,7 @@ GridAxisPosition RenderGrid::rowAxisPositionForChild(const RenderBox& child) con
     case ItemPositionLastBaseline:
         // FIXME: Implement the previous values. For now, we always 'start' align the child.
         return GridAxisStart;
+    case ItemPositionLegacy:
     case ItemPositionAuto:
     case ItemPositionNormal:
         break;
index f21eac7..7fba88c 100644 (file)
@@ -242,7 +242,7 @@ bool RenderStyle::isCSSGridLayoutEnabled()
 
 static StyleSelfAlignmentData resolvedSelfAlignment(const StyleSelfAlignmentData& value, ItemPosition normalValueBehavior)
 {
-    if (value.position() == ItemPositionNormal || value.position() == ItemPositionAuto)
+    if (value.position() == ItemPositionLegacy || value.position() == ItemPositionNormal || value.position() == ItemPositionAuto)
         return { normalValueBehavior, OverflowAlignmentDefault };
     return value;
 }
@@ -263,11 +263,6 @@ StyleSelfAlignmentData RenderStyle::resolvedAlignSelf(const RenderStyle* parentS
 
 StyleSelfAlignmentData RenderStyle::resolvedJustifyItems(ItemPosition normalValueBehaviour) const
 {
-    // FIXME: justify-items 'auto' value is allowed only to provide the 'legacy' keyword's behavior, which it's still not implemented for layout.
-    // "If the inherited value of justify-items includes the legacy keyword, auto computes to the inherited value."
-    // https://drafts.csswg.org/css-align/#justify-items-property
-    if (justifyItems().position() == ItemPositionAuto)
-        return { normalValueBehaviour, OverflowAlignmentDefault };
     return resolvedSelfAlignment(justifyItems(), normalValueBehaviour);
 }
 
index bdc7394..f9d8c60 100644 (file)
@@ -1493,6 +1493,7 @@ public:
     static float initialFlexShrink() { return 1; }
     static Length initialFlexBasis() { return Length(Auto); }
     static int initialOrder() { return 0; }
+    static StyleSelfAlignmentData initialJustifyItems() { return StyleSelfAlignmentData(ItemPositionLegacy, OverflowAlignmentDefault); }
     static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
     static StyleSelfAlignmentData initialDefaultAlignment() { return StyleSelfAlignmentData(isCSSGridLayoutEnabled() ? ItemPositionNormal : ItemPositionStretch, OverflowAlignmentDefault); }
     static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionNormal, ContentDistributionDefault, OverflowAlignmentDefault); }
index 57ce759..29fb7f2 100644 (file)
@@ -266,7 +266,7 @@ enum EBoxDirection { BNORMAL, BREVERSE };
 enum EAlignContent { AlignContentFlexStart, AlignContentFlexEnd, AlignContentCenter, AlignContentSpaceBetween, AlignContentSpaceAround, AlignContentStretch };
 enum EFlexDirection { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
 enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
-enum ItemPosition { ItemPositionAuto, ItemPositionNormal, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight };
+enum ItemPosition { ItemPositionLegacy, ItemPositionAuto, ItemPositionNormal, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight };
 enum OverflowAlignment { OverflowAlignmentDefault, OverflowAlignmentUnsafe, OverflowAlignmentSafe };
 enum ItemPositionType { NonLegacyPosition, LegacyPosition };
 enum ContentPosition { ContentPositionNormal, ContentPositionBaseline, ContentPositionLastBaseline, ContentPositionCenter, ContentPositionStart, ContentPositionEnd, ContentPositionFlexStart, ContentPositionFlexEnd, ContentPositionLeft, ContentPositionRight };
index 4eb6bf7..abd97cf 100644 (file)
@@ -74,7 +74,7 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , alignItems(RenderStyle::initialDefaultAlignment())
     , alignSelf(RenderStyle::initialSelfAlignment())
     , justifyContent(RenderStyle::initialContentAlignment())
-    , justifyItems(RenderStyle::initialSelfAlignment())
+    , justifyItems(RenderStyle::initialJustifyItems())
     , justifySelf(RenderStyle::initialSelfAlignment())
 #if ENABLE(TOUCH_EVENTS)
     , touchAction(static_cast<unsigned>(RenderStyle::initialTouchAction()))