From 78e0286f3414f1b1f6e4b231be6caa2b5e52ccee Mon Sep 17 00:00:00 2001
From: "jfernandez@igalia.com"
 <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Wed, 5 Apr 2017 20:44:10 +0000
Subject: [PATCH] [css-align] Implement the place-items shorthand
 https://bugs.webkit.org/show_bug.cgi?id=168847

Reviewed by David Hyatt.

Source/WebCore:

The CSS Box Alignment specification defines a new shorthand to set the
Content Alignment properties (align-items and justify-items) at the
same time.

This patch provides the implementation of the CSS parsing logic and the
required regression tests. For the time being, as it happens with the
rest of the new alignment properties, the new parsing logic is
implemented behind the CSS Grid Layout runtime flag.

Test: css3/parse-place-items.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSProperties.json:
* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue):
(WebCore::StyleProperties::getAlignmentShorthandValue):
* css/StyleProperties.h:
* css/parser/CSSPropertyParser.cpp:
(WebCore::isAutoOrNormalOrStretch):
(WebCore::consumeSelfPositionOverflowPosition):
(WebCore::consumeSimplifiedItemPosition):
(WebCore::CSSPropertyParser::consumePlaceItemsShorthand):
* css/parser/CSSPropertyParser.h:

LayoutTests:

Regression tests for the new place-content alignment shorthand.

* css3/parse-place-items.html: Added.


git-svn-id: https://svn.webkit.org/repository/webkit/trunk@214966 268f45cc-cd09-0410-ab3c-d52691b4dbfc
---
 LayoutTests/ChangeLog                              |  11 +
 LayoutTests/css3/parse-place-items-expected.txt    |  28 +++
 LayoutTests/css3/parse-place-items.html            | 260 +++++++++++++++++++++
 Source/WebCore/ChangeLog                           |  32 +++
 Source/WebCore/css/CSSComputedStyleDeclaration.cpp |   3 +
 Source/WebCore/css/CSSProperties.json              |  12 +
 Source/WebCore/css/StyleProperties.cpp             |  10 +-
 Source/WebCore/css/StyleProperties.h               |   2 +-
 Source/WebCore/css/parser/CSSPropertyParser.cpp    |  44 +++-
 Source/WebCore/css/parser/CSSPropertyParser.h      |   1 +
 10 files changed, 397 insertions(+), 6 deletions(-)
 create mode 100644 LayoutTests/css3/parse-place-items-expected.txt
 create mode 100644 LayoutTests/css3/parse-place-items.html

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index b80c46a..b988f11 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,14 @@
+2017-04-05  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Implement the place-items shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=168847
+
+        Reviewed by David Hyatt.
+
+        Regression tests for the new place-content alignment shorthand.
+
+        * css3/parse-place-items.html: Added.
+
 2017-04-05  Carlos Alberto Lopez Perez  <clopez@igalia.com>
 
         [WebRTC][OpenWebRTC] Add support for SDP BUNDLE ("a:group:BUNDLE" and "a=bundle-only" lines)
