Skip to content

Commit bec59bd

Browse files
committed
REGRESSION (STP 164): new failure in css/css-backgrounds/parsing/background-shorthand-serialization.html
https://bugs.webkit.org/show_bug.cgi?id=252925 rdar://problem/106208628 Reviewed by Tim Nguyen. Revert the change from https://commits.webkit.org/260157@main that made background-color serialize first. This is being discussed in w3c/csswg-drafts#8496, but while it's discussed, it seems good to change the behavior back since that matches other browsers and some WPT test expectations. * LayoutTests/editing/deleting/paste-with-transparent-background-color-expected.txt: Change expectations back to expect background-color to be serialized last, after the other longhands that are part of the background shorthand * LayoutTests/editing/deleting/paste-with-transparent-background-color-live-range-expected.txt: Ditto. * LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize-expected.txt: Ditto. * LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize.html: Ditto. * LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt: Ditto. * LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html: Ditto. * LayoutTests/fast/css/remove-shorthand-expected.txt: Ditto. * LayoutTests/fast/dom/background-shorthand-csstext-expected.txt: Ditto. * LayoutTests/fast/dom/background-shorthand-csstext.html: Ditto. * Source/WebCore/css/CSSProperties.json: Move background-color to the end of the list of longhands for the background shorthand. Canonical link: https://commits.webkit.org/261250@main
1 parent 5686577 commit bec59bd

10 files changed

+29
-29
lines changed

LayoutTests/editing/deleting/paste-with-transparent-background-color-expected.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ After cut and paste:
1313
| "hello "
1414
|
1515
| class="test"
16-
| style="background-color: transparent;"
16+
| style="background-image: none; background-color: transparent;"
1717
| "world"
1818
| " WebKit<#selection-caret>"
1919
|

LayoutTests/editing/deleting/paste-with-transparent-background-color-live-range-expected.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ After cut and paste:
1313
| "hello "
1414
|
1515
| class="test"
16-
| style="background-color: transparent;"
16+
| style="background-image: none; background-color: transparent;"
1717
| "world"
1818
| " WebKit<#selection-caret>"
1919
|

LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize-expected.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Tests a flag to make background shorthand property not override background-size
33
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
44

55

6-
PASS e.style.background is 'red url("dummy://test.png") center center / cover no-repeat border-box'
6+
PASS e.style.background is 'url("dummy://test.png") center center / cover no-repeat border-box red'
77
PASS e.style.backgroundSize is 'cover'
88

99
PASS successfullyParsed is true

LayoutTests/fast/backgrounds/background-shorthand-after-set-backgroundSize.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
e.style.backgroundSize = "cover";
1414
e.style.background = "center red url(dummy://test.png) no-repeat border-box";
15-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") center center / cover no-repeat border-box'")
15+
shouldBe("e.style.background", "'url(\"dummy://test.png\") center center / cover no-repeat border-box red'")
1616
shouldBe("e.style.backgroundSize", "'cover'");
1717
debug("")
1818

LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,56 @@ Tests background shortand property with background-size
33
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
44

55

6-
PASS e.style.background is 'red url("dummy://test.png") center center / cover no-repeat border-box'
6+
PASS e.style.background is 'url("dummy://test.png") center center / cover no-repeat border-box red'
77
PASS e.style.backgroundSize is 'cover'
88
PASS checkStyle() is true
99
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50% 50% / cover border-box border-box'
1010
PASS computedStyle.getPropertyValue("background-size") is 'cover'
1111
PASS checkComputedStyleValue() is true
1212

13-
PASS e.style.background is 'red url("dummy://test.png") 20px center / contain no-repeat padding-box'
13+
PASS e.style.background is 'url("dummy://test.png") 20px center / contain no-repeat padding-box red'
1414
PASS e.style.backgroundSize is 'contain'
1515
PASS checkStyle() is true
1616
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box padding-box'
1717
PASS computedStyle.getPropertyValue("background-size") is 'contain'
1818
PASS checkComputedStyleValue() is true
1919

20-
PASS e.style.background is 'red url("dummy://test.png") 50px 60px / 50% 75% no-repeat'
20+
PASS e.style.background is 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red'
2121
PASS e.style.backgroundSize is '50% 75%'
2222
PASS checkStyle() is true
2323
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50px 60px / 50% 75% padding-box border-box'
2424
PASS computedStyle.getPropertyValue("background-size") is '50% 75%'
2525
PASS checkComputedStyleValue() is true
2626

