Skip to content
This repository was archived by the owner on Jul 18, 2018. It is now read-only.

Commit 948b8de

Browse files
javifernandezCommit Bot
javifernandez
authored and
Commit Bot
committed
[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 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}
1 parent 6e19c26 commit 948b8de

32 files changed

+175
-156
lines changed

Diff for: ‎third_party/WebKit/LayoutTests/TestExpectations

-12
Original file line numberDiff line numberDiff line change
@@ -2358,18 +2358,6 @@ crbug.com/707359 [ Mac ] fast/css-grid-layout/grid-self-baseline-vertical-rl-05.
23582358
# [css-align]
23592359
crbug.com/726148 external/wpt/css/css-align/default-alignment/parse-justify-items-002.html [ Failure ]
23602360
crbug.com/726147 external/wpt/css/css-align/default-alignment/parse-justify-items-004.html [ Failure ]
2361-
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-001.html [ Failure ]
2362-
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-justify-items-003.html [ Failure ]
2363-
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-001.html [ Failure ]
2364-
crbug.com/803275 external/wpt/css/css-align/default-alignment/parse-align-items-003.html [ Failure ]
2365-
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-001.html [ Failure ]
2366-
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-justify-self-003.html [ Failure ]
2367-
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-001.html [ Failure ]
2368-
crbug.com/803275 external/wpt/css/css-align/self-alignment/parse-align-self-003.html [ Failure ]
2369-
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-001.html [ Failure ]
2370-
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-justify-content-003.html [ Failure ]
2371-
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-001.html [ Failure ]
2372-
crbug.com/803275 external/wpt/css/css-align/content-distribution/parse-align-content-003.html [ Failure ]
23732361

23742362
# [selectors-4]
23752363
crbug.com/706118 external/wpt/css/selectors/focus-within-004.html [ Failure ]

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-001.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
element.className = "alignContent" + key;
2525
document.body.appendChild(element);
2626
test(function() {
27-
let computedValue = specifiedValue;
28-
if (specifiedValue === "baseline")
29-
computedValue = "first baseline";
30-
checkValues(element, "alignContent", "align-content", "", computedValue);
27+
if (specifiedValue === "first baseline")
28+
checkValues(element, "alignContent", "align-content", "", "baseline");
29+
else
30+
checkValues(element, "alignContent", "align-content", "", specifiedValue);
3131
}, "Checking align-content: " + specifiedValue);
3232
}
3333
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-align-content-003.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@
2323
for (var key in classes) {
2424
let specifiedValue = classes[key];
2525
test(function() {
26+
element.style.alignContent = "";
2627
element.style.alignContent = specifiedValue;
27-
let computedValue = specifiedValue;
28-
if (specifiedValue === "baseline")
29-
computedValue = "first baseline";
30-
checkValues(element, "alignContent", "align-content", specifiedValue, computedValue);
28+
if (specifiedValue === "first baseline")
29+
checkValues(element, "alignContent", "align-content", "baseline", "baseline");
30+
else
31+
checkValues(element, "alignContent", "align-content", specifiedValue, specifiedValue);
3132
}, "Checking align-content: " + specifiedValue);
3233
}
3334
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-001.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,15 @@
1616
<div id="log"></div>
1717
<script>
1818
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
19-
distributionClasses, baselineClasses, overflowClasses);
19+
distributionClasses, overflowClasses);
2020

2121
for (var key in classes) {
2222
let specifiedValue = classes[key];
2323
element = document.createElement("div");
2424
element.className = "justifyContent" + key;
2525
document.body.appendChild(element);
2626
test(function() {
27-
let computedValue = specifiedValue;
28-
if (specifiedValue === "baseline")
29-
computedValue = "first baseline";
30-
checkValues(element, "justifyContent", "justify-content", "", computedValue);
27+
checkValues(element, "justifyContent", "justify-content", "", specifiedValue);
3128
}, "Checking justify-content: " + specifiedValue);
3229
}
3330
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-003.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,14 @@
1818
document.body.appendChild(element);
1919

2020
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
21-
distributionClasses, baselineClasses, overflowClasses);
21+
distributionClasses, overflowClasses);
2222

2323
for (var key in classes) {
2424
let specifiedValue = classes[key];
2525
test(function() {
26+
element.style.justifyContent = "";
2627
element.style.justifyContent = specifiedValue;
27-
let computedValue = specifiedValue;
28-
if (specifiedValue === "baseline")
29-
computedValue = "first baseline";
30-
checkValues(element, "justifyContent", "justify-content", specifiedValue, computedValue);
28+
checkValues(element, "justifyContent", "justify-content", specifiedValue, specifiedValue);
3129
}, "Checking justify-content: " + specifiedValue);
3230
}
3331
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/parse-justify-content-004.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
element = document.createElement("div");
1414
document.body.appendChild(element);
1515