diff --git a/LayoutTests/css3/parse-place-items-expected.txt b/LayoutTests/css3/parse-place-items-expected.txt
new file mode 100644
index 0000000..5363bc8
--- /dev/null
+++ b/LayoutTests/css3/parse-place-items-expected.txt
@@ -0,0 +1,28 @@
+Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.
+
+
+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. 
+PASS Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS. 
+PASS Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS. 
+PASS Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS. 
+PASS Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS. 
+PASS Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS. 
+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 '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. 
+PASS Test setting 'baseline safe' as incorrect value through CSS. 
+PASS Test setting 'start end left' as incorrect value through CSS. 
+PASS Test setting values through JS. 
+PASS Test setting incorrect values through JS. 
+PASS Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value 
+PASS Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value 
+
diff --git a/LayoutTests/css3/parse-place-items.html b/LayoutTests/css3/parse-place-items.html
new file mode 100644
index 0000000..4ec8722
--- /dev/null
+++ b/LayoutTests/css3/parse-place-items.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#placeItemsNormal {
+  place-items: normal;
+}
+#placeItemsCenterAuto {
+  place-items: center auto;
+}
+#placeItemsBaseline {
+  place-items: baseline;
+}
+#placeItemsFirstBaseline {
+  place-items: first baseline;
+}
+#placeItemsLastBaseline {
+  place-items: last baseline;
+}
+#placeItemsStart {
+  place-items: start;
+}
+#placeItemsFlexStart {
+  place-items: flex-start;
+}
+#placeItemsEnd {
+  place-items: end;
+}
+#placeItemsSelfStart {
+  place-items: self-start;
+}
+#placeItemsStretch {
+  place-items: stretch;
+}
+#placeItemsStartEnd {
+  place-items: start end;
+}
+#placeItemsStartSelfEnd {
+  place-items: start self-end;
+}
+#placeItemsStartBaseline {
+  place-items: start baseline;
+}
+
+<!-- Invalid CSS cases -->
+#placeItemsEmpty {
+  place-items:;
+}
+#placeItemsAuto {
+  place-items: auto;
+}
+#placeItemsNone {
+  place-items: none;
+}
+#placeItemsSafe {
+  place-items: safe;
+}
+#placeItemsStartSafe {
+  place-items: start safe;
+}
+#placeItemsStartEndLeft {
+  place-items: start end left;
+}
+</style>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/alignment-parsing-utils-th.js"></script>
+</head>
+<body>
+  <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
+  <div id="log"></div>
+
+  <div id="placeItemsNormal"></div>
+  <div id="placeItemsCenterAuto"></div>
+  <div id="placeItemsBaseline"></div>
+  <div id="placeItemsFirstBaseline"></div>
+  <div id="placeItemsLastBaseline"></div>
+  <div id="placeItemsStart"></div>
+  <div id="placeItemsFlexStart"></div>
+  <div id="placeItemsEnd"></div>
+  <div id="placeItemsSelfStart"></div>
+  <div id="placeItemsStretch"></div>
+  <div id="placeItemsStartEnd"></div>
+  <div id="placeItemsStartSelfEnd"></div>
+  <div id="placeItemsStartBaseline"></div>
+
+  <div id="placeItemsEmpty"></div>
+  <div id="placeItemsAuto"></div>
+  <div id="placeItemsNone"></div>
+  <div id="placeItemsSafe"></div>
+  <div id="placeItemsStartSafe"></div>
+  <div id="placeItemsBaselineSafe"></div>
+  <div id="placeItemsStartEndLeft"></div>
+<script>
+function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
+  var res = value.split(" ");
+  if (res.length < 2)
+    res[1] = res[0];
+  checkValues(element, "alignItems", "align-items", res[0], alignValue);
+  checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
+}
+
+function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
+{
+  element = document.createElement("div");
+  document.body.appendChild(element);
+  element.style.placeItems = value;
+  checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
+  checkPlaceItemsValues(element, value, alignValue, justifyValue)
+}
+
+function checkPlaceItemsValuesBadJS(value)
+{
+  element.style.placeItems = "";
+  element.style.placeItems = value;
+  checkPlaceItemsValues(element, "", "normal", "normal")
+}
+
+test(function() {
+  checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
+}, "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.");
+
+test(function() {
+  checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline");
+  checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline");
+  checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStart, "placeItems", "place-items", "", "start start");
+  checkPlaceItemsValues(placeItemsStart, "", "start", "start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start");
+  checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
+  checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start");
+  checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
+  checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
+  checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
+  checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
+  checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
+}, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");
+
+test(function() {
+  checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
+}, "Test setting '' 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.");
+
+test(function() {
+  checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
+}, "Test setting 'none' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
+}, "Test setting 'safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
+}, "Test setting 'start safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
+}, "Test setting 'baseline safe' as incorrect value through CSS.");
+
+test(function() {
+  checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
+  checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
+}, "Test setting 'start end left' as incorrect value through CSS.");
+
+test(function() {
+  checkPlaceItemsValuesJS("center", "center", "center");
+  checkPlaceItemsValuesJS("center start", "center", "start");
+  checkPlaceItemsValuesJS("self-start end", "self-start", "end");
+  checkPlaceItemsValuesJS("normal end", "normal", "end");
+}, "Test setting values through JS.");
+
+test(function() {
+  checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
+  checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
+  checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
+  checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
+  checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
+  checkPlaceItemsValuesBadJS("auto", "normal", "normal");
+  checkPlaceItemsValuesBadJS("10px", "normal", "normal");
+  checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
+  checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
+  checkPlaceItemsValuesBadJS("", "normal", "normal");
+}, "Test setting incorrect values through JS.");
+
+test(function() {
+  element = document.createElement("div");
+  document.body.appendChild(element);
+  checkValues(element, "placeItems", "place-items", "", "normal normal");
+  element.style.placeItems = "center";
+  checkPlaceItemsValues(element, "center", "center", "center");
+  element.style.placeItems = "initial";
+  checkValues(element, "placeItems", "place-items", "initial", "normal normal");
+  checkPlaceItemsValues(element, "initial", "normal", "normal");
+}, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");
+
+test(function() {
+  document.body.style.placeItems = "start";
+  var anotherElement = document.createElement("div");
+  document.body.appendChild(anotherElement);
+  checkPlaceItemsValues(anotherElement, "", "normal", "normal");
+  anotherElement.style.placeItems = "inherit";
+  checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
+}, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index b199074..a24f57e 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,35 @@
+2017-04-05  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-align] Implement the place-items shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=168847
+
+        Reviewed by David Hyatt.
+
+        The CSS Box Alignment specification defines a new shorthand to set the
+        Content Alignment properties (align-items and justify-items) at the
+        same time.
+
+        This patch provides the implementation of the CSS parsing logic and the
+        required regression tests. For the time being, as it happens with the
+        rest of the new alignment properties, the new parsing logic is
+        implemented behind the CSS Grid Layout runtime flag.
+
+        Test: css3/parse-place-items.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSProperties.json:
+        * css/StyleProperties.cpp:
+        (WebCore::StyleProperties::getPropertyValue):
+        (WebCore::StyleProperties::getAlignmentShorthandValue):
+        * css/StyleProperties.h:
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::isAutoOrNormalOrStretch):
+        (WebCore::consumeSelfPositionOverflowPosition):
+        (WebCore::consumeSimplifiedItemPosition):
+        (WebCore::CSSPropertyParser::consumePlaceItemsShorthand):
+        * css/parser/CSSPropertyParser.h:
+
 2017-04-05  Ryan Haddad  <ryanhaddad@apple.com>
 
         Unreviewed, rolling out r214932.
diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
index 7f8f79c..f9a9733 100644
--- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
+++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
@@ -327,6 +327,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyJustifySelf,
     CSSPropertyJustifyItems,
     CSSPropertyPlaceContent,
+    CSSPropertyPlaceItems,
 #if ENABLE(FILTERS_LEVEL_2)
     CSSPropertyWebkitBackdropFilter,
 #endif
@@ -2950,6 +2951,8 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
             return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style->justifySelf(), styledElement->parentNode()));
         case CSSPropertyPlaceContent:
             return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
+        case CSSPropertyPlaceItems:
+            return getCSSPropertyValuesForShorthandProperties(placeItemsShorthand());
         case CSSPropertyOrder:
             return cssValuePool.createValue(style->order(), CSSPrimitiveValue::CSS_NUMBER);
         case CSSPropertyFloat:
diff --git a/Source/WebCore/css/CSSProperties.json b/Source/WebCore/css/CSSProperties.json
index b9d6992..37730b6 100644
--- a/Source/WebCore/css/CSSProperties.json
+++ b/Source/WebCore/css/CSSProperties.json
@@ -4677,6 +4677,18 @@
                 "url": "https://www.w3.org/TR/css-align-3/#propdef-place-content"
             }
         },
+        "place-items": {
+            "codegen-properties": {
+                "longhands": [
+                    "align-items",
+                    "justify-items"
+                ]
+            },
+            "specification": {
+                "category": "css-align",
+                "url": "https://drafts.csswg.org/css-align-3/#propdef-place-items"
+            }
+        },
         "grid": {
             "codegen-properties": {
                 "longhands": [
diff --git a/Source/WebCore/css/StyleProperties.cpp b/Source/WebCore/css/StyleProperties.cpp
index da1849a..a3a10a6 100644
--- a/Source/WebCore/css/StyleProperties.cpp
+++ b/Source/WebCore/css/StyleProperties.cpp
@@ -186,7 +186,9 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
     case CSSPropertyGridRow:
         return getShorthandValue(gridRowShorthand());
     case CSSPropertyPlaceContent:
-        return placeContentPropertyValue();
+        return getAlignmentShorthandValue(placeContentShorthand());
+    case CSSPropertyPlaceItems:
+        return getAlignmentShorthandValue(placeItemsShorthand());
     case CSSPropertyFont:
         return fontValue();
     case CSSPropertyMargin:
@@ -583,11 +585,11 @@ String StyleProperties::getCommonValue(const StylePropertyShorthand& shorthand)
     return res;
 }
 
-String StyleProperties::placeContentPropertyValue() const
+String StyleProperties::getAlignmentShorthandValue(const StylePropertyShorthand& shorthand) const
 {
-    String value = getCommonValue(placeContentShorthand());
+    String value = getCommonValue(shorthand);
     if (value.isNull() || value.isEmpty())
-        return getShorthandValue(placeContentShorthand());
+        return getShorthandValue(shorthand);
     return value;
 }
 
diff --git a/Source/WebCore/css/StyleProperties.h b/Source/WebCore/css/StyleProperties.h
index 481fa79..fd9fca3 100644
--- a/Source/WebCore/css/StyleProperties.h
+++ b/Source/WebCore/css/StyleProperties.h
@@ -157,7 +157,7 @@ protected:
 private:
     String getShorthandValue(const StylePropertyShorthand&) const;
     String getCommonValue(const StylePropertyShorthand&) const;
-    String placeContentPropertyValue() const;
+    String getAlignmentShorthandValue(const StylePropertyShorthand&) const;
     enum CommonValueMode { OmitUncommonValues, ReturnNullOnUncommonValues };
     String borderPropertyValue(CommonValueMode) const;
     String getLayeredShorthandValue(const StylePropertyShorthand&) const;
diff --git a/Source/WebCore/css/parser/CSSPropertyParser.cpp b/Source/WebCore/css/parser/CSSPropertyParser.cpp
index f27455f..ceb3c8d 100644
--- a/Source/WebCore/css/parser/CSSPropertyParser.cpp
+++ b/Source/WebCore/css/parser/CSSPropertyParser.cpp
@@ -2619,6 +2619,11 @@ static RefPtr<CSSValue> consumeShapeOutside(CSSParserTokenRange& range, const CS
     return list;
 }
 
+static bool isAutoOrNormalOrStretch(CSSValueID id)
+{
+    return identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(id);
+}
+
 static bool isContentDistributionKeyword(CSSValueID id)
 {
     return identMatches<CSSValueSpaceBetween, CSSValueSpaceAround, CSSValueSpaceEvenly, CSSValueStretch>(id);
@@ -3075,7 +3080,7 @@ static RefPtr<CSSPrimitiveValue> consumeSelfPositionKeyword(CSSParserTokenRange&
 static RefPtr<CSSValue> consumeSelfPositionOverflowPosition(CSSParserTokenRange& range)
 {
     CSSValueID id = range.peek().id();
-    if (identMatches<CSSValueAuto, CSSValueNormal, CSSValueStretch>(id))
+    if (isAutoOrNormalOrStretch(id))
         return consumeIdent(range);
 
     if (isBaselineKeyword(id))
@@ -5505,6 +5510,41 @@ bool CSSPropertyParser::consumePlaceContentShorthand(bool important)
     return true;
 }
 
+static RefPtr<CSSValue> consumeSimplifiedItemPosition(CSSParserTokenRange& range)
+{
+    CSSValueID id = range.peek().id();
+    if (isAutoOrNormalOrStretch(id))
+        return consumeIdent(range);
+
+    if (isBaselineKeyword(id))
+        return consumeBaselineKeyword(range);
+
+    return consumeSelfPositionKeyword(range);
+}
+
+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);
+    if (!alignItemsValue)
+        return false;
+    RefPtr<CSSValue> justifyItemsValue = m_range.atEnd() ? alignItemsValue : consumeSimplifiedItemPosition(m_range);
+    if (!justifyItemsValue)
+        return false;
+
+    if (!m_range.atEnd())
+        return false;
+
+    addProperty(CSSPropertyAlignItems, CSSPropertyPlaceItems, alignItemsValue.releaseNonNull(), important);
+    addProperty(CSSPropertyJustifyItems, CSSPropertyPlaceItems, justifyItemsValue.releaseNonNull(), important);
+    return true;
+}
+
 bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
 {
     switch (property) {
@@ -5688,6 +5728,8 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
         return consumeGridShorthand(important);
     case CSSPropertyPlaceContent:
         return consumePlaceContentShorthand(important);
+    case CSSPropertyPlaceItems:
+        return consumePlaceItemsShorthand(important);
     case CSSPropertyWebkitMarquee:
         return consumeShorthandGreedily(webkitMarqueeShorthand(), important);
     default:
diff --git a/Source/WebCore/css/parser/CSSPropertyParser.h b/Source/WebCore/css/parser/CSSPropertyParser.h
index bdde19c..10269cd 100644
--- a/Source/WebCore/css/parser/CSSPropertyParser.h
+++ b/Source/WebCore/css/parser/CSSPropertyParser.h
@@ -81,6 +81,7 @@ private:
     bool consumeGridAreaShorthand(bool important);
 
     bool consumePlaceContentShorthand(bool important);
+    bool consumePlaceItemsShorthand(bool important);
 
     bool consumeFont(bool important);
     bool consumeFontVariantShorthand(bool important);
-- 
1.8.3.1