From 948b8dee181da1bd431f91229f05e73e3b423490 Mon Sep 17 00:00:00 2001
From: Javier Fernandez <jfernandez@igalia.com>
Date: Mon, 29 Jan 2018 11:56:58 +0000
Subject: [PATCH] [css-align] justify-content doesn't allow <baseline-position>
 values

The CSS WG has resolved that it doesn't make sense to define Baseline
Content-Alignment in the inline/main axis.

https://github.com/w3c/csswg-drafts/issues/1184

The spec has been updated so that <baseline-postion> is not valid for
the 'justify-content' property's syntax. This CL updates our parsing
logic to match the new spec, including the parsing logic of the
place-content shorthand.

Additionally, this CL updates the computed value of the
<baseline-position> values to match other browsers.

We don't implement support for <baseline-position> values in the
Content Distribution properties (align-content and justify-content),
so I don't expect this change to break content of sites using the CSS
Box Alignment feature.

Bug: 802248, 803275
Change-Id: I0d3b1b7e7dd28552ee7e131bfe09ef7198565283
Reviewed-on: https://chromium-review.googlesource.com/882362
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#532400}
---
 .../WebKit/LayoutTests/TestExpectations       | 12 -----
 .../parse-align-content-001.html              |  8 +--
 .../parse-align-content-003.html              |  9 ++--
 .../parse-justify-content-001.html            |  7 +--
 .../parse-justify-content-003.html            |  8 ++-
 .../parse-justify-content-004.html            |  2 +-
 .../place-content-shorthand-001.html          |  4 +-
 .../place-content-shorthand-002.html          |  4 +-
 .../place-content-shorthand-004.html          |  9 +++-
 .../place-content-shorthand-006.html          |  6 +--
 .../parse-align-items-001.html                |  8 +--
 .../parse-align-items-003.html                |  9 ++--
 .../parse-justify-items-001.html              |  8 +--
 .../parse-justify-items-003.html              |  9 ++--
 .../place-items-shorthand-001.html            |  2 +-
 .../place-items-shorthand-002.html            |  2 +-
 .../place-items-shorthand-004.html            |  2 +-
 .../place-items-shorthand-006.html            |  4 +-
 .../resources/alignment-parsing-utils.js      | 23 +++++----
 .../self-alignment/parse-align-self-001.html  |  8 +--
 .../self-alignment/parse-align-self-003.html  |  9 ++--
 .../parse-justify-self-001.html               |  9 ++--
 .../parse-justify-self-003.html               |  9 ++--
 .../place-self-shorthand-001.html             |  2 +-
 .../place-self-shorthand-002.html             |  2 +-
 .../place-self-shorthand-004.html             |  2 +-
 .../place-self-shorthand-006.html             |  4 +-
 .../fast/alignment/parse-align-content.html   |  8 +--
 .../fast/alignment/parse-justify-content.html | 51 +++++++++----------
 .../fast/alignment/parse-place-content.html   | 39 ++++++++------
 .../core/css/properties/CSSParsingUtils.cpp   | 47 +++++++++--------
 .../longhands/JustifyContentCustom.cpp        |  5 ++
 32 files changed, 175 insertions(+), 156 deletions(-)

diff --git a/third_party/WebKit/LayoutTests/TestExpectations b/third_party/WebKit/LayoutTests/TestExpectations
index b69bfb7e428a9..fb8ab43393cd7 100644
--- a/third_party/WebKit/LayoutTests/TestExpectations
+++ b/third_party/WebKit/LayoutTests/TestExpectations
@@ -2358,18 +2358,6 @@ crbug.com/707359 [ Mac ] fast/css-grid-layout/grid-self-baseline-vertical-rl-05.
 # [css-align]
 crbug.com/726148 external/wpt/css/css-align/default-alignment/parse-justify-items-002.html [ Failure ]
 crbug.com/726147 external/wpt/css/css-align/default-alignment/parse-justify-items-004.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-003.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-003.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-003.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-003.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-003.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-001.html [ Failure ]
-crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-003.html [ Failure ]
 
 # [selectors-4]
 crbug.com/706118 external/wpt/css/selectors/focus-within-004.html [ Failure ]
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html
index 15a5cda29f28e..c5cd4254f7078 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html
@@ -24,10 +24,10 @@
         element.className = "alignContent" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignContent", "align-content", "", computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignContent", "align-content", "", "baseline");
+            else
+                checkValues(element, "alignContent", "align-content", "", specifiedValue);
         }, "Checking align-content: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html
index 49978572146ee..b0da3588bf691 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html
@@ -23,11 +23,12 @@
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.alignContent = "";
             element.style.alignContent = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignContent", "align-content",  specifiedValue, computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignContent", "align-content", "baseline", "baseline");
+            else
+                checkValues(element, "alignContent", "align-content",  specifiedValue, specifiedValue);
         }, "Checking align-content: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html
index f88c084cba627..df06ca920b1e6 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html
@@ -16,7 +16,7 @@
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
-                                distributionClasses, baselineClasses, overflowClasses);
+                                distributionClasses, overflowClasses);
 
     for (var key in classes) {
         let specifiedValue = classes[key];
@@ -24,10 +24,7 @@
         element.className = "justifyContent" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifyContent", "justify-content", "", computedValue);
+            checkValues(element, "justifyContent", "justify-content", "", specifiedValue);
         }, "Checking justify-content: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html
index 03aa693a2d68e..0dea6e55f5c26 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html
@@ -18,16 +18,14 @@
     document.body.appendChild(element);
 
     let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
-                                distributionClasses, baselineClasses, overflowClasses);
+                                distributionClasses, overflowClasses);
 
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.justifyContent = "";
             element.style.justifyContent = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifyContent", "justify-content",  specifiedValue, computedValue);
+            checkValues(element, "justifyContent", "justify-content",  specifiedValue, specifiedValue);
         }, "Checking justify-content: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html
index 6ba6f8b2383e4..22e78f84aed99 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html
@@ -13,7 +13,7 @@
     element = document.createElement("div");
     document.body.appendChild(element);
 
