Skip to content
This repository was archived by the owner on Jun 24, 2022. It is now read-only.

Commit e1874dc

Browse files
author
[email protected]
committed
[css-align] 'overflow' keyword must precede the self-position and content-position value
https://bugs.webkit.org/show_bug.cgi?id=181793 Reviewed by Antti Koivisto. Source/WebCore: There were several discussions to avoid ambiguities with the complex values, specially when it comes to define the place-xxx shorthands. One of the sources of problems is the 'overflow-position' keyword. The CSS WG has decided to change the syntax of all the CSS Box Alignment properties so that the 'overflow-position' keyword always precede the 'self-position' or the 'content-position' keywords. w3c/csswg-drafts#1446 (comment) In order to apply this change to the Content Distribution properties' (align-content and justify-content) syntax I had to completely re-implement their parsing function. Thanks to this I addressed also the issue with the content-distribution fallback, which cannot be specified explicitly now. w3c/csswg-drafts#1002 (reference) No new tests, just rebaselined the expected results of the test cases affected. Despite the so many layout tests affected by this change, it's unlikely that it might break any content in current web sites. This patch changes the new CSS syntax, obviously backward compatible, defined by the new CSS Box Alignment. The 'overflow-position' keyword is only used by the layout models implementing the new spec, so far only CSS Grid Layout. Considering that CSS Grid has been shipped last year, it's unlikely that many sites are using the new CSS values. * css/CSSComputedStyleDeclaration.cpp: (WebCore::valueForItemPositionWithOverflowAlignment): (WebCore::valueForContentPositionAndDistributionWithOverflowAlignment): * css/CSSContentDistributionValue.cpp: (WebCore::CSSContentDistributionValue::customCSSText const): * css/StyleBuilderConverter.h: (WebCore::StyleBuilderConverter::convertSelfOrDefaultAlignmentData): * css/parser/CSSPropertyParser.cpp: (WebCore::consumeOverflowPositionKeyword): (WebCore::consumeContentPositionKeyword): (WebCore::consumeContentDistributionOverflowPosition): (WebCore::consumeSelfPositionOverflowPosition): LayoutTests: Rebaseline expected results of the test cases affected by this change. * css3/parse-align-content.html: * css3/parse-align-items.html: * css3/parse-align-self.html: * css3/parse-justify-content.html: * css3/overwrite-self-alignment.html: * css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html: * css3/overwrite-content-alignment.html: * fast/css-grid-layout/grid-content-alignment-overflow.html: * fast/css-grid-layout/grid-align-justify-overflow.html: * fast/css/parse-justify-items.html: * fast/css/parse-justify-self.html: * fast/repaint/align-items-overflow-change.html: * fast/repaint/align-self-overflow-change.html: * fast/repaint/justify-items-overflow-change.html: * fast/repaint/justify-self-overflow-change.html: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@227297 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent bb54705 commit e1874dc

22 files changed

+550
-379
lines changed

‎LayoutTests/ChangeLog

+25
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
2018-01-22 Javier Fernandez <[email protected]>
2+
3+
[css-align] 'overflow' keyword must precede the self-position and content-position value
4+
https://bugs.webkit.org/show_bug.cgi?id=181793
5+
6+
Reviewed by Antti Koivisto.
7+
8+
Rebaseline expected results of the test cases affected by this change.
9+
10+
* css3/parse-align-content.html:
11+
* css3/parse-align-items.html:
12+
* css3/parse-align-self.html:
13+
* css3/parse-justify-content.html:
14+
* css3/overwrite-self-alignment.html:
15+
* css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html:
16+
* css3/overwrite-content-alignment.html:
17+
* fast/css-grid-layout/grid-content-alignment-overflow.html:
18+
* fast/css-grid-layout/grid-align-justify-overflow.html:
19+
* fast/css/parse-justify-items.html:
20+
* fast/css/parse-justify-self.html:
21+
* fast/repaint/align-items-overflow-change.html:
22+
* fast/repaint/align-self-overflow-change.html:
23+
* fast/repaint/justify-items-overflow-change.html:
24+
* fast/repaint/justify-self-overflow-change.html:
25+
126
2018-01-19 Per Arne Vollan <[email protected]>
227

328
Mark svg/filters/fePointLight-color.svg as failure on Windows.

‎LayoutTests/css3/flexbox/new-alignment-values-invalid-if-grid-not-enabled.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343

4444
item.style.webkitAlignSelf = "flex-start";
4545

