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

Author: darinadler

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

@@ -13,7 +13,7 @@ After cut and paste:
 | "hello "
 | 
 |   class="test"
-|   style="background-color: transparent;"
+|   style="background-image: none; background-color: transparent;"
 |   "world"
 | " WebKit<#selection-caret>"
 | 

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

@@ -13,7 +13,7 @@ After cut and paste:
 | "hello "
 | 
 |   class="test"
-|   style="background-color: transparent;"
+|   style="background-image: none; background-color: transparent;"
 |   "world"
 | " WebKit<#selection-caret>"
 | 

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

@@ -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

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

@@ -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("")
 

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

@@ -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'
@@ -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'

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

@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");
@@ -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'");

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

@@ -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 "".

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

@@ -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.

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

@@ -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>

Source/WebCore/css/CSSProperties.json

@@ -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": {