27-
PASS e.style.background is 'red url("dummy://test.png") left top / 100px 200px repeat border-box content-box'
27+
PASS e.style.background is 'url("dummy://test.png") left top / 100px 200px repeat border-box content-box red'
2828
PASS e.style.backgroundSize is '100px 200px'
2929
PASS checkStyle() is true
3030
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box content-box'
3131
PASS computedStyle.getPropertyValue("background-size") is '100px 200px'
3232
PASS checkComputedStyleValue() is true
3333

34-
PASS e.style.background is 'red url("dummy://test.png") 50% repeat content-box padding-box'
34+
PASS e.style.background is 'url("dummy://test.png") 50% repeat content-box padding-box red'
3535
PASS e.style.backgroundSize is 'auto'
3636
PASS checkStyle() is true
3737
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-box'
3838
PASS computedStyle.getPropertyValue("background-size") is 'auto'
3939
PASS checkComputedStyleValue() is true
4040

41-
PASS e.style.background is 'red url("dummy://test.png") 50px 60px / 50% auto no-repeat fixed'
41+
PASS e.style.background is 'url("dummy://test.png") 50px 60px / 50% auto no-repeat fixed red'
4242
PASS e.style.backgroundSize is '50% auto'
4343
PASS checkStyle() is true
4444
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 50px 60px / 50% auto padding-box border-box'
4545
PASS computedStyle.getPropertyValue("background-size") is '50% auto'
4646
PASS checkComputedStyleValue() is true
4747

48-
PASS e.style.background is 'red url("dummy://test.png") left top / 100px auto repeat'
48+
PASS e.style.background is 'url("dummy://test.png") left top / 100px auto repeat red'
4949
PASS e.style.backgroundSize is '100px auto'
5050
PASS checkStyle() is true
5151
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px auto padding-box border-box'
5252
PASS computedStyle.getPropertyValue("background-size") is '100px auto'
5353
PASS checkComputedStyleValue() is true
5454

55-
PASS e.style.background is 'red url("dummy://test.png") 50% repeat fixed content-box'
55+
PASS e.style.background is 'url("dummy://test.png") 50% repeat fixed content-box red'
5656
PASS e.style.backgroundSize is 'auto'
5757
PASS checkStyle() is true
5858
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-box'
@@ -66,7 +66,7 @@ PASS computedStyle.getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repe
6666
PASS computedStyle.getPropertyValue("background-size") is '50% auto'
6767
PASS checkComputedStyleValue() is true
6868

69-
PASS e.style.background is 'red fixed'
69+
PASS e.style.background is 'fixed red'
7070
PASS e.style.backgroundSize is 'auto'
7171
PASS checkStyle() is true
7272
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box'

LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
e.style.background = "center / cover red url(dummy://test.png) no-repeat border-box";
26-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") center center / cover no-repeat border-box'");
26+
shouldBe("e.style.background", "'url(\"dummy://test.png\") center center / cover no-repeat border-box red'");
2727
shouldBe("e.style.backgroundSize", "'cover'");
2828
shouldBe("checkStyle()", "true");
2929
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") no-repeat scroll 50% 50% / cover border-box border-box'");
@@ -32,7 +32,7 @@
3232
debug("")
3333

3434
e.style.background = "red 20px / contain url(dummy://test.png) no-repeat padding-box";
35-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") 20px center / contain no-repeat padding-box'");
35+
shouldBe("e.style.background", "'url(\"dummy://test.png\") 20px center / contain no-repeat padding-box red'");
3636
shouldBe("e.style.backgroundSize", "'contain'");
3737
shouldBe("checkStyle()", "true");
3838
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") no-repeat scroll 20px 50% / contain padding-box padding-box'");
@@ -41,7 +41,7 @@
4141
debug("")
4242

4343
e.style.background = "red url(dummy://test.png) 50px 60px / 50% 75% no-repeat";
44-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") 50px 60px / 50% 75% no-repeat'");
44+
shouldBe("e.style.background", "'url(\"dummy://test.png\") 50px 60px / 50% 75% no-repeat red'");
4545
shouldBe("e.style.backgroundSize", "'50% 75%'");
4646
shouldBe("checkStyle()", "true");
4747
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") no-repeat scroll 50px 60px / 50% 75% padding-box border-box'");
@@ -50,7 +50,7 @@
5050
debug("")
5151

5252
e.style.background = "red url(dummy://test.png) repeat top left / 100px 200px border-box content-box";
53-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") left top / 100px 200px repeat border-box content-box'");
53+
shouldBe("e.style.background", "'url(\"dummy://test.png\") left top / 100px 200px repeat border-box content-box red'");
5454
shouldBe("e.style.backgroundSize", "'100px 200px'");
5555
shouldBe("checkStyle()", "true");
5656
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") repeat scroll 0% 0% / 100px 200px border-box content-box'");
@@ -59,7 +59,7 @@
5959
debug("")
6060

