[CSS Grid Layout] Implement justify-self and justify-item css properties.
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Apr 2015 23:36:28 +0000 (23:36 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Apr 2015 23:36:28 +0000 (23:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=133281

Reviewed by David Hyatt.

Implement the new property 'justify-items', defined in the CSS Box Alignment
Source/WebCore:

specification to describe the container's alignment behavior, in the same way
the 'align-items' property does. The 'justify-self' 'auto' value of any relative
positioned element will be resolved to its container's 'justify-items' value.

Test: fast/css/parse-justify-items.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::resolveContainerAlignmentAuto): Function to resolve 'auto' values for 'align-items' or 'justify-items'.
(WebCore::resolveSelfAlignmentAuto): Function to resolve 'auto' values for 'align-self' or 'justify-self'.
(WebCore::valueForItemPositionWithOverflowAlignment): Take into account the 'legacy' keyword.
(WebCore::ComputedStyleExtractor::propertyValue):
(WebCore::resolveAlignmentAuto): Deleted (renamed to resolveContainerAlignmentAuto).
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue): Refactoring to share logic between justify-xxx and align-xxx properties.
(WebCore::CSSParser::parseLegacyPosition): Parsing logic of 'legacy' keyword,
(WebCore::CSSParser::parseItemPositionOverflowPosition): Take into account the 'legacy' keyword.
* css/CSSParser.h:
* css/CSSPropertyNames.in:
* css/CSSValueKeywords.in:
* css/StyleBuilderCustom.h:
(WebCore::StyleBuilderCustom::applyInheritJustifyItems): Added.
(WebCore::StyleBuilderCustom::applyInitialJustifyItems): Added.
(WebCore::StyleBuilderCustom::applyValueJustifyItems): Added.
* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle): Resolve 'auto' values for justify-items when parents have the 'legacy' keyword.
* rendering/style/RenderStyle.h: Managing the new ItemPositionType fields.
* rendering/style/RenderStyleConstants.h: Added the ItemPositionType enumeration for handling the 'legacy' keyword.
* rendering/style/StyleRareNonInheritedData.cpp: Managing the new ItemPositionType fields.
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):
* rendering/style/StyleRareNonInheritedData.h:

LayoutTests:

specification to desribe the container's alignment behavior, in the same way
the 'align-items' property does.

* fast/css/parse-justify-items-expected.txt: Added.
* fast/css/parse-justify-items.html: Added.
* fast/css/resources/alignment-parsing-utils.js: Added.
(checkValues):
(checkBadValues):
(checkInitialValues):
(checkInheritValues):
(checkLegacyValues):

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

20 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/fast/css/getComputedStyle/resources/property-names.js
LayoutTests/fast/css/parse-justify-items-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/parse-justify-items.html [new file with mode: 0644]
LayoutTests/fast/css/resources/alignment-parsing-utils.js [new file with mode: 0644]
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSParser.h
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleBuilderCustom.h
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h

index 21bdcf7..df38622 100644 (file)
@@ -1,3 +1,23 @@
+2015-04-09  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Implement justify-self and justify-item css properties.
+        https://bugs.webkit.org/show_bug.cgi?id=133281
+
+        Reviewed by David Hyatt.
+
+        Implement the new property 'justify-items', defined in the CSS Box Alignment
+        specification to desribe the container's alignment behavior, in the same way
+        the 'align-items' property does.
+
+        * fast/css/parse-justify-items-expected.txt: Added.
+        * fast/css/parse-justify-items.html: Added.
+        * fast/css/resources/alignment-parsing-utils.js: Added.
+        (checkValues):
+        (checkBadValues):
+        (checkInitialValues):
+        (checkInheritValues):
+        (checkLegacyValues):
+
 2015-04-09  Myles C. Maxfield  <mmaxfield@apple.com>
 
         Text-combine erroneously draws vertically after non-layout-causing style change
index 72a3324..80ee66e 100644 (file)
@@ -153,6 +153,7 @@ flex-direction: row;
 flex-wrap: nowrap;
 justify-content: flex-start;
 justify-self: start;
+justify-items: start;
 -webkit-font-kerning: auto;
 -webkit-font-smoothing: auto;
 -webkit-font-variant-ligatures: normal;
index b197462..f0333ec 100644 (file)
@@ -152,6 +152,7 @@ flex-direction: row
 flex-wrap: nowrap
 justify-content: flex-start
 justify-self: auto
+justify-items: auto
 -webkit-font-kerning: auto
 -webkit-font-smoothing: auto
 -webkit-font-variant-ligatures: normal