-    let values = ["auto", "legacy", "self-start"].concat(invalidPositionValues, invalidDistributionValues);
+    let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues);
 
     values.forEach(function(value) {
         test(function() {
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html
index 6254e08a3bd63..153f6dd3d71ad 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html
@@ -5,10 +5,10 @@
 <meta name="assert" content="Check that setting a single value to place-content expands to such value set in both 'align-content' and 'justify-content'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
-    let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
+    let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses);
     for (var key in classes) {
         let value = classes[key];
         test(function() {
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html
index 9892870c43d4c..e8a7b33dae6e5 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html
@@ -5,13 +5,13 @@
 <meta name="assert" content="Check that setting two values to place-content sets the first one to 'align-content' and the second one to 'justify-content'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
     for (var key1 in classes) {
         let alignValue = classes[key1];
-        let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
+        let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
         for (var key2 in classes2) {
             let justifyValue = classes2[key2];
             test(function() {
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html
index 8391a957d1293..30f45b686f4d2 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     function checkInvalidValues(value)
@@ -28,6 +28,13 @@
         checkInvalidValues("right center")
     }, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
 
+    test(function() {
+        checkInvalidValues("baseline")
+        checkInvalidValues("first baseline")
+        checkInvalidValues("start baseline")
+        checkInvalidValues("end last baseline")
+    }, "Verify <baseline-position> values are invalid for the justify-content property");
+
     test(function() {
         checkInvalidValues("10px end")
         checkInvalidValues("start 10%")
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html
index f9aa17ccbf4f0..2a5056d41360d 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html
@@ -5,19 +5,19 @@
 <meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <div id="test"></div>
 <script>
     let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
     for (var key1 in classes) {
         let alignValue = classes[key1];
-        let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
+        let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
         for (var key2 in classes2) {
             let justifyValue = classes2[key2];
             var value = (alignValue + " " + justifyValue).trim();
             test(function() {
-                checkPlaceShorhand("place-content", alignValue, justifyValue)
+                checkPlaceShorhand("place-content", value, alignValue, justifyValue)
             }, "Checking place-content: " + value);
         }
     }
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html
index 790550127605e..4a7d1b816c54b 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html
@@ -23,10 +23,10 @@
         element.className = "alignItems" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignItems", "align-items", "", computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignItems", "align-items", "", "baseline");
+            else
+                checkValues(element, "alignItems", "align-items", "", specifiedValue);
         }, "Checking align-items: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html
index 03c49515df515..aa6b295dc2052 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html
@@ -22,11 +22,12 @@
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.alignItems = "";
             element.style.alignItems = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignItems", "align-items",  specifiedValue, computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignItems", "align-items", "baseline", "baseline");
+            else
+                checkValues(element, "alignItems", "align-items",  specifiedValue, specifiedValue);
         }, "Checking align-items: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html
index e2ad078ca1bbd..aa4b147352eeb 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html
@@ -23,10 +23,10 @@
         element.className = "justifyItems" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifyItems", "justify-items", "", computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "justifyItems", "justify-items", "", "baseline");
+            else
+                checkValues(element, "justifyItems", "justify-items", "", specifiedValue);
         }, "Checking justify-items: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html
index fb8a067ce3998..9ab5ee3099a6f 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html
@@ -22,11 +22,12 @@
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.justifyItems = "";
             element.style.justifyItems = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifyItems", "justify-items",  specifiedValue, computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "justifyItems", "justify-items", "baseline", "baseline");
+            else
+                checkValues(element, "justifyItems", "justify-items",  specifiedValue, specifiedValue);
         }, "Checking justify-items: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html
index 928149a0721a9..c67ca9cbaf2cf 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that setting a single value to place-items expands to such value set in both 'align-items' and 'justify-items'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html
index 822c8cf976e43..61dab31b74eee 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that setting two values to place-items sets the first one to 'align-items' and the second one to 'justify-items'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html
index 57b6ac5437081..c5d94726f2afc 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that place-items's invalid values are properly detected at parsing time." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     function checkInvalidValues(value)
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html
index fcaa89f2a5204..4c55b1058da5c 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check the place-items's 'specified' and 'resolved' values serialization." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
@@ -16,7 +16,7 @@
             let justifyValue = classes2[key2];
             var value = (alignValue + " " + justifyValue).trim();
             test(function() {
-                checkPlaceShorhand("place-items", alignValue, justifyValue)
+                checkPlaceShorhand("place-items", value, alignValue, justifyValue)
             }, "Checking place-items: " + value);
         }
     }
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js
index 7effae9312237..0cbb820ecb495 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js
@@ -17,26 +17,27 @@ var invalidDistributionValues = ["space-between left", "space-around center", "s
                                  "space-between safe", "space-between stretch", "stretch start",
                                  "stretch baseline", "first baseline space-around"];
 
-function checkPlaceShorhand(shorthand, alignValue, justifyValue)
+function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
 {
     var div = document.createElement("div");
-    var specifiedValue = (alignValue + " " + justifyValue).trim();
-    div.style[shorthand] = specifiedValue;
+    div.style[shorthand] = shorthandValue;
     document.body.appendChild(div);
 
-    if (alignValue === justifyValue)
-        specifiedValue = alignValue;
-
-    var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
     if (alignValue === "first baseline")
         alignValue = "baseline";
     if (justifyValue === "first baseline")
         justifyValue = "baseline";
     if (justifyValue === "")
         justifyValue = alignValue;
-    var expectedResolvedValue = (alignValue + " " + justifyValue).trim()
 
-    assert_equals(div.style[shorthand], specifiedValue, shorthand + " specified value");
+    let specifiedValue = (alignValue + " " + justifyValue).trim();
+    if (alignValue === justifyValue)
+        specifiedValue = alignValue;
+
+    var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
+    var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
+
+    assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value");
     // FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which
     // value is expected for the shorthand's 'resolved value".
     assert_in_array(resolvedValue, ["", expectedResolvedValue], shorthand + " resolved value");
@@ -47,6 +48,10 @@ function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand,
     var div = document.createElement("div");
     div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue);
     document.body.appendChild(div);
+    if (alignValue === "first baseline")
+        alignValue = "baseline";
+    if (justifyValue === "first baseline")
+        justifyValue = "baseline";
     if (justifyValue === "")
         justifyValue = alignValue;
     assert_equals(div.style[alignLonghand],
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html
index e951124ec1ed5..b19372d503e3d 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html
@@ -23,10 +23,10 @@
         element.className = "alignSelf" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignSelf", "align-self", "", computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignSelf", "align-self", "", "baseline");
+            else
+                checkValues(element, "alignSelf", "align-self", "", specifiedValue);
         }, "Checking align-self: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html
index 19c89266df2cd..a2f3351fe2a5d 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html
@@ -22,11 +22,12 @@
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.alignSelf = "";
             element.style.alignSelf = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "alignSelf", "align-self",  specifiedValue, computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "alignSelf", "align-self", "baseline", "baseline");
+            else
+                checkValues(element, "alignSelf", "align-self",  specifiedValue, specifiedValue);
         }, "Checking align-self: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html
