Skip to content

Commit a4f05cb

Browse files
javifernandezchromium-wpt-export-bot
javifernandez
authored and
chromium-wpt-export-bot
committedJan 23, 2018
[css-align] The 'left' and 'right' values must be invalid in block axis
The CSS WG resolved to remove the 'left' and 'right' values from the block/cross axis alignment properties. w3c/csswg-drafts#1403 This CL changes the CSS parsing logic of all the CSS Box Alignment properties, both block-axis (align-{self, items, content} and inline-axis (justify-{self, items, content}). Additionally, the alignment shorthands (place-{self, items, content}) have been also changed to respect the new syntax. This change also affects the Grid Layout alignment logic. Bug: 802095 Change-Id: Id848ce22a9b2d69ecf2bfd58503f590e4b2fe4db Reviewed-on: https://chromium-review.googlesource.com/877519 Reviewed-by: meade_(do not use) <meade@chromium.org> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#531074}
1 parent ca5f14e commit a4f05cb

32 files changed

+141
-106
lines changed
 

Diff for: ‎css/css-align/content-distribution/parse-align-content-002.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@
2929

3030
test(function() {
3131
container.style.display = "grid";
32-
checkInitialValues(element, "alignContent", "align-content", "safe left", "normal");
32+
checkInitialValues(element, "alignContent", "align-content", "safe start", "normal");
3333
}, "Test grid items align-content: 'initial'");
3434

3535
test(function() {
3636
container.style.display = "flex";
37-
checkInitialValues(element, "alignContent", "align-content", "unsafe right", "normal");
37+
checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal");
3838
}, "Test flex items align-content: 'initial'");
3939

4040
test(function() {
4141
container.style.display = "";
4242
element.style.position = "absolute";
43-
checkInitialValues(element, "alignContent", "align-content", "left", "normal");
43+
checkInitialValues(element, "alignContent", "align-content", "start", "normal");
4444
}, "Test absolute positioned elements align-content: 'initial'");
4545

4646
test(function() {
4747
container.style.display = "grid";
4848
element.style.position = "absolute";
49-
checkInitialValues(element, "alignContent", "align-content", "right", "normal");
49+
checkInitialValues(element, "alignContent", "align-content", "end", "normal");
5050
}, "Test absolute positioned grid items align-content: 'initial'");
5151

5252
test(function() {

Diff for: ‎css/css-align/content-distribution/parse-align-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", "left", "safe right"].concat(invalidPositionValues, invalidDistributionValues);
1717

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

Diff for: ‎css/css-align/content-distribution/parse-align-content-005.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
checkInheritValues("alignContent", "align-content", "end");
1515
}, "Test the value 'inherit' overrides current value ('end')");
1616
test(function() {
17-
checkInheritValues("alignContent", "align-content", "safe left");
18-
}, "Test the value 'inherit' overrides current value ('safe left')");
17+
checkInheritValues("alignContent", "align-content", "safe start");
18+
}, "Test the value 'inherit' overrides current value ('safe start')");
1919
test(function() {
2020
checkInheritValues("alignContent", "align-content", "unsafe center");
2121
}, "Test the value 'inherit' overrides current value ('unsafe center')");

Diff for: ‎css/css-align/content-distribution/parse-justify-content-001.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
1616
<div id="log"></div>
1717
<script>
18-
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses,
19-
baselineClasses, overflowClasses);
18+
let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses,
19+
distributionClasses, baselineClasses, overflowClasses);
2020

