Skip to content

REGRESSION (STP 164): new failure in css/css-backgrounds/parsing/background-shorthand-serialization.html #11087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
REGRESSION (STP 164): new failure in css/css-backgrounds/parsing/back…
…ground-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
  • Loading branch information
darinadler committed Mar 6, 2023
commit bec59bdd1e2679d403d84c3aefcd42618e3bc2cb
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ After cut and paste:
| "helloΒ "
| <span>
| class="test"
| style="background-color: transparent;"
| style="background-image: none; background-color: transparent;"
| "world"
| "Β WebKit<#selection-caret>"
| <br>
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ After cut and paste:
| "helloΒ "
| <span>
| class="test"
| style="background-color: transparent;"
| style="background-image: none; background-color: transparent;"
| "world"
| "Β WebKit<#selection-caret>"
| <br>
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Tests a flag to make background shorthand property not override background-size
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


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

PASS successfullyParsed is true
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,56 @@ Tests background shortand property with background-size
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


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

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

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

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

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

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

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

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

PASS e.style.background is 'red fixed'
PASS e.style.background is 'fixed red'
PASS e.style.backgroundSize is 'auto'
PASS checkStyle() is true
PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

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

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

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

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

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

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

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

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

e.style.background = "red fixed";
shouldBe("e.style.background", "'red fixed'");
shouldBe("e.style.background", "'fixed red'");
shouldBe("e.style.backgroundSize", "'auto'");
shouldBe("checkStyle()", "true");
shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box'");
Expand Down
2 changes: 1 addition & 1 deletion LayoutTests/fast/css/remove-shorthand-expected.txt
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ removes "background"
and adds "".
Removing background-position
removes "background"
and adds "background-color, background-image, background-size, background-repeat, background-attachment, background-origin, background-clip".
and adds "background-image, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color".
Removing border
removes "border"
and adds "".
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ This page tests whether or not the background shorthand properly omits initial v

PASS: document.body.style.background should be green and is.
PASS: document.getElementById('div1').style.background should be and is.
PASS: document.getElementById('div2').style.background should be blue 50% 50% and is.
PASS: document.getElementById('div3').style.background should be rgb(255, 255, 255) repeat and is.
PASS: document.getElementById('div2').style.background should be 50% 50% blue and is.
PASS: document.getElementById('div3').style.background should be repeat rgb(255, 255, 255) and is.
4 changes: 2 additions & 2 deletions LayoutTests/fast/dom/background-shorthand-csstext.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@

shouldBe("document.body.style.background", "green");
shouldBe("document.getElementById('div1').style.background", "");
shouldBe("document.getElementById('div2').style.background", "blue 50% 50%");
shouldBe("document.getElementById('div3').style.background", "rgb(255, 255, 255) repeat");
shouldBe("document.getElementById('div2').style.background", "50% 50% blue");
shouldBe("document.getElementById('div3').style.background", "repeat rgb(255, 255, 255)");
}
</script>
</head>
Expand Down
4 changes: 2 additions & 2 deletions Source/WebCore/css/CSSProperties.json
Original file line number Diff line number Diff line change
Expand Up @@ -1548,15 +1548,15 @@
"background": {
"codegen-properties": {
"longhands": [
"background-color",
"background-image",
"background-position-x",
"background-position-y",
"background-size",
"background-repeat",
"background-attachment",
"background-origin",
"background-clip"
"background-clip",
"background-color"
]
},
"specification": {
Expand Down