index da5f28f26b2a2..4b321d598582b 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html
@@ -23,10 +23,11 @@
         element.className = "justifySelf" + key;
         document.body.appendChild(element);
         test(function() {
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifySelf", "justify-self", "", computedValue);
+            let value = specifiedValue;
+            if (specifiedValue === "first baseline")
+                checkValues(element, "justifySelf", "justify-self", "", "baseline");
+            else
+                checkValues(element, "justifySelf", "justify-self", "", value);
         }, "Checking justify-self: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-003.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-003.html
index a7131ef57713e..96729166f15a7 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-003.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-003.html
@@ -22,11 +22,12 @@
     for (var key in classes) {
         let specifiedValue = classes[key];
         test(function() {
+            element.style.justifySelf = "";
             element.style.justifySelf = specifiedValue;
-            let computedValue = specifiedValue;
-            if (specifiedValue === "baseline")
-                computedValue = "first baseline";
-            checkValues(element, "justifySelf", "justify-self",  specifiedValue, computedValue);
+            if (specifiedValue === "first baseline")
+                checkValues(element, "justifySelf", "justify-self", "baseline", "baseline");
+            else
+                checkValues(element, "justifySelf", "justify-self",  specifiedValue, specifiedValue);
         }, "Checking justify-self: " + specifiedValue);
     }
 </script>
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-001.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-001.html
index 8cc3a336b43aa..d26df054d3585 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-001.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-001.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that setting a single value to place-self expands to such value set in both 'align-self' and 'justify-self'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-002.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-002.html
index 8725457c59a00..3ba6c55b91818 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-002.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-002.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that setting two values to place-self sets the first one to 'align-self' and the second one to 'justify-self'." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-004.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-004.html
index 9fc8315ad536c..8434d778e0c9b 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-004.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-004.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check that place-self's invalid values are properly detected at parsing time." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     function checkInvalidValues(value)
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-006.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-006.html
index c0139c11103b2..fb5dce1b13428 100644
--- a/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-006.html
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/place-self-shorthand-006.html
@@ -5,7 +5,7 @@
 <meta name="assert" content="Check the place-self's 'specified' and 'resolved' values serialization." />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../resources/alignment-parsing-utils.js"></script>
+<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
 <div id="log"></div>
 <script>
     let classes = Object.assign({"Auto":"auto", "Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
@@ -17,7 +17,7 @@
             let justifyValue = classes2[key2];
             var value = (alignValue + " " + justifyValue).trim();
             test(function() {
-                checkPlaceShorhand("place-self", alignValue, justifyValue)
+                checkPlaceShorhand("place-self", value, alignValue, justifyValue)
             }, "Checking place-self: " + value);
         }
     }
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html
index 23333bae9c9bb..f9468f358e804 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html
@@ -246,11 +246,11 @@
     element.style.alignContent = "unsafe end";
     checkValues(element, "alignContent", "align-content",  "unsafe end", "unsafe end");
 
-    element.style.justifyContent = "first baseline";
-    checkValues(element, "justifyContent", "justify-content",  "first baseline", "baseline");
+    element.style.alignContent = "first baseline";
+    checkValues(element, "alignContent", "align-content",  "baseline", "baseline");
 
-    element.style.justifyContent = "last baseline";
-    checkValues(element, "justifyContent", "justify-content",  "last baseline", "last baseline");
+    element.style.alignContent = "last baseline";
+    checkValues(element, "alignContent", "align-content",  "last baseline", "last baseline");
 
     element.style.alignContent = "normal";
     checkValues(element, "alignContent", "align-content",  "normal", "normal");
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html
index f4b78ddda3b23..b678e5174e0f0 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-justify-content.html
@@ -4,18 +4,6 @@
     justify-content: auto;
 }
 