16-
let values = ["auto", "legacy", "self-start"].concat(invalidPositionValues, invalidDistributionValues);
16+
let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues);
1717

1818
values.forEach(function(value) {
1919
test(function() {

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-001.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<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'." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
11+
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses);
1212
for (var key in classes) {
1313
let value = classes[key];
1414
test(function() {

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-002.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<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'." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
1212
for (var key1 in classes) {
1313
let alignValue = classes[key1];
14-
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
14+
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
1515
for (var key2 in classes2) {
1616
let justifyValue = classes2[key2];
1717
test(function() {

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-004.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
function checkInvalidValues(value)
@@ -28,6 +28,13 @@
2828
checkInvalidValues("right center")
2929
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
3030

31+
test(function() {
32+
checkInvalidValues("baseline")
33+
checkInvalidValues("first baseline")
34+
checkInvalidValues("start baseline")
35+
checkInvalidValues("end last baseline")
36+
}, "Verify <baseline-position> values are invalid for the justify-content property");
37+
3138
test(function() {
3239
checkInvalidValues("10px end")
3340
checkInvalidValues("start 10%")

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/content-distribution/place-content-shorthand-006.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@
55
<meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<div id="test"></div>
1111
<script>
1212
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
1313
for (var key1 in classes) {
1414
let alignValue = classes[key1];
15-
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
15+
let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses);
1616
for (var key2 in classes2) {
1717
let justifyValue = classes2[key2];
1818
var value = (alignValue + " " + justifyValue).trim();
1919
test(function() {
20-
checkPlaceShorhand("place-content", alignValue, justifyValue)
20+
checkPlaceShorhand("place-content", value, alignValue, justifyValue)
2121
}, "Checking place-content: " + value);
2222
}
2323
}

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-001.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
element.className = "alignItems" + key;
2424
document.body.appendChild(element);
2525
test(function() {
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "alignItems", "align-items", "", computedValue);
26+
if (specifiedValue === "first baseline")
27+
checkValues(element, "alignItems", "align-items", "", "baseline");
28+
else
29+
checkValues(element, "alignItems", "align-items", "", specifiedValue);
3030
}, "Checking align-items: " + specifiedValue);
3131
}
3232
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-align-items-003.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@
2222
for (var key in classes) {
2323
let specifiedValue = classes[key];
2424
test(function() {
25+
element.style.alignItems = "";
2526
element.style.alignItems = specifiedValue;
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "alignItems", "align-items", specifiedValue, computedValue);
27+
if (specifiedValue === "first baseline")
28+
checkValues(element, "alignItems", "align-items", "baseline", "baseline");
29+
else
30+
checkValues(element, "alignItems", "align-items", specifiedValue, specifiedValue);
3031
}, "Checking align-items: " + specifiedValue);
3132
}
3233
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-001.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
element.className = "justifyItems" + key;
2424
document.body.appendChild(element);
2525
test(function() {
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "justifyItems", "justify-items", "", computedValue);
26+
if (specifiedValue === "first baseline")
27+
checkValues(element, "justifyItems", "justify-items", "", "baseline");
28+
else
29+
checkValues(element, "justifyItems", "justify-items", "", specifiedValue);
3030
}, "Checking justify-items: " + specifiedValue);
3131
}
3232
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/parse-justify-items-003.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@
2222
for (var key in classes) {
2323
let specifiedValue = classes[key];
2424
test(function() {
25+
element.style.justifyItems = "";
2526
element.style.justifyItems = specifiedValue;
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "justifyItems", "justify-items", specifiedValue, computedValue);
27+
if (specifiedValue === "first baseline")
28+
checkValues(element, "justifyItems", "justify-items", "baseline", "baseline");
29+
else
30+
checkValues(element, "justifyItems", "justify-items", specifiedValue, specifiedValue);
3031
}, "Checking justify-items: " + specifiedValue);
3132
}
3233
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-001.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<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'." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-002.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<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'." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-004.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="assert" content="Check that place-items's invalid values are properly detected at parsing time." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
function checkInvalidValues(value)

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/default-alignment/place-items-shorthand-006.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="assert" content="Check the place-items's 'specified' and 'resolved' values serialization." />
66
<script src="/resources/testharness.js"></script>
77
<script src="/resources/testharnessreport.js"></script>
8-
<script src="../resources/alignment-parsing-utils.js"></script>
8+
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
1111
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
@@ -16,7 +16,7 @@
1616
let justifyValue = classes2[key2];
1717
var value = (alignValue + " " + justifyValue).trim();
1818
test(function() {
19-
checkPlaceShorhand("place-items", alignValue, justifyValue)
19+
checkPlaceShorhand("place-items", value, alignValue, justifyValue)
2020
}, "Checking place-items: " + value);
2121
}
2222
}

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/resources/alignment-parsing-utils.js

+14-9
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,27 @@ var invalidDistributionValues = ["space-between left", "space-around center", "s
1717
"space-between safe", "space-between stretch", "stretch start",
1818
"stretch baseline", "first baseline space-around"];
1919

20-
function checkPlaceShorhand(shorthand, alignValue, justifyValue)
20+
function checkPlaceShorhand(shorthand, shorthandValue, alignValue, justifyValue)
2121
{
2222
var div = document.createElement("div");
23-
var specifiedValue = (alignValue + " " + justifyValue).trim();
24-
div.style[shorthand] = specifiedValue;
23+
div.style[shorthand] = shorthandValue;
2524
document.body.appendChild(div);
2625

27-
if (alignValue === justifyValue)
28-
specifiedValue = alignValue;
29-
30-
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
3126
if (alignValue === "first baseline")
3227
alignValue = "baseline";
3328
if (justifyValue === "first baseline")
3429
justifyValue = "baseline";
3530
if (justifyValue === "")
3631
justifyValue = alignValue;
37-
var expectedResolvedValue = (alignValue + " " + justifyValue).trim()
3832

39-
assert_equals(div.style[shorthand], specifiedValue, shorthand + " specified value");
33+
let specifiedValue = (alignValue + " " + justifyValue).trim();
34+
if (alignValue === justifyValue)
35+
specifiedValue = alignValue;
36+
37+
var resolvedValue = getComputedStyle(div).getPropertyValue(shorthand);
38+
var expectedResolvedValue = (alignValue + " " + justifyValue).trim();
39+
40+
assert_equals(div.style[shorthand], specifiedValue, shorthandValue + " specified value");
4041
// FIXME: We need https://github.com/w3c/csswg-drafts/issues/1041 to clarify which
4142
// value is expected for the shorthand's 'resolved value".
4243
assert_in_array(resolvedValue, ["", expectedResolvedValue], shorthand + " resolved value");
@@ -47,6 +48,10 @@ function checkPlaceShorhandLonghands(shorthand, alignLonghand, justifyLonghand,
4748
var div = document.createElement("div");
4849
div.setAttribute("style", shorthand + ": " + alignValue + " " + justifyValue);
4950
document.body.appendChild(div);
51+
if (alignValue === "first baseline")
52+
alignValue = "baseline";
53+
if (justifyValue === "first baseline")
54+
justifyValue = "baseline";
5055
if (justifyValue === "")
5156
justifyValue = alignValue;
5257
assert_equals(div.style[alignLonghand],

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-001.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
element.className = "alignSelf" + key;
2424
document.body.appendChild(element);
2525
test(function() {
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "alignSelf", "align-self", "", computedValue);
26+
if (specifiedValue === "first baseline")
27+
checkValues(element, "alignSelf", "align-self", "", "baseline");
28+
else
29+
checkValues(element, "alignSelf", "align-self", "", specifiedValue);
3030
}, "Checking align-self: " + specifiedValue);
3131
}
3232
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-align-self-003.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@
2222
for (var key in classes) {
2323
let specifiedValue = classes[key];
2424
test(function() {
25+
element.style.alignSelf = "";
2526
element.style.alignSelf = specifiedValue;
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "alignSelf", "align-self", specifiedValue, computedValue);
27+
if (specifiedValue === "first baseline")
28+
checkValues(element, "alignSelf", "align-self", "baseline", "baseline");
29+
else
30+
checkValues(element, "alignSelf", "align-self", specifiedValue, specifiedValue);
3031
}, "Checking align-self: " + specifiedValue);
3132
}
3233
</script>

Diff for: ‎third_party/WebKit/LayoutTests/external/wpt/css/css-align/self-alignment/parse-justify-self-001.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@
2323
element.className = "justifySelf" + key;
2424
document.body.appendChild(element);
2525
test(function() {
26-
let computedValue = specifiedValue;
27-
if (specifiedValue === "baseline")
28-
computedValue = "first baseline";
29-
checkValues(element, "justifySelf", "justify-self", "", computedValue);
26+
let value = specifiedValue;
27+
if (specifiedValue === "first baseline")
28+
checkValues(element, "justifySelf", "justify-self", "", "baseline");
29+
else
30+
checkValues(element, "justifySelf", "justify-self", "", value);
3031
}, "Checking justify-self: " + specifiedValue);
3132
}
3233
</script>

0 commit comments

Comments
 (0)