46-
checkAlignSelfValue("start unsafe", "start unsafe", gridEnabled)
46+
checkAlignSelfValue("unsafe start", "unsafe start", gridEnabled)
4747
checkAlignSelfValue("start", "start", gridEnabled)
4848
checkAlignSelfValue("end", "end", gridEnabled)
49-
checkAlignSelfValue("flex-start safe", "flex-start safe", gridEnabled)
49+
checkAlignSelfValue("safe flex-start", "safe flex-start", gridEnabled)
5050
checkAlignSelfValue("self-start", "self-start", gridEnabled)
5151
checkAlignSelfValue("self-end", "self-end", gridEnabled)
5252
}
@@ -59,10 +59,10 @@
5959
container.style.webkitAlignItems = "flex-end";
6060
item.style.webkitAlignSelf = "auto";
6161

62-
checkAlignItemsValue("start unsafe", "start unsafe", gridEnabled)
62+
checkAlignItemsValue("unsafe start", "unsafe start", gridEnabled)
6363
checkAlignItemsValue("start", "start", gridEnabled)
6464
checkAlignItemsValue("end", "end", gridEnabled)
65-
checkAlignItemsValue("flex-start safe", "flex-start safe", gridEnabled)
65+
checkAlignItemsValue("safe flex-start", "safe flex-start", gridEnabled)
6666
checkAlignItemsValue("self-start", "self-start", gridEnabled)
6767
checkAlignItemsValue("self-end", "self-end", gridEnabled)
6868
}

‎LayoutTests/css3/overwrite-content-alignment-expected.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ Test overwriting justify-content and align-content works as expected
33
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
44

55

6-
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content') is "flex-end unsafe"
7-
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content') is "center safe"
6+
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content') is "unsafe flex-end"
7+
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content') is "safe center"
88
PASS getComputedStyle(childOfParentId, '').getPropertyValue('justify-content') is "space-between"
99
PASS getComputedStyle(childOfParentId, '').getPropertyValue('align-content') is "space-around"
1010
PASS successfullyParsed is true

‎LayoutTests/css3/overwrite-content-alignment.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
}
66
.parent .child {
77
display: -webkit-flex;
8-
justify-content: flex-end unsafe;
9-
align-content: center safe;
8+
justify-content: unsafe flex-end;
9+
align-content: safe center;
1010
}
1111
#parentId .child {
1212
justify-content: space-between;
@@ -25,8 +25,8 @@
2525
description('Test overwriting justify-content and align-content works as expected');
2626

2727
var childOfDefaultParent = document.getElementById("childOfDefaultParent");
28-
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content')", "flex-end unsafe");
29-
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content')", "center safe");
28+
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content')", "unsafe flex-end");
29+
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content')", "safe center");
3030

3131
var childOfParentId = document.getElementById("childOfParentId");
3232
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-content')", "space-between");

‎LayoutTests/css3/overwrite-self-alignment-expected.txt

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
55

66
PASS getComputedStyle(parent, '').getPropertyValue('justify-items') is "center"
77
PASS getComputedStyle(parent, '').getPropertyValue('align-items') is "stretch"
8-
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self') is "flex-end unsafe"
9-
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self') is "flex-start safe"
8+
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self') is "unsafe flex-end"
9+
PASS getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self') is "safe flex-start"
1010
PASS getComputedStyle(childOfParentId, '').getPropertyValue('justify-self') is "center"
1111
PASS getComputedStyle(childOfParentId, '').getPropertyValue('align-self') is "stretch"
1212
PASS successfullyParsed is true

‎LayoutTests/css3/overwrite-self-alignment.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<style>
33
.parent {
44
display: -webkit-flex;
5-
justify-items: flex-end unsafe;
6-
align-items: flex-start safe;
5+
justify-items: unsafe flex-end;
6+
align-items: safe flex-start;
77
}
88
.parent .child {
99
display: -webkit-flex;
10-
justify-self: flex-end unsafe;
11-
align-self: flex-start safe;
10+
justify-self: unsafe flex-end;
11+
align-self: safe flex-start;
1212
}
1313
#parentId {
1414
justify-items: center;
@@ -35,8 +35,8 @@
3535
shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-items')", "stretch");
3636

3737
var childOfDefaultParent = document.getElementById("childOfDefaultParent");
38-
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "flex-end unsafe");
39-
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "flex-start safe");
38+
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "unsafe flex-end");
39+
shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "safe flex-start");
4040

4141
var childOfParentId = document.getElementById("childOfParentId");
4242
shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-self')", "center");

‎LayoutTests/css3/parse-align-content.html

+62-44
Original file line numberDiff line numberDiff line change
@@ -60,30 +60,31 @@
6060
align-content: flex-end;
6161
}
6262

63-
#alignContentEndUnsafe {
64-
align-content: end unsafe;
63+
#alignContentUnsafeEnd {
64+
align-content: unsafe end ;
6565
}
6666