6161
e.style.background = "red url(dummy://test.png) repeat 50% / auto auto content-box padding-box";
62-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") 50% repeat content-box padding-box'");
62+
shouldBe("e.style.background", "'url(\"dummy://test.png\") 50% repeat content-box padding-box red'");
6363
shouldBe("e.style.backgroundSize", "'auto'");
6464
shouldBe("checkStyle()", "true");
6565
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") repeat scroll 50% 50% / auto content-box padding-box'");
@@ -68,7 +68,7 @@
6868
debug("")
6969

7070
e.style.background = "url(dummy://test.png) red 50px 60px / 50% no-repeat fixed";
71-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") 50px 60px / 50% auto no-repeat fixed'");
71+
shouldBe("e.style.background", "'url(\"dummy://test.png\") 50px 60px / 50% auto no-repeat fixed red'");
7272
shouldBe("e.style.backgroundSize", "'50% auto'");
7373
shouldBe("checkStyle()", "true");
7474
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") no-repeat fixed 50px 60px / 50% auto padding-box border-box'");
@@ -77,7 +77,7 @@
7777
debug("")
7878

7979
e.style.background = "red repeat scroll padding-box border-box top left / 100px url(dummy://test.png)";
80-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") left top / 100px auto repeat'");
80+
shouldBe("e.style.background", "'url(\"dummy://test.png\") left top / 100px auto repeat red'");
8181
shouldBe("e.style.backgroundSize", "'100px auto'");
8282
shouldBe("checkStyle()", "true");
8383
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") repeat scroll 0% 0% / 100px auto padding-box border-box'");
@@ -86,7 +86,7 @@
8686
debug("")
8787

8888
e.style.background = "50% / auto fixed url(dummy://test.png) repeat content-box red";
89-
shouldBe("e.style.background", "'red url(\"dummy://test.png\") 50% repeat fixed content-box'");
89+
shouldBe("e.style.background", "'url(\"dummy://test.png\") 50% repeat fixed content-box red'");
9090
shouldBe("e.style.backgroundSize", "'auto'");
9191
shouldBe("checkStyle()", "true");
9292
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(\"dummy://test.png\") repeat fixed 50% 50% / auto content-box content-box'");
@@ -104,7 +104,7 @@
104104
debug("")
105105

106106
e.style.background = "red fixed";
107-
shouldBe("e.style.background", "'red fixed'");
107+
shouldBe("e.style.background", "'fixed red'");
108108
shouldBe("e.style.backgroundSize", "'auto'");
109109
shouldBe("checkStyle()", "true");
110110
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box'");

LayoutTests/fast/css/remove-shorthand-expected.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ removes "background"
77
and adds "".
88
Removing background-position
99
removes "background"
10-
and adds "background-color, background-image, background-size, background-repeat, background-attachment, background-origin, background-clip".
10+
and adds "background-image, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color".
1111
Removing border
1212
removes "border"
1313
and adds "".

LayoutTests/fast/dom/background-shorthand-csstext-expected.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ This page tests whether or not the background shorthand properly omits initial v
22

33
PASS: document.body.style.background should be green and is.
44
PASS: document.getElementById('div1').style.background should be and is.
5-
PASS: document.getElementById('div2').style.background should be blue 50% 50% and is.
6-
PASS: document.getElementById('div3').style.background should be rgb(255, 255, 255) repeat and is.
5+
PASS: document.getElementById('div2').style.background should be 50% 50% blue and is.
6+
PASS: document.getElementById('div3').style.background should be repeat rgb(255, 255, 255) and is.

LayoutTests/fast/dom/background-shorthand-csstext.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333

3434
shouldBe("document.body.style.background", "green");
3535
shouldBe("document.getElementById('div1').style.background", "");
36-
shouldBe("document.getElementById('div2').style.background", "blue 50% 50%");
37-
shouldBe("document.getElementById('div3').style.background", "rgb(255, 255, 255) repeat");
36+
shouldBe("document.getElementById('div2').style.background", "50% 50% blue");
37+
shouldBe("document.getElementById('div3').style.background", "repeat rgb(255, 255, 255)");
3838
}
3939
script>
4040
head>

Source/WebCore/css/CSSProperties.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1548,15 +1548,15 @@
15481548
"background": {
15491549
"codegen-properties": {
15501550
"longhands": [
1551-
"background-color",
15521551
"background-image",
15531552
"background-position-x",
15541553
"background-position-y",
15551554
"background-size",
15561555
"background-repeat",
15571556
"background-attachment",
15581557
"background-origin",
1559-
"background-clip"
1558+
"background-clip",
1559+
"background-color"
15601560
]
15611561
},
15621562
"specification": {

0 commit comments

Comments
 (0)