-#justifyContentBaseline {
-    justify-content: baseline;
-}
-
-#justifyContentFirstBaseline {
-    justify-content: first baseline;
-}
-
-#justifyContentLastBaseline {
-    justify-content: last baseline;
-}
-
 #justifyContentSpaceBetween {
     justify-content: space-between;
 }
@@ -85,6 +73,18 @@
 }
 
 <!-- Invalid CSS cases -->
+#justifyContentBaseline {
+    justify-content: baseline;
+}
+
+#justifyContentFirstBaseline {
+    justify-content: first baseline;
+}
+
+#justifyContentLastBaseline {
+    justify-content: last baseline;
+}
+
 #justifyContentSpaceBetweenLeft {
     justify-content: space-between left;
 }
@@ -131,9 +131,6 @@
 </style>
 <p>Test that setting and getting justify-content works as expected</p>
 <div id="justifyContentAuto"></div>
-<div id="justifyContentBaseline"></div>
-<div id="justifyContentFirstBaseline"></div>
-<div id="justifyContentLastBaseline"></div>
 <div id="justifyContentSpaceBetween"></div>
 <div id="justifyContentSpaceAround"></div>
 <div id="justifyContentSpaceEvenly"></div>
@@ -160,6 +157,9 @@
 <div id="justifyContentFlexStartUnsafe"></div>
 <div id="justifyContentFlexEndSafe"></div>
 
+<div id="justifyContentBaseline"></div>
+<div id="justifyContentFirstBaseline"></div>
+<div id="justifyContentLastBaseline"></div>
 <div id="justifyContentSpaceBetweenLeft"></div>
 <div id="justifyContentSpaceAroundCenter"></div>
 <div id="justifyContentSpaceEvenlyRight"></div>
@@ -179,12 +179,6 @@
 test(function() {
     var justifyContentAuto = document.getElementById("justifyContentAuto");
     checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal");
-    var justifyContentBaseline = document.getElementById("justifyContentBaseline");
-    checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "baseline");
-    var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
-    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "baseline");
-    var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
-    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "last baseline");
     var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
     checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between");
     var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
@@ -222,6 +216,12 @@
 }, "Test getting justify-content values previously set through CSS.");
 
 test(function() {
+    var justifyContentBaseline = document.getElementById("justifyContentBaseline");
+    checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "normal");
+    var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
+    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
+    var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
+    checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
     var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
     checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "normal");
     var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
@@ -279,12 +279,6 @@
     element.style.justifyContent = " unsafe right";
     checkValues(element, "justifyContent", "justify-content",  "unsafe right", "unsafe right");
 