2121
for (var key in classes) {
2222
let specifiedValue = classes[key];

Diff for: ‎css/css-align/content-distribution/parse-justify-content-002.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@
2929

3030
test(function() {
3131
container.style.display = "grid";
32-
checkInitialValues(element, "justifyContent", "justify-content", "safe left", "normal");
32+
checkInitialValues(element, "justifyContent", "justify-content", "safe start", "normal");
3333
}, "Test grid items justify-content: 'initial'");
3434

3535
test(function() {
3636
container.style.display = "flex";
37-
checkInitialValues(element, "justifyContent", "justify-content", "unsafe right", "normal");
37+
checkInitialValues(element, "justifyContent", "justify-content", "unsafe end", "normal");
3838
}, "Test flex items justify-content: 'initial'");
3939

4040
test(function() {
4141
container.style.display = "";
4242
element.style.position = "absolute";
43-
checkInitialValues(element, "justifyContent", "justify-content", "left", "normal");
43+
checkInitialValues(element, "justifyContent", "justify-content", "start", "normal");
4444
}, "Test absolute positioned elements justify-content: 'initial'");
4545

4646
test(function() {
4747
container.style.display = "grid";
4848
element.style.position = "absolute";
49-
checkInitialValues(element, "justifyContent", "justify-content", "right", "normal");
49+
checkInitialValues(element, "justifyContent", "justify-content", "end", "normal");
5050
}, "Test absolute positioned grid items justify-content: 'initial'");
5151

5252
test(function() {

Diff for: ‎css/css-align/content-distribution/parse-justify-content-003.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
element = document.createElement("div");
1818
document.body.appendChild(element);
1919

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

2323
for (var key in classes) {
2424
let specifiedValue = classes[key];

Diff for: ‎css/css-align/content-distribution/place-content-shorthand-001.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88
<script src="../resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
12-
values.forEach(function(value) {
11+
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
12+
for (var key in classes) {
13+
let value = classes[key];
1314
test(function() {
1415
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", value);
1516
}, "Checking place-content: " + value);
16-
});
17+
}
1718
</script>

Diff for: ‎css/css-align/content-distribution/place-content-shorthand-002.html

+11-8
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@
88
<script src="../resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
12-
values.forEach(function(alignValue) {
13-
values.forEach(function(justifyValue) {
14-
test(function() {
15-
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue);
16-
}, "Checking place-content: " + alignValue + " " + justifyValue);
17-
});
18-
});
11+
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
12+
for (var key1 in classes) {
13+
let alignValue = classes[key1];
14+
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
15+
for (var key2 in classes2) {
16+
let justifyValue = classes2[key2];
17+
test(function() {
18+
checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue);
19+
}, "Checking place-content: " + alignValue + " " + justifyValue);
20+
}
21+
}
1922
</script>

Diff for: ‎css/css-align/content-distribution/place-content-shorthand-004.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,30 @@
1414
}
1515

1616
test(function() {
17-
checkInvalidValues("center safe")
18-
checkInvalidValues("true center")
17+
checkInvalidValues("safe center")
18+
checkInvalidValues("unsafe center")
1919
}, "Verify overflow keywords are invalid");
2020

2121
test(function() {
2222
checkInvalidValues("center space-between start")
2323
}, "Verify fallback values are invalid");
2424

2525
test(function() {
26-
checkInvalidValues("10px left")
27-
checkInvalidValues("right 10%")
26+
checkInvalidValues("left")
27+
checkInvalidValues("left start")
28+
checkInvalidValues("right center")
29+
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
30+
31+
test(function() {
32+
checkInvalidValues("10px end")
33+
checkInvalidValues("start 10%")
2834
}, "Verify numeric values are invalid");
2935

3036
test(function() {
3137
checkInvalidValues("auto")
3238
checkInvalidValues("auto right")
3339
checkInvalidValues("auto auto")
34-
checkInvalidValues("left auto")
40+
checkInvalidValues("start auto")
3541
}, "Verify 'auto' values are invalid");
3642

3743
test(function() {

Diff for: ‎css/css-align/content-distribution/place-content-shorthand-006.html

+8-5
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@
99
<div id="log"></div>
1010
<div id="test"></div>
1111
<script>
12-
var values = ["normal"].concat(contentPositionValues, distributionValues, baselineValues);
13-
values.forEach(function(alignValue) {
14-
[""].concat(values).forEach(function(justifyValue) {
12+
let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses);
13+
for (var key1 in classes) {
14+
let alignValue = classes[key1];
15+
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
16+
for (var key2 in classes2) {
17+
let justifyValue = classes2[key2];
1518
var value = (alignValue + " " + justifyValue).trim();
1619
test(function() {
1720
checkPlaceShorhand("place-content", alignValue, justifyValue)
1821
}, "Checking place-content: " + value);
19-
});
20-
});
22+
}
23+
}
2124
</script>

Diff for: ‎css/css-align/default-alignment/parse-align-items-002.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@
2929

3030
test(function() {
3131
container.style.display = "grid";
32-
checkInitialValues(element, "alignItems", "align-items", "safe left", "normal");
32+
checkInitialValues(element, "alignItems", "align-items", "safe start", "normal");
3333
}, "Test grid items align-items: 'initial'");
3434

3535
test(function() {
3636
container.style.display = "flex";
37-
checkInitialValues(element, "alignItems", "align-items", "unsafe right", "normal");
37+
checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal");
3838
}, "Test flex items align-items: 'initial'");
3939

4040
test(function() {
4141
container.style.display = "";
4242
element.style.position = "absolute";
43-
checkInitialValues(element, "alignItems", "align-items", "left", "normal");
43+
checkInitialValues(element, "alignItems", "align-items", "start", "normal");
4444
}, "Test absolute positioned elements align-items: 'initial'");
4545

4646
test(function() {
4747
container.style.display = "grid";
4848
element.style.position = "absolute";
49-
checkInitialValues(element, "alignItems", "align-items", "right", "normal");
49+
checkInitialValues(element, "alignItems", "align-items", "end", "normal");
5050
}, "Test absolute positioned grid items align-items: 'initial'");
5151

5252
test(function() {

Diff for: ‎css/css-align/default-alignment/parse-align-items-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", "space-around"].concat(invalidPositionValues);
16+
let values = ["auto", "legacy", "space-around", "left", "safe right"].concat(invalidPositionValues);
1717

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

Diff for: ‎css/css-align/default-alignment/parse-align-items-005.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
checkInheritValues("alignItems", "align-items", "end");
1515
}, "Test the value 'inherit' overrides current value ('end')");
1616
test(function() {
17-
checkInheritValues("alignItems", "align-items", "safe left");
18-
}, "Test the value 'inherit' overrides current value ('safe left')");
17+
checkInheritValues("alignItems", "align-items", "safe start");
18+
}, "Test the value 'inherit' overrides current value ('safe start')");
1919
test(function() {
2020
checkInheritValues("alignItems", "align-items", "unsafe center");
2121
}, "Test the value 'inherit' overrides current value ('unsafe center')");

Diff for: ‎css/css-align/default-alignment/parse-justify-items-001.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script src="/css/css-align/resources/alignment-parsing-utils.js"></script>
1515
<div id="log"></div>
1616
<script>
17-
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"},
17+
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"},
1818
selfPositionClasses, baselineClasses, overflowClasses);
1919

2020
for (var key in classes) {

Diff for: ‎css/css-align/default-alignment/parse-justify-items-002.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@
2929

3030
test(function() {
3131
container.style.display = "grid";
32-
checkInitialValues(element, "justifyItems", "justify-items", "safe left", "legacy");
32+
checkInitialValues(element, "justifyItems", "justify-items", "safe start", "legacy");
3333
}, "Test grid items justify-items: 'initial'");
3434

3535
test(function() {
3636
container.style.display = "flex";
37-
checkInitialValues(element, "justifyItems", "justify-items", "unsafe right", "legacy");
37+
checkInitialValues(element, "justifyItems", "justify-items", "unsafe end", "legacy");
3838
}, "Test flex items justify-items: 'initial'");
3939

4040
test(function() {
4141
container.style.display = "";
4242
element.style.position = "absolute";
43-
checkInitialValues(element, "justifyItems", "justify-items", "left", "legacy");
43+
checkInitialValues(element, "justifyItems", "justify-items", "start", "legacy");
4444
}, "Test absolute positioned elements justify-items: 'initial'");
4545

4646
test(function() {
4747
container.style.display = "grid";
4848
element.style.position = "absolute";
49-
checkInitialValues(element, "justifyItems", "justify-items", "right", "legacy");
49+
checkInitialValues(element, "justifyItems", "justify-items", "end", "legacy");
5050
}, "Test absolute positioned grid items justify-items: 'initial'");
5151

5252
test(function() {

Diff for: ‎css/css-align/default-alignment/parse-justify-items-003.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
element = document.createElement("div");
1717
document.body.appendChild(element);
1818

19-
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses,
20-
baselineClasses, overflowClasses, legacyValues);
19+
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch", "Left":"left", "Right":"right"},
20+
selfPositionClasses, baselineClasses, overflowClasses);
2121

2222
for (var key in classes) {
2323
let specifiedValue = classes[key];

Diff for: ‎css/css-align/default-alignment/parse-justify-items-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", "space-around"].concat(invalidPositionValues, invalidLEgacyValues);
16+
let values = ["auto", "space-around"].concat(invalidPositionValues, invalidLegacyValues);
1717

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

Diff for: ‎css/css-align/default-alignment/place-items-shorthand-001.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88
<script src="../resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
12-
values.forEach(function(value) {
11+
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
12+
for (var key in classes) {
13+
let value = classes[key];
1314
test(function() {
1415
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", value);
1516
}, "Checking place-items: " + value);
16-
});
17+
}
1718
</script>

Diff for: ‎css/css-align/default-alignment/place-items-shorthand-002.html

+8-5
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@
88
<script src="../resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
12-
values.forEach(function(alignValue) {
13-
["auto"].concat(values).forEach(function(justifyValue) {
11+
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
12+
for (var key1 in classes) {
13+
let alignValue = classes[key1];
14+
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
15+
for (var key2 in classes2) {
16+
let justifyValue = classes2[key2];
1417
test(function() {
1518
checkPlaceShorhandLonghands("place-items", "align-items", "justify-items", alignValue, justifyValue);
1619
}, "Checking place-items: " + alignValue + " " + justifyValue);
17-
});
18-
});
20+
}
21+
}
1922
</script>

Diff for: ‎css/css-align/default-alignment/place-items-shorthand-004.html

+8-2
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,20 @@
1414
}
1515

1616
test(function() {
17-
checkInvalidValues("center safe")
18-
checkInvalidValues("true center")
17+
checkInvalidValues("safe center")
18+
checkInvalidValues("unsafe center")
1919
}, "Verify overflow keywords are invalid");
2020

2121
test(function() {
2222
checkInvalidValues("center space-between start")
2323
}, "Verify fallback values are invalid");
2424

25+
test(function() {
26+
checkInvalidValues("left")
27+
checkInvalidValues("left start")
28+
checkInvalidValues("right center")
29+
}, "Verify 'left' and 'right' values are invalid for block/cross axis alignment");
30+
2531
test(function() {
2632
checkInvalidValues("10px left")
2733
checkInvalidValues("right 10%")

Diff for: ‎css/css-align/default-alignment/place-items-shorthand-006.html

+8-5
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@
88
<script src="../resources/alignment-parsing-utils.js"></script>
99
<div id="log"></div>
1010
<script>
11-
var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
12-
values.forEach(function(alignValue) {
13-
[""].concat(values).forEach(function(justifyValue) {
11+
let classes = Object.assign({"Normal":"normal", "Stretch":"stretch"}, selfPositionClasses, baselineClasses);
12+
for (var key1 in classes) {
13+
let alignValue = classes[key1];
14+
let classes2 = Object.assign({"Left":"left", "Right":"right"}, classes);
15+
for (var key2 in classes2) {
16+
let justifyValue = classes2[key2];
1417
var value = (alignValue + " " + justifyValue).trim();
1518
test(function() {
1619
checkPlaceShorhand("place-items", alignValue, justifyValue)
1720
}, "Checking place-items: " + value);
18-
});
19-
});
21+
}
22+
}
2023
</script>

0 commit comments

Comments
 (0)