67-
#alignContentCenterUnsafe {
68-
align-content: center unsafe;
67+
#alignContentUnsafeCenter {
68+
align-content: unsafe center ;
6969
}
7070

71-
#alignContentRightSafe {
72-
align-content: right safe;
71+
#alignContentSafeRight {
72+
align-content: safe right;
7373
}
7474

75-
#alignContentLeftUnsafe {
76-
align-content: left unsafe;
75+
#alignContentUnsafeLeft {
76+
align-content: unsafe left;
7777
}
7878

79-
#alignContentFlexStartUnsafe {
80-
align-content: flex-start unsafe;
79+
#alignContentUnsafeFlexStart {
80+
align-content: unsafe flex-start;
8181
}
8282

83-
#alignContentFlexEndSafe {
84-
align-content: flex-end safe;
83+
#alignContentSafeFlexEnd {
84+
align-content: safe flex-end;
8585
}
8686

87+
<!-- Invalid CSS cases -->
8788
#alignContentSpaceBetweenLeft {
8889
align-content: space-between left;
8990
}
@@ -108,7 +109,6 @@
108109
align-content: space-evenly flex-start safe;
109110
}
110111

111-
<!-- Invalid CSS cases -->
112112
#alignContentSpaceBetweenSafe {
113113
align-content: space-between safe;
114114
}
@@ -145,19 +145,27 @@
145145
<div id="alignContentRight"></div>
146146
<div id="alignContentFlexStart"></div>
147147
<div id="alignContentFlexEnd"></div>
148+
<div id="alignContentUnsafeEnd"></div>
149+
<div id="alignContentUnsafeCenter"></div>
150+
<div id="alignContentSafeSelfEnd"></div>
151+
<div id="alignContentSafeSelfStart"></div>
152+
<div id="alignContentSafeRight"></div>
153+
<div id="alignContentUnsafeLeft"></div>
154+
<div id="alignContentUnsafeFlexStart"></div>
155+
<div id="alignContentSafeFlexEnd"></div>
148156
<div id="alignContentEndUnsafe"></div>
149157
<div id="alignContentCenterUnsafe"></div>
150158
<div id="alignContentRightSafe"></div>
151159
<div id="alignContentLeftUnsafe"></div>
152160
<div id="alignContentFlexStartUnsafe"></div>
153161
<div id="alignContentFlexEndSafe"></div>
162+
154163
<div id="alignContentSpaceBetweenLeft"></div>
155164
<div id="alignContentSpaceAroundCenter"></div>
156165
<div id="alignContentSpaceEvenlyRight"></div>
157166
<div id="alignContentStretchStartSafe"></div>
158167
<div id="alignContentSpaceAroundEndUnsafe"></div>
159168
<div id="alignContentSpaceEvenlyFlexStartSafe"></div>
160-
161169
<div id="alignContentSpaceBetweenSafe"></div>
162170
<div id="alignContentSpaceBetweenStretch"></div>
163171
<div id="alignContentSafe"></div>
@@ -199,33 +207,45 @@
199207
checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
200208
var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
201209
checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
210+
var alignContentUnsafeEnd = document.getElementById("alignContentUnsafeEnd");
211+
checkValues(alignContentUnsafeEnd, "alignContent", "align-content", "", "unsafe end");
212+
var alignContentUnsafeCenter = document.getElementById("alignContentUnsafeCenter");
213+
checkValues(alignContentUnsafeCenter, "alignContent", "align-content", "", "unsafe center");
214+
var alignContentSafeRight = document.getElementById("alignContentSafeRight");
215+
checkValues(alignContentSafeRight, "alignContent", "align-content", "", "safe right");
216+
var alignContentUnsafeLeft = document.getElementById("alignContentUnsafeLeft");
217+
checkValues(alignContentUnsafeLeft, "alignContent", "align-content", "", "unsafe left");
218+
var alignContentUnsafeFlexStart = document.getElementById("alignContentUnsafeFlexStart");
219+
checkValues(alignContentUnsafeFlexStart, "alignContent", "align-content", "", "unsafe flex-start");
220+
var alignContentSafeFlexEnd = document.getElementById("alignContentSafeFlexEnd");
221+
checkValues(alignContentSafeFlexEnd, "alignContent", "align-content", "", "safe flex-end");
222+
}, "Test getting align-content values previously set through CSS.");
223+
224+
test(function() {
202225
var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
203-
checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "end unsafe");
226+
checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "normal");
204227
var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
205-
checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "center unsafe");
228+
checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "normal");
206229
var alignContentRightSafe = document.getElementById("alignContentRightSafe");
207-
checkValues(alignContentRightSafe, "alignContent", "align-content", "", "right safe");
230+
checkValues(alignContentRightSafe, "alignContent", "align-content", "", "normal");
208231
var alignContentLeftUnsafe = document.getElementById("alignContentLeftUnsafe");
209-
checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "left unsafe");
232+
checkValues(alignContentLeftUnsafe, "alignContent", "align-content", "", "normal");
210233
var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
211-
checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "flex-start unsafe");
234+
checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "normal");
212235
var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
213-
checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "flex-end safe");
236+
checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "normal");
214237
var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
215-
checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "space-between left");
238+
checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "normal");
216239
var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
217-
checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "space-around center");
240+
checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "normal");
218241
var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
219-
checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "space-evenly right");
242+
checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "normal");
220243
var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
221-
checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "stretch start safe");
244+
checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "normal");
222245
var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
223-
checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "space-around end unsafe");
246+
checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "normal");
224247
var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
225-
checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "space-evenly flex-start safe");
226-
}, "Test getting align-content values previously set through CSS.");
227-
228-
test(function() {
248+
checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "normal");
229249
var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
230250
checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
231251
var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
@@ -251,19 +271,13 @@
251271
checkValues(element, "alignContent", "align-content", "center", "center");
252272

253273
element.style.alignContent = "unsafe start";
254-
checkValues(element, "alignContent", "align-content", "start unsafe", "start unsafe");
255-
256-
element.style.alignContent = "flex-end safe";
257-
checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-end safe");
258-
259-
element.style.alignContent = "space-between right safe";
260-
checkValues(element, "alignContent", "align-content", "space-between right safe", "space-between right safe");
274+
checkValues(element, "alignContent", "align-content", "unsafe start", "unsafe start");
261275

262-
element.style.alignContent = "stretch center";
263-
checkValues(element, "alignContent", "align-content", "stretch center", "stretch center");
276+
element.style.alignContent = "safe flex-end";
277+
checkValues(element, "alignContent", "align-content", "safe flex-end", "safe flex-end");
264278

265-
element.style.alignContent = "right unsafe";
266-
checkValues(element, "alignContent", "align-content", "right unsafe", "right unsafe");
279+
element.style.alignContent = " unsafe right";
280+
checkValues(element, "alignContent", "align-content", "unsafe right", "unsafe right");
267281

268282
element.style.justifyContent = "first baseline";
269283
checkValues(element, "justifyContent", "justify-content", "first baseline", "baseline");
@@ -309,12 +323,16 @@
309323
checkBadValues(element, "alignContent", "align-content", "safe stretch");
310324
checkBadValues(element, "alignContent", "align-content", "normal space-between");
311325
checkBadValues(element, "alignContent", "align-content", "stretch normal");
326+
checkBadValues(element, "alignContent", "align-content", "stretch center");
327+
checkBadValues(element, "alignContent", "align-content", "space-between right safe");
312328
checkBadValues(element, "alignContent", "align-content", "normal safe");
313329
checkBadValues(element, "alignContent", "align-content", "space-around stretch");
314330
checkBadValues(element, "alignContent", "align-content", "end space-between start");
315331
checkBadValues(element, "alignContent", "align-content", "right safe left");
316332
checkBadValues(element, "alignContent", "align-content", "unsafe");
317333
checkBadValues(element, "alignContent", "align-content", "safe");
334+
checkBadValues(element, "alignContent", "align-content", "start safe");
335+
checkBadValues(element, "alignContent", "align-content", "end unsafe");
318336
}, "Test bad combinations of align-content");
319337

320338
test(function() {
@@ -324,17 +342,17 @@
324342

325343
test(function() {
326344
element.style.display = "grid";
327-
checkInitialValues(element, "alignContent", "align-content", "left safe", "normal");
345+
checkInitialValues(element, "alignContent", "align-content", "safe left", "normal");
328346
}, "Test the value 'initial' for grid containers");
329347

330348
test(function() {
331349
element.style.display = "flex";
332-
checkInitialValues(element, "alignContent", "align-content", "right unsafe", "normal");
350+
checkInitialValues(element, "alignContent", "align-content", "unsafe right", "normal");
333351
}, "Test the value 'initial' for flex containers");
334352

335353
test(function() {
336354
checkInheritValues("alignContent", "align-content", "end");
337-
checkInheritValues("alignContent", "align-content", "left safe");
338-
checkInheritValues("alignContent", "align-content", "center unsafe");
355+
checkInheritValues("alignContent", "align-content", "safe left");
356+
checkInheritValues("alignContent", "align-content", "unsafe center");
339357
}, "Test the value 'inherit'");
340358
</script>

0 commit comments

Comments
 (0)