index 44e8851..0cff811 100644 (file)
@@ -66,6 +66,7 @@ var propertiesToTest = {
     "-webkit-hyphens": true,
     "justify-content": true,
     "justify-self": true,
+    "justify-items": true,
     "-webkit-line-align": true,
     "-webkit-line-box-contain": true,
     "-webkit-line-break": true,
diff --git a/LayoutTests/fast/css/parse-justify-items-expected.txt b/LayoutTests/fast/css/parse-justify-items-expected.txt
new file mode 100644 (file)
index 0000000..995425a
--- /dev/null
@@ -0,0 +1,159 @@
+Test that setting and getting justify-items works as expected
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Test getting justify-items set through CSS
+PASS getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items') is 'baseline'
+PASS getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items') is 'last-baseline'
+PASS getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items') is 'stretch'
+PASS getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items') is 'start'
+PASS getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items') is 'end'
+PASS getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items') is 'center'
+PASS getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items') is 'self-end'
+PASS getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items') is 'self-start'
+PASS getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items') is 'left'
+PASS getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items') is 'right'
+PASS getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items') is 'flex-start'
+PASS getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items') is 'flex-end'
+PASS getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-items') is 'end true'
+PASS getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify-items') is 'center true'
+PASS getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items') is 'self-end safe'
+PASS getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items') is 'self-start safe'
+PASS getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items') is 'right safe'
+PASS getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-items') is 'left true'
+PASS getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('justify-items') is 'flex-start true'
+PASS getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items') is 'flex-end safe'
+PASS getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items') is 'legacy left'
+PASS getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items') is 'legacy center'
+PASS getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items') is 'legacy right'
+PASS getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items') is 'legacy left'
+PASS getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items') is 'legacy center'
+PASS getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items') is 'legacy right'
+
+Test initial value of justify-items through JS
+PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'start'
+
+Test getting and setting justify-items through JS
+PASS element.style.justifyItems is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
+PASS element.style.justifyItems is "start true"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start true"
+PASS element.style.justifyItems is "flex-end safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "flex-end safe"
+PASS element.style.justifyItems is "legacy right"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
+PASS element.style.justifyItems is "legacy center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifyItems is "legacy left"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
+PASS element.style.justifyItems is "auto"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
+PASS getComputedStyle(element, '').getPropertyValue('justify-items') is 'stretch'
+PASS element.style.justifyItems is 'auto'
+PASS element.style.justifyItems is "self-end"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "self-end"
+
+Test bad combinations of justify-items
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+
+Test the value 'initial'
+PASS element.style.justifyItems is "center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center"
+PASS element.style.justifyItems is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "start"
+
+Test the value 'initial' for grid containers
+PASS element.style.justifyItems is "left safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
+PASS element.style.justifyItems is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
+
+Test the value 'initial' for flex containers
+PASS element.style.justifyItems is "right true"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "right true"
+PASS element.style.justifyItems is "initial"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "stretch"
+
+Test the value 'inherit'
+PASS element.style.justifyItems is "end"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
+PASS element.style.justifyItems is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "end"
+PASS element.style.justifyItems is "left safe"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
+PASS element.style.justifyItems is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "left safe"
+PASS element.style.justifyItems is "center true"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center true"
+PASS element.style.justifyItems is "inherit"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "center true"
+
+Test the value 'legacy'
+PASS element.style.justifyItems is "legacy left"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy left"
+PASS element.style.justifyItems is "legacy center"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy center"
+PASS element.style.justifyItems is "legacy right"
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
+PASS element.style.justifyItems is ""
+PASS window.getComputedStyle(element, '').getPropertyValue('justify-items') is "legacy right"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css/parse-justify-items.html b/LayoutTests/fast/css/parse-justify-items.html
new file mode 100644 (file)
index 0000000..a274e68
--- /dev/null
@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#justifyItemsBaseline {
+    justify-items: baseline;
+}
+
+#justifyItemsLastBaseline {
+    justify-items: last-baseline;
+}
+
+#justifyItemsStretch {
+    justify-items: stretch;
+}
+
+#justifyItemsStart {
+    justify-items: start;
+}
+
+#justifyItemsEnd {
+    justify-items: end;
+}
+
+#justifyItemsCenter {
+    justify-items: center;
+}
+
+#justifyItemsSelfStart {
+    justify-items: self-start;
+}
+
+#justifyItemsSelfEnd {
+    justify-items: self-end;
+}
+
+#justifyItemsLeft {
+    justify-items: left;
+}
+
+#justifyItemsRight {
+    justify-items: right;
+}
+
+#justifyItemsFlexStart {
+    justify-items: flex-start;
+}
+
+#justifyItemsFlexEnd {
+    justify-items: flex-end;
+}
+
+#justifyItemsEndTrue {
+    justify-items: end true;
+}
+
+#justifyItemsCenterTrue {
+    justify-items: center true;
+}
+
+#justifyItemsSelfEndSafe {
+    justify-items: self-end safe;
+}
+
+#justifyItemsSelfStartSafe {
+    justify-items: self-start safe;
+}
+
+#justifyItemsRightSafe {
+    justify-items: right safe;
+}
+
+#justifyItemsLeftTrue {
+    justify-items: left true;
+}
+
+#justifyItemsFlexStartTrue {
+    justify-items: flex-start true;
+}
+
+#justifyItemsFlexEndSafe {
+    justify-items: flex-end safe;
+}
+
+#justifyItemsLegacyLeft {
+    justify-items: legacy left;
+}
+
+#justifyItemsLegacyCenter {
+    justify-items: legacy center;
+}
+
+#justifyItemsLegacyRight {
+    justify-items: legacy right;
+}
+
+#justifyItemsLeftLegacy {
+    justify-items: left legacy;
+}
+
+#justifyItemsCenterLegacy {
+    justify-items: center legacy;
+}
+
+#justifyItemsRightLegacy {
+    justify-items: right legacy;
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<div id="justifyItemsBaseline"></div>
+<div id="justifyItemsLastBaseline"></div>
+<div id="justifyItemsStretch"></div>
+<div id="justifyItemsStart"></div>
+<div id="justifyItemsEnd"></div>
+<div id="justifyItemsCenter"></div>
+<div id="justifyItemsSelfStart"></div>
+<div id="justifyItemsSelfEnd"></div>
+<div id="justifyItemsLeft"></div>
+<div id="justifyItemsRight"></div>
+<div id="justifyItemsFlexStart"></div>
+<div id="justifyItemsFlexEnd"></div>
+
+<div id="justifyItemsEndTrue"></div>
+<div id="justifyItemsCenterTrue"></div>
+<div id="justifyItemsSelfEndSafe"></div>
+<div id="justifyItemsSelfStartSafe"></div>
+<div id="justifyItemsRightSafe"></div>
+<div id="justifyItemsLeftTrue"></div>
+<div id="justifyItemsFlexStartTrue"></div>
+<div id="justifyItemsFlexEndSafe"></div>
+<div id="justifyItemsLegacyLeft"></div>
+<div id="justifyItemsLegacyCenter"></div>
+<div id="justifyItemsLegacyRight"></div>
+<div id="justifyItemsLeftLegacy"></div>
+<div id="justifyItemsCenterLegacy"></div>
+<div id="justifyItemsRightLegacy"></div>
+<script src="resources/alignment-parsing-utils.js"></script>
+<script>
+description('Test that setting and getting justify-items works as expected');
+
+debug("Test getting justify-items set through CSS");
+var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
+shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'");
+
+var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
+shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'");
+
+var justifyItemsStretch = document.getElementById("justifyItemsStretch");
+shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'");
+
+var justifyItemsStart = document.getElementById("justifyItemsStart");
+shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'");
+
+var justifyItemsEnd = document.getElementById("justifyItemsEnd");
+shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'");
+
+var justifyItemsCenter = document.getElementById("justifyItemsCenter");
+shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'");
+
+var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
+shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'");
+
+var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
+shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'");
+
+var justifyItemsLeft = document.getElementById("justifyItemsLeft");
+shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'");
+
+var justifyItemsRight = document.getElementById("justifyItemsRight");
+shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'");
+
+var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
+shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'");
+
+var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
+shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'");
+
+var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue");
+shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-items')", "'end true'");
+
+var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue");
+shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify-items')", "'center true'");
+
+var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
+shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");
+
+var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
+shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'");
+
+var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
+shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'");
+
+var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue");
+shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-items')", "'left true'");
+
+var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTrue");
+shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('justify-items')", "'flex-start true'");
+
+var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
+shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'");
+
+var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
+shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'");
+
+var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
+shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'");
+
+var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
+shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'");
+
+var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
+shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");
+
+var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
+shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");
+
+var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
+shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'");
+
+debug("");
+debug("Test initial value of justify-items through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'start'");
+
+debug("");
+debug("Test getting and setting justify-items through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.justifyItems = "center";
+checkValues(element, "justifyItems", "justify-items",  "center", "center");
+
+element.style.justifyItems = "true start";
+checkValues(element, "justifyItems", "justify-items",  "start true", "start true");
+
+element.style.justifyItems = "flex-end safe";
+checkValues(element, "justifyItems", "justify-items",  "flex-end safe", "flex-end safe");
+
+element.style.justifyItems = "right legacy";
+checkValues(element, "justifyItems", "justify-items",  "legacy right", "legacy right");
+
+element.style.justifyItems = "center legacy";
+checkValues(element, "justifyItems", "justify-items",  "legacy center", "legacy center");
+
+element.style.justifyItems = "left legacy";
+checkValues(element, "justifyItems", "justify-items",  "legacy left", "legacy left");
+
+element.style.justifyItems = "auto";
+checkValues(element, "justifyItems", "justify-items",  "auto", "start");
+
+element.style.display = "flex";
+element.style.justifyItems = "auto";
+checkValues(element, "justifyItems", "justify-items",  "auto", "stretch");
+
+element.style.display = "grid";
+element.style.justifyItems = "auto";
+checkValues(element, "justifyItems", "justify-items",  "auto", "stretch");
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'stretch'");
+shouldBe("element.style.justifyItems", "'auto'");
+
+element.style.justifyItems = "self-end";
+checkValues(element, "justifyItems", "justify-items",  "self-end", "self-end");
+
+debug("");
+debug("Test bad combinations of justify-items");
+element = document.createElement("div");
+document.body.appendChild(element);
+
+checkBadValues(element, "justifyItems", "justify-items",  "true auto");
+checkBadValues(element, "justifyItems", "justify-items",  "auto safe");
+checkBadValues(element, "justifyItems", "justify-items",  "auto left");
+checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
+checkBadValues(element, "justifyItems", "justify-items",  "baseline center");
+checkBadValues(element, "justifyItems", "justify-items",  "stretch true");
+checkBadValues(element, "justifyItems", "justify-items",  "stretch right");
+checkBadValues(element, "justifyItems", "justify-items",  "true true");
+checkBadValues(element, "justifyItems", "justify-items",  "true safe");
+checkBadValues(element, "justifyItems", "justify-items",  "center start");
+checkBadValues(element, "justifyItems", "justify-items",  "stretch true");
+checkBadValues(element, "justifyItems", "justify-items",  "safe stretch");
+checkBadValues(element, "justifyItems", "justify-items",  "baseline safe");
+checkBadValues(element, "justifyItems", "justify-items",  "true baseline");
+checkBadValues(element, "justifyItems", "justify-items",  "true safe left");
+checkBadValues(element, "justifyItems", "justify-items",  "true left safe");
+checkBadValues(element, "justifyItems", "justify-items",  "left safe true safe");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy start");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy end");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy right true");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy auto");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy stretch");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy");
+checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");
+
+debug("");
+debug("Test the value 'initial'");
+element.style.display = "";
+checkInitialValues(element, "justifyItems", "justify-items", "center", "start");
+
+debug("");
+debug("Test the value 'initial' for grid containers");
+element.style.display = "-webkit-grid";
+checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stretch");
+
+debug("");
+debug("Test the value 'initial' for flex containers");
+element.style.display = "-webkit-flex";
+checkInitialValues(element, "justifyItems", "justify-items", "right true", "stretch");
+
+debug("");
+debug("Test the value 'inherit'");
+parentElement = document.createElement("div");
+checkInheritValues("justifyItems", "justify-items", "end");
+checkInheritValues("justifyItems", "justify-items", "left safe");
+checkInheritValues("justifyItems", "justify-items", "center true");
+
+debug("");
+debug("Test the value 'legacy'");
+checkLegacyValues("justifyItems", "justify-items", "legacy left");
+checkLegacyValues("justifyItems", "justify-items", "legacy center");
+checkLegacyValues("justifyItems", "justify-items", "legacy right");
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/css/resources/alignment-parsing-utils.js b/LayoutTests/fast/css/resources/alignment-parsing-utils.js
new file mode 100644 (file)
index 0000000..b97022a
--- /dev/null
@@ -0,0 +1,46 @@
+function checkValues(element, property, propertyID, value, computedValue)
+{
+    window.element = element;
+    var elementID = element.id || "element";
+    shouldBeEqualToString("element.style." + property, value);
+    shouldBeEqualToString("window.getComputedStyle(" + elementID + ", '').getPropertyValue('" + propertyID + "')", computedValue);
+}
+
+function checkBadValues(element, property, propertyID, value)
+{
+    element.style[property] = value;
+    checkValues(element, property, propertyID, "", "start");
+}
+
+function checkInitialValues(element, property, propertyID, value, initial)
+{
+    element.style[property] = value;
+    checkValues(element, property, propertyID, value, value);
+    element.style[property] = "initial";
+    checkValues(element, property, propertyID, "initial", initial);
+}
+
+function checkInheritValues(property, propertyID, value)
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style[property] = value;
+    checkValues(parentElement, property, propertyID, value, value);
+
+    var element = document.createElement("div");
+    parentElement.appendChild(element);
+    element.style[property] = "inherit";
+    checkValues(element, property, propertyID, "inherit", value);
+}
+
+function checkLegacyValues(property, propertyID, value)
+{
+    var parentElement = document.createElement("div");
+    document.body.appendChild(parentElement);
+    parentElement.style[property] = value;
+    checkValues(parentElement, property, propertyID, value, value);
+
+    var element = document.createElement("div");
+    parentElement.appendChild(element);
+    checkValues(element, property, propertyID, "", value);
+}
index d07a330..25f1c89 100644 (file)
@@ -304,6 +304,8 @@ rect: style.getPropertyValue(justify-content) : flex-start
 rect: style.getPropertyCSSValue(justify-content) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(justify-self) : start
 rect: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