-    element.style.justifyContent = "first baseline";
-    checkValues(element, "justifyContent", "justify-content",  "first baseline", "baseline");
-
-    element.style.justifyContent = "last baseline";
-    checkValues(element, "justifyContent", "justify-content",  "last baseline", "last baseline");
-
     element.style.justifyContent = "normal";
     checkValues(element, "justifyContent", "justify-content",  "normal", "normal");
 
@@ -333,6 +327,9 @@
     checkBadValues(element, "justifyContent", "justify-content",  "safe");
     checkBadValues(element, "justifyContent", "justify-content",  "start safe");
     checkBadValues(element, "justifyContent", "justify-content",  "end unsafe");
+    checkBadValues(element, "justifyContent", "justify-content",  "baseline");
+    checkBadValues(element, "justifyContent", "justify-content",  "first baseline");
+    checkBadValues(element, "justifyContent", "justify-content",  "last baseline");
 }, "Test bad combinations of justify-content");
 
 test(function() {
diff --git a/third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html
index 1da453471d163..a2bd3fe979dc5 100644
--- a/third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html
+++ b/third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html
@@ -5,9 +5,6 @@
 #placeContentNormal {
     place-content: normal;
 }
-#placeContentBaseline {
-    place-content: baseline;
-}
 #placeContentStart {
     place-content: start;
 }
@@ -29,8 +26,8 @@
 #placeContentStartSpaceEvenly {
     place-content: start space-evenly;
 }
-#placeContentStartBaseline {
-    place-content: start baseline;
+#placeContentBaselineStart {
+    place-content: baseline start;
 }
 
 <!-- Invalid CSS cases -->
@@ -55,6 +52,12 @@
 #placeContentStartEndLeft {
     place-content: start end left;
 }
+#placeContentBaseline {
+    place-content: baseline;
+}
+#placeContentStartBaseline {
+    place-content: start baseline;
+}
 </style>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
@@ -65,7 +68,6 @@
     <div id="log"></div>
 
     <div id="placeContentNormal"></div>
-    <div id="placeContentBaseline"></div>
     <div id="placeContentStart"></div>
     <div id="placeContentFlexStart"></div>
     <div id="placeContentEnd"></div>
@@ -73,7 +75,7 @@
     <div id="placeContentStretch"></div>
     <div id="placeContentStartEnd"></div>
     <div id="placeContentStartSpaceEvenly"></div>
-    <div id="placeContentStartBaseline"></div>
+    <div id="placeContentBaselineStart"></div>
 
     <div id="placeContentEmpty"></div>
     <div id="placeContentAuto"></div>
@@ -82,6 +84,8 @@
     <div id="placeContentStartSafe"></div>
     <div id="placeContentBaselineSafe"></div>
     <div id="placeContentStartEndLeft"></div>
+    <div id="placeContentBaseline"></div>
+    <div id="placeContentStartBaseline"></div>
 <script>
 function checkPlaceContentValues(element, value, alignValue, justifyValue)
 {
@@ -136,11 +140,6 @@
     checkPlaceContentValues(placeContentNormal, "", "normal", "normal");
 }, "Test getting the Computed Value of place-content's longhand properties when setting 'normal' value through CSS.");
 
-test(function() {
-    checkValues(placeContentBaseline, "placeContent", "place-content", "", "baseline baseline");
-    checkPlaceContentValues(placeContentBaseline, "", "baseline", "baseline");
-}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline' value through CSS.");
-
 test(function() {
     checkValues(placeContentStart, "placeContent", "place-content", "", "start start");
     checkPlaceContentValues(placeContentStart, "", "start", "start");
@@ -177,9 +176,9 @@
 }, "Test getting the Computed Value of place-content's longhand properties when setting 'start space-evenly' value through CSS.");
 
 test(function() {
-    checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "start baseline");
-    checkPlaceContentValues(placeContentStartBaseline, "", "start", "baseline");
-}, "Test getting the Computed Value of place-content's longhand properties when setting 'start baseline' value through CSS.");
+    checkValues(placeContentBaselineStart, "placeContent", "place-content", "", "baseline start");
+    checkPlaceContentValues(placeContentBaselineStart, "", "baseline", "start");
+}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline start' value through CSS.");
 
 test(function() {
     checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal");
@@ -206,11 +205,21 @@
     checkPlaceContentValues(placeContentStartSafe, "", "normal", "normal");
 }, "Test setting 'start safe' as incorrect value through CSS.");
 
