[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.

w3c/csswg-drafts#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 pasring logic of the
place-content shorthand.

Additionally, this CL updates the computed value of the
<baseline-position> values, which now has always either 'first' or
'last' modifier to determine the baseline precedence.

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

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>

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>

css/css-align/content-distribution/parse-justify-content-001.html

@@ -16,18 +16,15 @@
 <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];
         element = document.createElement("div");
         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>

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>

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() {

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() {

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() {

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%")

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);
         }
     }

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>

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>

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>

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>

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);

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);

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)

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);
         }
     }

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],

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>

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>

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>

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>

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,

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,