+rect: style.getPropertyValue(justify-items) : start
+rect: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
 rect: style.getPropertyValue(-webkit-font-kerning) : auto
 rect: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-font-smoothing) : auto
@@ -820,6 +822,8 @@ g: style.getPropertyValue(justify-content) : flex-start
 g: style.getPropertyCSSValue(justify-content) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(justify-self) : start
 g: style.getPropertyCSSValue(justify-self) : [object CSSValueList]
+g: style.getPropertyValue(justify-items) : start
+g: style.getPropertyCSSValue(justify-items) : [object CSSValueList]
 g: style.getPropertyValue(-webkit-font-kerning) : auto
 g: style.getPropertyCSSValue(-webkit-font-kerning) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-font-smoothing) : auto
index 27ae710..ad6ed1c 100644 (file)
@@ -1,3 +1,43 @@
+2015-04-09  Javier Fernandez  <jfernandez@igalia.com>
+
+        [CSS Grid Layout] Implement justify-self and justify-item css properties.
+        https://bugs.webkit.org/show_bug.cgi?id=133281
+
+        Reviewed by David Hyatt.
+
+        Implement the new property 'justify-items', defined in the CSS Box Alignment
+        specification to describe the container's alignment behavior, in the same way
+        the 'align-items' property does. The 'justify-self' 'auto' value of any relative
+        positioned element will be resolved to its container's 'justify-items' value.
+
+        Test: fast/css/parse-justify-items.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::resolveContainerAlignmentAuto): Function to resolve 'auto' values for 'align-items' or 'justify-items'.
+        (WebCore::resolveSelfAlignmentAuto): Function to resolve 'auto' values for 'align-self' or 'justify-self'.
+        (WebCore::valueForItemPositionWithOverflowAlignment): Take into account the 'legacy' keyword.
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        (WebCore::resolveAlignmentAuto): Deleted (renamed to resolveContainerAlignmentAuto).
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue): Refactoring to share logic between justify-xxx and align-xxx properties.
+        (WebCore::CSSParser::parseLegacyPosition): Parsing logic of 'legacy' keyword,
+        (WebCore::CSSParser::parseItemPositionOverflowPosition): Take into account the 'legacy' keyword.
+        * css/CSSParser.h:
+        * css/CSSPropertyNames.in:
+        * css/CSSValueKeywords.in:
+        * css/StyleBuilderCustom.h:
+        (WebCore::StyleBuilderCustom::applyInheritJustifyItems): Added.
+        (WebCore::StyleBuilderCustom::applyInitialJustifyItems): Added.
+        (WebCore::StyleBuilderCustom::applyValueJustifyItems): Added.
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::adjustRenderStyle): Resolve 'auto' values for justify-items when parents have the 'legacy' keyword.
+        * rendering/style/RenderStyle.h: Managing the new ItemPositionType fields.
+        * rendering/style/RenderStyleConstants.h: Added the ItemPositionType enumeration for handling the 'legacy' keyword.
+        * rendering/style/StyleRareNonInheritedData.cpp: Managing the new ItemPositionType fields.
+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
+        (WebCore::StyleRareNonInheritedData::operator==):
+        * rendering/style/StyleRareNonInheritedData.h:
+
 2015-04-09  Anders Carlsson  <andersca@apple.com>
 
         Make it possible to create an application cache storage with custom directories