+test(function() {
+    checkValues(placeContentBaseline, "placeContent", "place-content", "", "normal normal");
+    checkPlaceContentValues(placeContentBaseline, "", "normal", "normal");
+}, "Test setting 'baseline' as incorrect value through CSS.");
+
 test(function() {
     checkValues(placeContentBaselineSafe, "placeContent", "place-content", "", "normal normal");
     checkPlaceContentValues(placeContentBaselineSafe, "", "normal", "normal");
 }, "Test setting 'baseline safe' as incorrect value through CSS.");
 
+test(function() {
+    checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "normal normal");
+    checkPlaceContentValues(placeContentStartBaseline, "", "normal", "normal");
+}, "Test setting 'start baseline' as incorrect value through CSS.");
+
 test(function() {
     checkValues(placeContentStartEndLeft, "placeContent", "place-content", "", "normal normal");
     checkPlaceContentValues(placeContentStartEndLeft, "", "normal", "normal");
diff --git a/third_party/WebKit/Source/core/css/properties/CSSParsingUtils.cpp b/third_party/WebKit/Source/core/css/properties/CSSParsingUtils.cpp
index b810cc8250d0f..831b0129a9641 100644
--- a/third_party/WebKit/Source/core/css/properties/CSSParsingUtils.cpp
+++ b/third_party/WebKit/Source/core/css/properties/CSSParsingUtils.cpp
@@ -87,32 +87,26 @@ CSSValueID GetBaselineKeyword(CSSValue& value) {
     return CSSValueBaseline;
   }
 
+  DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
+         CSSValueLast);
   DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).Second()).GetValueID() ==
          CSSValueBaseline);
