Skip to content
Permalink
Browse files
[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
  • Loading branch information
javifernandez committed Feb 9, 2018
1 parent 23950d7 commit 5e3606df087db05f0a3240817399b05bb7cdfe84
Showing with 281 additions and 143 deletions.
  1. +13 −0 LayoutTests/ChangeLog
  2. +7 −7 LayoutTests/css3/parse-alignment-of-root-elements-expected.txt
  3. +55 −55 LayoutTests/css3/parse-alignment-of-root-elements.html
  4. +1 −2 LayoutTests/css3/parse-place-items-expected.txt
  5. +12 −13 LayoutTests/css3/parse-place-items.html
  6. +2 −2 LayoutTests/fast/css/parse-justify-items-expected.txt
  7. +13 −14 LayoutTests/fast/css/parse-justify-items.html
  8. +17 −0 LayoutTests/imported/w3c/ChangeLog
  9. +1 −0 ...3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004-expected.txt
  10. +6 −0 ...ported/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-004.html
  11. +22 −0 ...ed/w3c/web-platform-tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html
  12. +7 −7 ...orted/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-002-expected.txt
  13. +7 −7 ...ests/imported/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-002.html
  14. +1 −1 ...orted/w3c/web-platform-tests/css/css-align/default-alignment/parse-justify-items-004-expected.txt
  15. +2 −1 ...ted/w3c/web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004-expected.txt
  16. +12 −1 ...ts/imported/w3c/web-platform-tests/css/css-align/default-alignment/place-items-shorthand-004.html
  17. +53 −0 Source/WebCore/ChangeLog
  18. +5 −2 Source/WebCore/css/CSSComputedStyleDeclaration.cpp
  19. +5 −0 Source/WebCore/css/CSSPrimitiveValueMappings.h
  20. +0 −1 Source/WebCore/css/CSSProperties.json
  21. +4 −7 Source/WebCore/css/StyleResolver.cpp
  22. +29 −15 Source/WebCore/css/parser/CSSPropertyParser.cpp
  23. +1 −0 Source/WebCore/rendering/RenderFlexibleBox.cpp
  24. +2 −0 Source/WebCore/rendering/RenderGrid.cpp
  25. +1 −6 Source/WebCore/rendering/style/RenderStyle.cpp
  26. +1 −0 Source/WebCore/rendering/style/RenderStyle.h
  27. +1 −1 Source/WebCore/rendering/style/RenderStyleConstants.h
  28. +1 −1 Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
@@ -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.
@@ -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.

@@ -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";
@@ -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.

0 comments on commit 5e3606d

Please sign in to comment.