index d946380..028a399 100644 (file)
@@ -309,6 +309,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyFlexWrap,
     CSSPropertyJustifyContent,
     CSSPropertyJustifySelf,
+    CSSPropertyJustifyItems,
     CSSPropertyWebkitFilter,
 #if ENABLE(FILTERS_LEVEL_2)
     CSSPropertyWebkitBackdropFilter,
@@ -1695,7 +1696,7 @@ Node* ComputedStyleExtractor::styledNode() const
     return &element;
 }
 
-static ItemPosition resolveAlignmentAuto(ItemPosition position, RenderObject* element)
+static ItemPosition resolveContainerAlignmentAuto(ItemPosition position, RenderObject* element)
 {
     if (position != ItemPositionAuto || !element)
         return position;
@@ -1704,6 +1705,18 @@ static ItemPosition resolveAlignmentAuto(ItemPosition position, RenderObject* el
     return isFlexOrGrid ? ItemPositionStretch : ItemPositionStart;
 }
 
+static ItemPosition resolveSelfAlignmentAuto(ItemPosition position, OverflowAlignment& overflow, RenderObject* element)
+{
+    if (position != ItemPositionAuto || !element || element->isOutOfFlowPositioned())
+        return position;
+
+    RenderBlock* parent = element->containingBlock();
+    if (!parent)
+        return ItemPositionStart;
+
+    overflow = parent->style().alignItemsOverflowAlignment();
+    return resolveContainerAlignmentAuto(parent->style().alignItems(), parent);
+}
 
 PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
 {
@@ -1785,12 +1798,15 @@ static Ref<CSSValue> shapePropertyValue(const RenderStyle* style, const ShapeVal
 }
 #endif
 
-static PassRefPtr<CSSValueList> valueForItemPositionWithOverflowAlignment(ItemPosition itemPosition, OverflowAlignment overflowAlignment)
+static PassRefPtr<CSSValueList> valueForItemPositionWithOverflowAlignment(ItemPosition itemPosition, OverflowAlignment overflowAlignment, ItemPositionType positionType)
 {
     RefPtr<CSSValueList> result = CSSValueList::createSpaceSeparated();
+    if (positionType == LegacyPosition)
+        result->append(CSSPrimitiveValue::createIdentifier(CSSValueLegacy));
     result->append(cssValuePool().createValue(itemPosition));
     if (overflowAlignment != OverflowAlignmentDefault)
         result->append(cssValuePool().createValue(overflowAlignment));
+    ASSERT(result->length() <= 2);
     return result.release();
 }
 
@@ -2157,21 +2173,11 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
         case CSSPropertyAlignContent:
             return cssValuePool().createValue(style->alignContent());
         case CSSPropertyAlignItems:
-            return valueForItemPositionWithOverflowAlignment(resolveAlignmentAuto(style->alignItems(), renderer), style->alignItemsOverflowAlignment());
+            return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->alignItems(), renderer), style->alignItemsOverflowAlignment(), NonLegacyPosition);
         case CSSPropertyAlignSelf: {
-            ItemPosition alignSelf = style->alignSelf();
             OverflowAlignment overflow = style->alignSelfOverflowAlignment();
-            if (alignSelf == ItemPositionAuto) {
-                if (renderer && !renderer->isOutOfFlowPositioned()) {
-                    alignSelf = ItemPositionStart;
-                    RenderBlock* parent = renderer->containingBlock();
-                    if (parent) {
-                        alignSelf = resolveAlignmentAuto(parent->style().alignItems(), parent);
-                        overflow = parent->style().alignItemsOverflowAlignment();
-                    }
-                }
-            }
-            return valueForItemPositionWithOverflowAlignment(alignSelf, overflow);
+            ItemPosition alignSelf = resolveSelfAlignmentAuto(style->alignSelf(), overflow, renderer);
+            return valueForItemPositionWithOverflowAlignment(alignSelf, overflow, NonLegacyPosition);
         }
         case CSSPropertyFlex:
             return getCSSPropertyValuesForShorthandProperties(flexShorthand());