-  if (ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
-      CSSValueLast) {
-    return CSSValueLastBaseline;
-  }
-  DCHECK(ToCSSIdentifierValue(ToCSSValuePair(value).First()).GetValueID() ==
-         CSSValueFirst);
-  return CSSValueFirstBaseline;
+  return CSSValueLastBaseline;
 }
 
 CSSValue* ConsumeBaselineKeyword(CSSParserTokenRange& range) {
-  CSSValueID id = range.Peek().Id();
-  if (CSSPropertyParserHelpers::IdentMatches<CSSValueBaseline>(id))
-    return CSSPropertyParserHelpers::ConsumeIdent(range);
-
-  if (CSSIdentifierValue* preference =
-          CSSPropertyParserHelpers::ConsumeIdent<CSSValueFirst, CSSValueLast>(
-              range)) {
-    if (range.Peek().Id() == CSSValueBaseline) {
-      return CSSValuePair::Create(preference,
-                                  CSSPropertyParserHelpers::ConsumeIdent(range),
-                                  CSSValuePair::kDropIdenticalValues);
-    }
+  CSSIdentifierValue* preference =
+      CSSPropertyParserHelpers::ConsumeIdent<CSSValueFirst, CSSValueLast>(
+          range);
+  CSSIdentifierValue* baseline =
+      CSSPropertyParserHelpers::ConsumeIdent<CSSValueBaseline>(range);
+  if (!baseline)
+    return nullptr;
+  if (preference && preference->GetValueID() == CSSValueLast) {
+    return CSSValuePair::Create(preference, baseline,
+                                CSSValuePair::kDropIdenticalValues);
   }
-  return nullptr;
+  return baseline;
 }
 
 CSSValue* ConsumeSteps(CSSParserTokenRange& range) {
@@ -549,6 +543,7 @@ bool IsContentPositionOrLeftOrRightKeyword(CSSValueID id) {
 CSSValue* ConsumeSelfPositionOverflowPosition(
     CSSParserTokenRange& range,
     IsPositionKeyword is_position_keyword) {
+  DCHECK(is_position_keyword);
   CSSValueID id = range.Peek().Id();
   if (IsAutoOrNormalOrStretch(id))
     return CSSPropertyParserHelpers::ConsumeIdent(range);
@@ -570,6 +565,7 @@ CSSValue* ConsumeSelfPositionOverflowPosition(
 
 CSSValue* ConsumeSimplifiedItemPosition(CSSParserTokenRange& range,
                                         IsPositionKeyword is_position_keyword) {
+  DCHECK(is_position_keyword);
   CSSValueID id = range.Peek().Id();
   if (IsAutoOrNormalOrStretch(id) || is_position_keyword(id))
     return CSSPropertyParserHelpers::ConsumeIdent(range);
@@ -583,6 +579,7 @@ CSSValue* ConsumeSimplifiedItemPosition(CSSParserTokenRange& range,
 CSSValue* ConsumeContentDistributionOverflowPosition(
     CSSParserTokenRange& range,
     IsPositionKeyword is_position_keyword) {
+  DCHECK(is_position_keyword);
   CSSValueID id = range.Peek().Id();
   if (CSSPropertyParserHelpers::IdentMatches<CSSValueNormal>(id)) {
     return CSSContentDistributionValue::Create(
@@ -618,6 +615,7 @@ CSSValue* ConsumeContentDistributionOverflowPosition(
 CSSValue* ConsumeSimplifiedContentPosition(
     CSSParserTokenRange& range,
     IsPositionKeyword is_position_keyword) {
+  DCHECK(is_position_keyword);
   CSSValueID id = range.Peek().Id();
   if (CSSPropertyParserHelpers::IdentMatches<CSSValueNormal>(id) ||
       is_position_keyword(id)) {
@@ -2377,10 +2375,19 @@ bool ConsumePlaceAlignment(CSSParserTokenRange& range,
   DCHECK(!align_value);
   DCHECK(!justify_value);
 
+  bool is_baseline = IsBaselineKeyword(range.Peek().Id());
   align_value = consume_alignment_value(range, IsSelfPositionKeyword);
   if (!align_value)
     return false;
 
+  // justify-content property does not allow the <baseline-position> values.
+  if (consume_alignment_value == ConsumeSimplifiedContentPosition) {
+    if (range.AtEnd() && is_baseline)
+      return false;
+    if (IsBaselineKeyword(range.Peek().Id()))
+      return false;
+  }
+
   justify_value =
       range.AtEnd()
           ? align_value
diff --git a/third_party/WebKit/Source/core/css/properties/longhands/JustifyContentCustom.cpp b/third_party/WebKit/Source/core/css/properties/longhands/JustifyContentCustom.cpp
index d6636b4085185..5230491d76a32 100644
--- a/third_party/WebKit/Source/core/css/properties/longhands/JustifyContentCustom.cpp
+++ b/third_party/WebKit/Source/core/css/properties/longhands/JustifyContentCustom.cpp
@@ -15,6 +15,11 @@ const CSSValue* JustifyContent::ParseSingleValue(
     CSSParserTokenRange& range,
     const CSSParserContext& context,
     const CSSParserLocalContext&) const {
+  // justify-content property does not allow the <baseline-position> values.
+  if (CSSPropertyParserHelpers::IdentMatches<CSSValueFirst, CSSValueLast,
+                                             CSSValueBaseline>(
+          range.Peek().Id()))
+    return nullptr;
   return CSSParsingUtils::ConsumeContentDistributionOverflowPosition(
       range, CSSParsingUtils::IsContentPositionOrLeftOrRightKeyword);
 }