<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[214966] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/214966">214966</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2017-04-05 13:44:10 -0700 (Wed, 05 Apr 2017)</dd>
</dl>

<h3>Log Message</h3>
<pre>[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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPropertiesjson">trunk/Source/WebCore/css/CSSProperties.json</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiescpp">trunk/Source/WebCore/css/StyleProperties.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStylePropertiesh">trunk/Source/WebCore/css/StyleProperties.h</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParserh">trunk/Source/WebCore/css/parser/CSSPropertyParser.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3parseplaceitemsexpectedtxt">trunk/LayoutTests/css3/parse-place-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3parseplaceitemshtml">trunk/LayoutTests/css3/parse-place-items.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/LayoutTests/ChangeLog        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2017-04-05  Javier Fernandez  &lt;jfernandez@igalia.com&gt;
+
+        [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.
+
</ins><span class="cx"> 2017-04-05  Carlos Alberto Lopez Perez  &lt;clopez@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [WebRTC][OpenWebRTC] Add support for SDP BUNDLE (&quot;a:group:BUNDLE&quot; and &quot;a=bundle-only&quot; lines)
</span></span></pre></div>
<a id="trunkLayoutTestscss3parseplaceitemsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/parse-place-items-expected.txt (0 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-place-items-expected.txt                                (rev 0)
+++ trunk/LayoutTests/css3/parse-place-items-expected.txt        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -0,0 +1,28 @@
</span><ins>+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 
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3parseplaceitemshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/parse-place-items.html (0 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/parse-place-items.html                                (rev 0)
+++ trunk/LayoutTests/css3/parse-place-items.html        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -0,0 +1,260 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+#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;
+}
+
+&lt;!-- Invalid CSS cases --&gt;
+#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;
+}
+&lt;/style&gt;
+&lt;script src=&quot;../resources/testharness.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../resources/testharnessreport.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;resources/alignment-parsing-utils-th.js&quot;&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.&lt;/p&gt;
+  &lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
+
+  &lt;div id=&quot;placeItemsNormal&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsCenterAuto&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsBaseline&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsFirstBaseline&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsLastBaseline&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStart&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsFlexStart&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsEnd&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsSelfStart&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStretch&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStartEnd&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStartSelfEnd&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStartBaseline&quot;&gt;&lt;/div&gt;
+
+  &lt;div id=&quot;placeItemsEmpty&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsAuto&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsNone&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsSafe&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStartSafe&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsBaselineSafe&quot;&gt;&lt;/div&gt;
+  &lt;div id=&quot;placeItemsStartEndLeft&quot;&gt;&lt;/div&gt;
+&lt;script&gt;
+function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
+  var res = value.split(&quot; &quot;);
+  if (res.length &lt; 2)
+    res[1] = res[0];
+  checkValues(element, &quot;alignItems&quot;, &quot;align-items&quot;, res[0], alignValue);
+  checkValues(element, &quot;justifyItems&quot;, &quot;justify-items&quot;, res[1], justifyValue);
+}
+
+function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
+{
+  element = document.createElement(&quot;div&quot;);
+  document.body.appendChild(element);
+  element.style.placeItems = value;
+  checkValues(element, &quot;placeItems&quot;, &quot;place-items&quot;, value, alignValue + ' ' + justifyValue)
+  checkPlaceItemsValues(element, value, alignValue, justifyValue)
+}
+
+function checkPlaceItemsValuesBadJS(value)
+{
+  element.style.placeItems = &quot;&quot;;
+  element.style.placeItems = value;
+  checkPlaceItemsValues(element, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;)
+}
+
+test(function() {
+  checkValues(placeItemsNormal, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsNormal, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsCenterAuto, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;center normal&quot;);
+  checkPlaceItemsValues(placeItemsCenterAuto, &quot;&quot;, &quot;center&quot;, &quot;normal&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsBaseline, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;baseline baseline&quot;);
+  checkPlaceItemsValues(placeItemsBaseline, &quot;&quot;, &quot;baseline&quot;, &quot;baseline&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsFirstBaseline, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;baseline baseline&quot;);
+  checkPlaceItemsValues(placeItemsFirstBaseline, &quot;&quot;, &quot;baseline&quot;, &quot;baseline&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsLastBaseline, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;last baseline last baseline&quot;);
+  checkPlaceItemsValues(placeItemsLastBaseline, &quot;&quot;, &quot;last baseline&quot;, &quot;last baseline&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStart, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;start start&quot;);
+  checkPlaceItemsValues(placeItemsStart, &quot;&quot;, &quot;start&quot;, &quot;start&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsFlexStart, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;flex-start flex-start&quot;);
+  checkPlaceItemsValues(placeItemsFlexStart, &quot;&quot;, &quot;flex-start&quot;, &quot;flex-start&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsEnd, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;end end&quot;);
+  checkPlaceItemsValues(placeItemsEnd, &quot;&quot;, &quot;end&quot;, &quot;end&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsSelfStart, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;self-start self-start&quot;);
+  checkPlaceItemsValues(placeItemsSelfStart, &quot;&quot;, &quot;self-start&quot;, &quot;self-start&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStretch, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;stretch stretch&quot;);
+  checkPlaceItemsValues(placeItemsStretch, &quot;&quot;, &quot;stretch&quot;, &quot;stretch&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartEnd, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;start end&quot;);
+  checkPlaceItemsValues(placeItemsStartEnd, &quot;&quot;, &quot;start&quot;, &quot;end&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartSelfEnd, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;start self-end&quot;);
+  checkPlaceItemsValues(placeItemsStartSelfEnd, &quot;&quot;, &quot;start&quot;, &quot;self-end&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartBaseline, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;start baseline&quot;);
+  checkPlaceItemsValues(placeItemsStartBaseline, &quot;&quot;, &quot;start&quot;, &quot;baseline&quot;);
+}, &quot;Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsAuto, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsAuto, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting '' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsAuto, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsAuto, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'auto' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsNone, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsNone, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'none' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsSafe, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsSafe, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'safe' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartSafe, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsStartSafe, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'start safe' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartSafe, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsStartSafe, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'baseline safe' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkValues(placeItemsStartEndLeft, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(placeItemsStartEndLeft, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting 'start end left' as incorrect value through CSS.&quot;);
+
+test(function() {
+  checkPlaceItemsValuesJS(&quot;center&quot;, &quot;center&quot;, &quot;center&quot;);
+  checkPlaceItemsValuesJS(&quot;center start&quot;, &quot;center&quot;, &quot;start&quot;);
+  checkPlaceItemsValuesJS(&quot;self-start end&quot;, &quot;self-start&quot;, &quot;end&quot;);
+  checkPlaceItemsValuesJS(&quot;normal end&quot;, &quot;normal&quot;, &quot;end&quot;);
+}, &quot;Test setting values through JS.&quot;);
+
+test(function() {
+  checkPlaceItemsValuesBadJS(&quot;auto normal&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;space-between&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;center safe&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;center self-start center&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;asrt&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;auto&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;10px&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;stretch safe&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;self-start start end&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  checkPlaceItemsValuesBadJS(&quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test setting incorrect values through JS.&quot;);
+
+test(function() {
+  element = document.createElement(&quot;div&quot;);
+  document.body.appendChild(element);
+  checkValues(element, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;&quot;, &quot;normal normal&quot;);
+  element.style.placeItems = &quot;center&quot;;
+  checkPlaceItemsValues(element, &quot;center&quot;, &quot;center&quot;, &quot;center&quot;);
+  element.style.placeItems = &quot;initial&quot;;
+  checkValues(element, &quot;placeItems&quot;, &quot;place-items&quot;, &quot;initial&quot;, &quot;normal normal&quot;);
+  checkPlaceItemsValues(element, &quot;initial&quot;, &quot;normal&quot;, &quot;normal&quot;);
+}, &quot;Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value&quot;);
+
+test(function() {
+  document.body.style.placeItems = &quot;start&quot;;
+  var anotherElement = document.createElement(&quot;div&quot;);
+  document.body.appendChild(anotherElement);
+  checkPlaceItemsValues(anotherElement, &quot;&quot;, &quot;normal&quot;, &quot;normal&quot;);
+  anotherElement.style.placeItems = &quot;inherit&quot;;
+  checkPlaceItemsValues(anotherElement, &quot;inherit&quot;, &quot;start&quot;, &quot;start&quot;);
+}, &quot;Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value&quot;);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/ChangeLog        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -1,3 +1,35 @@
</span><ins>+2017-04-05  Javier Fernandez  &lt;jfernandez@igalia.com&gt;
+
+        [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:
+
</ins><span class="cx"> 2017-04-05  Ryan Haddad  &lt;ryanhaddad@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Unreviewed, rolling out r214932.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -327,6 +327,7 @@
</span><span class="cx">     CSSPropertyJustifySelf,
</span><span class="cx">     CSSPropertyJustifyItems,
</span><span class="cx">     CSSPropertyPlaceContent,
</span><ins>+    CSSPropertyPlaceItems,
</ins><span class="cx"> #if ENABLE(FILTERS_LEVEL_2)
</span><span class="cx">     CSSPropertyWebkitBackdropFilter,
</span><span class="cx"> #endif
</span><span class="lines">@@ -2950,6 +2951,8 @@
</span><span class="cx">             return valueForItemPositionWithOverflowAlignment(resolveJustifySelfAuto(style-&gt;justifySelf(), styledElement-&gt;parentNode()));
</span><span class="cx">         case CSSPropertyPlaceContent:
</span><span class="cx">             return getCSSPropertyValuesForShorthandProperties(placeContentShorthand());
</span><ins>+        case CSSPropertyPlaceItems:
+            return getCSSPropertyValuesForShorthandProperties(placeItemsShorthand());
</ins><span class="cx">         case CSSPropertyOrder:
</span><span class="cx">             return cssValuePool.createValue(style-&gt;order(), CSSPrimitiveValue::CSS_NUMBER);
</span><span class="cx">         case CSSPropertyFloat:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPropertiesjson"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSProperties.json (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSProperties.json        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/CSSProperties.json        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -4677,6 +4677,18 @@
</span><span class="cx">                 &quot;url&quot;: &quot;https://www.w3.org/TR/css-align-3/#propdef-place-content&quot;
</span><span class="cx">             }
</span><span class="cx">         },
</span><ins>+        &quot;place-items&quot;: {
+            &quot;codegen-properties&quot;: {
+                &quot;longhands&quot;: [
+                    &quot;align-items&quot;,
+                    &quot;justify-items&quot;
+                ]
+            },
+            &quot;specification&quot;: {
+                &quot;category&quot;: &quot;css-align&quot;,
+                &quot;url&quot;: &quot;https://drafts.csswg.org/css-align-3/#propdef-place-items&quot;
+            }
+        },
</ins><span class="cx">         &quot;grid&quot;: {
</span><span class="cx">             &quot;codegen-properties&quot;: {
</span><span class="cx">                 &quot;longhands&quot;: [
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.cpp (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.cpp        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/StyleProperties.cpp        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -186,7 +186,9 @@
</span><span class="cx">     case CSSPropertyGridRow:
</span><span class="cx">         return getShorthandValue(gridRowShorthand());
</span><span class="cx">     case CSSPropertyPlaceContent:
</span><del>-        return placeContentPropertyValue();
</del><ins>+        return getAlignmentShorthandValue(placeContentShorthand());
+    case CSSPropertyPlaceItems:
+        return getAlignmentShorthandValue(placeItemsShorthand());
</ins><span class="cx">     case CSSPropertyFont:
</span><span class="cx">         return fontValue();
</span><span class="cx">     case CSSPropertyMargin:
</span><span class="lines">@@ -583,11 +585,11 @@
</span><span class="cx">     return res;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-String StyleProperties::placeContentPropertyValue() const
</del><ins>+String StyleProperties::getAlignmentShorthandValue(const StylePropertyShorthand&amp; shorthand) const
</ins><span class="cx"> {
</span><del>-    String value = getCommonValue(placeContentShorthand());
</del><ins>+    String value = getCommonValue(shorthand);
</ins><span class="cx">     if (value.isNull() || value.isEmpty())
</span><del>-        return getShorthandValue(placeContentShorthand());
</del><ins>+        return getShorthandValue(shorthand);
</ins><span class="cx">     return value;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorecssStylePropertiesh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleProperties.h (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleProperties.h        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/StyleProperties.h        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -157,7 +157,7 @@
</span><span class="cx"> private:
</span><span class="cx">     String getShorthandValue(const StylePropertyShorthand&amp;) const;
</span><span class="cx">     String getCommonValue(const StylePropertyShorthand&amp;) const;
</span><del>-    String placeContentPropertyValue() const;
</del><ins>+    String getAlignmentShorthandValue(const StylePropertyShorthand&amp;) const;
</ins><span class="cx">     enum CommonValueMode { OmitUncommonValues, ReturnNullOnUncommonValues };
</span><span class="cx">     String borderPropertyValue(CommonValueMode) const;
</span><span class="cx">     String getLayeredShorthandValue(const StylePropertyShorthand&amp;) const;
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -2619,6 +2619,11 @@
</span><span class="cx">     return list;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+static bool isAutoOrNormalOrStretch(CSSValueID id)
+{
+    return identMatches&lt;CSSValueAuto, CSSValueNormal, CSSValueStretch&gt;(id);
+}
+
</ins><span class="cx"> static bool isContentDistributionKeyword(CSSValueID id)
</span><span class="cx"> {
</span><span class="cx">     return identMatches&lt;CSSValueSpaceBetween, CSSValueSpaceAround, CSSValueSpaceEvenly, CSSValueStretch&gt;(id);
</span><span class="lines">@@ -3075,7 +3080,7 @@
</span><span class="cx"> static RefPtr&lt;CSSValue&gt; consumeSelfPositionOverflowPosition(CSSParserTokenRange&amp; range)
</span><span class="cx"> {
</span><span class="cx">     CSSValueID id = range.peek().id();
</span><del>-    if (identMatches&lt;CSSValueAuto, CSSValueNormal, CSSValueStretch&gt;(id))
</del><ins>+    if (isAutoOrNormalOrStretch(id))
</ins><span class="cx">         return consumeIdent(range);
</span><span class="cx"> 
</span><span class="cx">     if (isBaselineKeyword(id))
</span><span class="lines">@@ -5505,6 +5510,41 @@
</span><span class="cx">     return true;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+static RefPtr&lt;CSSValue&gt; consumeSimplifiedItemPosition(CSSParserTokenRange&amp; 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&lt;CSSValueAuto&gt;(m_range.peek().id()))
+        return false;
+
+    RefPtr&lt;CSSValue&gt; alignItemsValue = consumeSimplifiedItemPosition(m_range);
+    if (!alignItemsValue)
+        return false;
+    RefPtr&lt;CSSValue&gt; 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;
+}
+
</ins><span class="cx"> bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
</span><span class="cx"> {
</span><span class="cx">     switch (property) {
</span><span class="lines">@@ -5688,6 +5728,8 @@
</span><span class="cx">         return consumeGridShorthand(important);
</span><span class="cx">     case CSSPropertyPlaceContent:
</span><span class="cx">         return consumePlaceContentShorthand(important);
</span><ins>+    case CSSPropertyPlaceItems:
+        return consumePlaceItemsShorthand(important);
</ins><span class="cx">     case CSSPropertyWebkitMarquee:
</span><span class="cx">         return consumeShorthandGreedily(webkitMarqueeShorthand(), important);
</span><span class="cx">     default:
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParserh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.h (214965 => 214966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.h        2017-04-05 20:17:37 UTC (rev 214965)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.h        2017-04-05 20:44:10 UTC (rev 214966)
</span><span class="lines">@@ -81,6 +81,7 @@
</span><span class="cx">     bool consumeGridAreaShorthand(bool important);
</span><span class="cx"> 
</span><span class="cx">     bool consumePlaceContentShorthand(bool important);
</span><ins>+    bool consumePlaceItemsShorthand(bool important);
</ins><span class="cx"> 
</span><span class="cx">     bool consumeFont(bool important);
</span><span class="cx">     bool consumeFontVariantShorthand(bool important);
</span></span></pre>
</div>
</div>

</body>
</html>