@@ -2189,8 +2195,13 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return cssValuePool().createValue(style->flexWrap());
         case CSSPropertyJustifyContent:
             return cssValuePool().createValue(style->justifyContent());
-        case CSSPropertyJustifySelf:
-            return valueForItemPositionWithOverflowAlignment(resolveAlignmentAuto(style->justifySelf(), renderer), style->justifySelfOverflowAlignment());
+        case CSSPropertyJustifyItems:
+            return valueForItemPositionWithOverflowAlignment(resolveContainerAlignmentAuto(style->justifyItems(), renderer), style->justifyItemsOverflowAlignment(), style->justifyItemsPositionType());
+        case CSSPropertyJustifySelf: {
+            OverflowAlignment overflow = style->justifySelfOverflowAlignment();
+            ItemPosition justifySelf = resolveSelfAlignmentAuto(style->justifySelf(), overflow, renderer);
+            return valueForItemPositionWithOverflowAlignment(justifySelf, overflow, NonLegacyPosition);
+        }
         case CSSPropertyOrder:
             return cssValuePool().createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyFloat:
index 47834d0..30e05b6 100644 (file)
@@ -2697,6 +2697,11 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     }
     case CSSPropertyJustifySelf:
         return parseItemPositionOverflowPosition(propId, important);
+    case CSSPropertyJustifyItems:
+        if (parseLegacyPosition(propId, important))
+            return true;
+        m_valueList->setCurrentIndex(0);
+        return parseItemPositionOverflowPosition(propId, important);
 #if ENABLE(CSS_GRID_LAYOUT)
     case CSSPropertyWebkitGridAutoColumns:
     case CSSPropertyWebkitGridAutoRows:
@@ -3221,13 +3226,40 @@ static bool isItemPositionKeyword(CSSValueID id)
         || id == CSSValueFlexEnd || id == CSSValueLeft || id == CSSValueRight;
 }
 
+bool CSSParser::parseLegacyPosition(CSSPropertyID propId, bool important)
+{
+    // [ legacy && [ left | right | center ]
+
+    CSSParserValue* value = m_valueList->current();
+    if (!value)
+        return false;
+
+    if (value->id == CSSValueLegacy) {
+        value = m_valueList->next();
+        if (!value)
+            return false;
+        if (value->id != CSSValueCenter && value->id != CSSValueLeft && value->id != CSSValueRight)
+            return false;
+    } else if (value->id == CSSValueCenter || value->id == CSSValueLeft || value->id == CSSValueRight) {
+        if (!m_valueList->next() || m_valueList->current()->id != CSSValueLegacy)
+            return false;
+    } else
+        return false;
+
+    addProperty(propId, createPrimitiveValuePair(cssValuePool().createIdentifierValue(CSSValueLegacy), cssValuePool().createIdentifierValue(value->id)), important);
+    return !m_valueList->next();
+}
+
 bool CSSParser::parseItemPositionOverflowPosition(CSSPropertyID propId, bool important)
 {
-    // auto | baseline | stretch | [<item-position> && <overflow-position>? ]
+    // auto | stretch | <baseline-position> | [<item-position> && <overflow-position>? ]
+    // <baseline-position> = baseline | last-baseline;
     // <item-position> = center | start | end | self-start | self-end | flex-start | flex-end | left | right;
     // <overflow-position> = true | safe
 
     CSSParserValue* value = m_valueList->current();
+    if (!value)
+        return false;
 
     if (value->id == CSSValueAuto || value->id == CSSValueStretch || isBaselinePositionKeyword(value->id)) {
         if (m_valueList->next())
index 748e7e3..ead0327 100644 (file)
@@ -218,6 +218,7 @@ public:
 
     bool parseClipShape(CSSPropertyID, bool important);
 
+    bool parseLegacyPosition(CSSPropertyID, bool important);
     bool parseItemPositionOverflowPosition(CSSPropertyID, bool important);
 
 #if ENABLE(CSS_SHAPES)
index 6dec367..bda1928 100644 (file)
@@ -479,6 +479,8 @@ justify-content
 #endif
 justify-self [Custom=All]
 -webkit-font-size-delta [SkipBuilder]
+justify-items [Custom=All]
+-webkit-justify-items = justify-items
 #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
 -webkit-grid [Longhands=-webkit-grid-template-columns|-webkit-grid-template-rows|-webkit-grid-template-areas|-webkit-grid-auto-flow|-webkit-grid-auto-columns|-webkit-grid-auto-rows]
 -webkit-grid-area [Longhands=-webkit-grid-row-start|-webkit-grid-column-start|-webkit-grid-row-end|-webkit-grid-row-start]
index 0feba7c..532e51e 100644 (file)
@@ -553,7 +553,7 @@ last-baseline
 // space-between
 // space-around
 
-// CSS_PROP_JUSTIFY_SELF
+// CSS_PROP_JUSTIFY_ITEMS / CSS_PROP_JUSTIFY_SELF
 // auto
 // stretch
 // baseline
@@ -569,6 +569,7 @@ self-end
 // right
 true
 safe
+legacy
 
 // CSS_PROP_FLEX_FLOW
 row
index 61b280d..4bcf6c5 100644 (file)
@@ -103,6 +103,7 @@ public:
     DECLARE_PROPERTY_CUSTOM_HANDLERS(WebkitTextEmphasisStyle);
     DECLARE_PROPERTY_CUSTOM_HANDLERS(Zoom);
     DECLARE_PROPERTY_CUSTOM_HANDLERS(JustifySelf);
+    DECLARE_PROPERTY_CUSTOM_HANDLERS(JustifyItems);
     DECLARE_PROPERTY_CUSTOM_HANDLERS(AlignItems);
     DECLARE_PROPERTY_CUSTOM_HANDLERS(AlignSelf);
 
@@ -578,6 +579,39 @@ inline void StyleBuilderCustom::applyValueJustifySelf(StyleResolver& styleResolv
     }
 }
 
+inline void StyleBuilderCustom::applyInheritJustifyItems(StyleResolver& styleResolver)
+{
+    styleResolver.style()->setJustifyItems(styleResolver.parentStyle()->justifyItems());
+    styleResolver.style()->setJustifyItemsOverflowAlignment(styleResolver.parentStyle()->justifyItemsOverflowAlignment());
+    styleResolver.style()->setJustifyItemsPositionType(styleResolver.parentStyle()->justifyItemsPositionType());
+}
+
+inline void StyleBuilderCustom::applyInitialJustifyItems(StyleResolver& styleResolver)
+{
+    styleResolver.style()->setJustifyItems(RenderStyle::initialJustifyItems());
+    styleResolver.style()->setJustifyItemsOverflowAlignment(RenderStyle::initialJustifyItemsOverflowAlignment());
+    styleResolver.style()->setJustifyItemsPositionType(RenderStyle::initialJustifyItemsPositionType());
+}
+
+inline void StyleBuilderCustom::applyValueJustifyItems(StyleResolver& styleResolver, CSSValue& value)
+{
+    styleResolver.style()->setJustifyItems(RenderStyle::initialJustifyItems());
+    styleResolver.style()->setJustifyItemsOverflowAlignment(RenderStyle::initialJustifyItemsOverflowAlignment());
+    styleResolver.style()->setJustifyItemsPositionType(RenderStyle::initialJustifyItemsPositionType());
+
+    auto& primitiveValue = downcast<CSSPrimitiveValue>(value);
+    if (Pair* pairValue = primitiveValue.getPairValue()) {
+        if (pairValue->first()->getValueID() == CSSValueLegacy) {
+            styleResolver.style()->setJustifyItemsPositionType(LegacyPosition);
+            styleResolver.style()->setJustifyItems(*pairValue->second());
+        } else {
+            styleResolver.style()->setJustifyItems(*pairValue->first());
+            styleResolver.style()->setJustifyItemsOverflowAlignment(*pairValue->second());
+        }
+    } else
+        styleResolver.style()->setJustifyItems(primitiveValue);
+}
+
 enum BorderImageType { BorderImage, WebkitMaskBoxImage };
 enum BorderImageModifierType { Outset, Repeat, Slice, Width };
 template <BorderImageType type, BorderImageModifierType modifier>
index a2298cf..0eb536f 100644 (file)
@@ -1434,6 +1434,13 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
         if ((e->hasTagName(SVGNames::foreignObjectTag) || e->hasTagName(SVGNames::textTag)) && style.isDisplayInlineType())
             style.setDisplay(BLOCK);
     }
+
+    // If the inherited value of justify-items includes the legacy keyword, 'auto'
+    // computes to the the inherited value.
+    if (parentStyle.justifyItemsPositionType() == LegacyPosition && style.justifyItems() == ItemPositionAuto) {
+        style.setJustifyItems(parentStyle.justifyItems());
+        style.setJustifyItemsPositionType(parentStyle.justifyItemsPositionType());
+    }
 }
 
 bool StyleResolver::checkRegionStyle(Element* regionElement)
index 449225a..f913de6 100644 (file)
@@ -918,6 +918,9 @@ public:
     bool isReverseFlexDirection() const { return flexDirection() == FlowRowReverse || flexDirection() == FlowColumnReverse; }
     EFlexWrap flexWrap() const { return static_cast<EFlexWrap>(rareNonInheritedData->m_flexibleBox->m_flexWrap); }
     EJustifyContent justifyContent() const { return static_cast<EJustifyContent>(rareNonInheritedData->m_justifyContent); }
+    ItemPosition justifyItems() const { return static_cast<ItemPosition>(rareNonInheritedData->m_justifyItems); }
+    OverflowAlignment justifyItemsOverflowAlignment() const { return static_cast<OverflowAlignment>(rareNonInheritedData->m_justifyItemsOverflowAlignment); }
+    ItemPositionType justifyItemsPositionType() const { return static_cast<ItemPositionType>(rareNonInheritedData->m_justifyItemsPositionType); }
     ItemPosition justifySelf() const { return static_cast<ItemPosition>(rareNonInheritedData->m_justifySelf); }
     OverflowAlignment justifySelfOverflowAlignment() const { return static_cast<OverflowAlignment>(rareNonInheritedData->m_justifySelfOverflowAlignment); }
 
@@ -1494,6 +1497,9 @@ public:
     void setFlexDirection(EFlexDirection direction) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexDirection, direction); }
     void setFlexWrap(EFlexWrap w) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexWrap, w); }
     void setJustifyContent(EJustifyContent p) { SET_VAR(rareNonInheritedData, m_justifyContent, p); }
+    void setJustifyItems(ItemPosition justifyItems) { SET_VAR(rareNonInheritedData, m_justifyItems, justifyItems); }
+    void setJustifyItemsOverflowAlignment(OverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_justifyItemsOverflowAlignment, overflowAlignment); }
+    void setJustifyItemsPositionType(ItemPositionType positionType) { SET_VAR(rareNonInheritedData, m_justifyItemsPositionType, positionType); }
     void setJustifySelf(ItemPosition p) { SET_VAR(rareNonInheritedData, m_justifySelf, p); }
     void setJustifySelfOverflowAlignment(OverflowAlignment overflowAlignment) { SET_VAR(rareNonInheritedData, m_justifySelfOverflowAlignment, overflowAlignment); }
 #if ENABLE(CSS_GRID_LAYOUT)
@@ -1912,6 +1918,9 @@ public:
     static EFlexDirection initialFlexDirection() { return FlowRow; }
     static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
     static EJustifyContent initialJustifyContent() { return JustifyFlexStart; }
+    static ItemPosition initialJustifyItems() { return ItemPositionAuto; }
+    static OverflowAlignment initialJustifyItemsOverflowAlignment() { return OverflowAlignmentDefault; }
+    static ItemPositionType initialJustifyItemsPositionType() { return NonLegacyPosition; }
     static ItemPosition initialJustifySelf() { return ItemPositionAuto; }
     static OverflowAlignment initialJustifySelfOverflowAlignment() { return OverflowAlignmentDefault; }
     static int initialMarqueeLoopCount() { return -1; }
index e56a68e..4712018 100644 (file)
@@ -250,7 +250,7 @@ enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
 enum EJustifyContent { JustifyFlexStart, JustifyFlexEnd, JustifyCenter, JustifySpaceBetween, JustifySpaceAround };
 enum ItemPosition {ItemPositionAuto, ItemPositionStretch, ItemPositionBaseline, ItemPositionLastBaseline, ItemPositionCenter, ItemPositionStart, ItemPositionEnd, ItemPositionSelfStart, ItemPositionSelfEnd, ItemPositionFlexStart, ItemPositionFlexEnd, ItemPositionLeft, ItemPositionRight};
 enum OverflowAlignment {OverflowAlignmentDefault, OverflowAlignmentTrue, OverflowAlignmentSafe};
-
+enum ItemPositionType {NonLegacyPosition, LegacyPosition};
 
 enum ETextSecurity {
     TSNONE, TSDISC, TSCIRCLE, TSSQUARE
index 3c99bf3..38d1235 100644 (file)
@@ -87,6 +87,9 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , m_alignSelf(RenderStyle::initialAlignSelf())
     , m_alignSelfOverflowAlignment(RenderStyle::initialAlignSelfOverflowAlignment())
     , m_justifyContent(RenderStyle::initialJustifyContent())
+    , m_justifyItems(RenderStyle::initialJustifyItems())
+    , m_justifyItemsOverflowAlignment(RenderStyle::initialJustifyItemsOverflowAlignment())
+    , m_justifyItemsPositionType(NonLegacyPosition)
     , m_justifySelf(RenderStyle::initialJustifySelf())
     , m_justifySelfOverflowAlignment(RenderStyle::initialJustifySelfOverflowAlignment())
     , userDrag(RenderStyle::initialUserDrag())
@@ -177,6 +180,9 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
     , m_alignSelf(o.m_alignSelf)
     , m_alignSelfOverflowAlignment(o.m_alignSelfOverflowAlignment)
     , m_justifyContent(o.m_justifyContent)
+    , m_justifyItems(o.m_justifyItems)
+    , m_justifyItemsOverflowAlignment(o.m_justifyItemsOverflowAlignment)
+    , m_justifyItemsPositionType(o.m_justifyItemsPositionType)
     , m_justifySelf(o.m_justifySelf)
     , m_justifySelfOverflowAlignment(o.m_justifySelfOverflowAlignment)
     , userDrag(o.userDrag)
@@ -292,6 +298,9 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
 #endif
         && m_aspectRatioType == o.m_aspectRatioType
         && m_objectFit == o.m_objectFit
+        && m_justifyItems == o.m_justifyItems
+        && m_justifyItemsOverflowAlignment == o.m_justifyItemsOverflowAlignment
+        && m_justifyItemsPositionType == o.m_justifyItemsPositionType
         && m_justifySelf == o.m_justifySelf
         && m_justifySelfOverflowAlignment == o.m_justifySelfOverflowAlignment;
 }
index 61fdc9e..ca6ea07 100644 (file)
@@ -194,6 +194,10 @@ public:
     unsigned m_alignSelfOverflowAlignment : 2; // OverflowAlignment
     unsigned m_justifyContent : 3; // EJustifyContent
 
+    unsigned m_justifyItems : 4; // ItemPosition
+    unsigned m_justifyItemsOverflowAlignment : 2; // OverflowAlignment
+    unsigned m_justifyItemsPositionType: 1; // Whether or not alignment uses the 'legacy' keyword.
+
     unsigned m_justifySelf : 4; // ItemPosition
     unsigned m_justifySelfOverflowAlignment : 2; // OverflowAlignment