Title: [117694] trunk
Revision
117694
Author
[email protected]
Date
2012-05-19 11:25:34 -0700 (Sat, 19 May 2012)

Log Message

The order of CSS properties is wrong in background shorthand
https://bugs.webkit.org/show_bug.cgi?id=86152

Patch by Joe Thomas <[email protected]> on 2012-05-19
Reviewed by Ryosuke Niwa.

Corrected the order of properties returned in StylePropertySet::getPropertyValue for background shorthand property to match the specification
http://www.w3.org/TR/css3-background/#background.

Source/WebCore:

* css/StylePropertyShorthand.cpp:
(WebCore::backgroundShorthand):

LayoutTests:

* fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt:
* fast/backgrounds/background-shorthand-with-backgroundSize-style.html:
* fast/dom/background-shorthand-csstext-expected.txt:
* fast/dom/background-shorthand-csstext.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (117693 => 117694)


--- trunk/LayoutTests/ChangeLog	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/LayoutTests/ChangeLog	2012-05-19 18:25:34 UTC (rev 117694)
@@ -1,3 +1,18 @@
+2012-05-19  Joe Thomas  <[email protected]>
+
+        The order of CSS properties is wrong in background shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=86152
+
+        Reviewed by Ryosuke Niwa.
+
+        Corrected the order of properties returned in StylePropertySet::getPropertyValue for background shorthand property to match the specification  
+        http://www.w3.org/TR/css3-background/#background.
+
+        * fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt:
+        * fast/backgrounds/background-shorthand-with-backgroundSize-style.html:
+        * fast/dom/background-shorthand-csstext-expected.txt:
+        * fast/dom/background-shorthand-csstext.html:
+
 2012-05-19  Zan Dobersek  <[email protected]>
 
         Unreviewed GTK gardening, add test expectations for further tests that

Modified: trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt (117693 => 117694)


--- trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style-expected.txt	2012-05-19 18:25:34 UTC (rev 117694)
@@ -3,62 +3,76 @@
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS e.style.background is 'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'
+PASS e.style.background is 'url(dummy://test.png) 50% 50% / cover no-repeat border-box 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'
 PASS computedStyle.getPropertyValue("background-size") is 'cover'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'
+PASS e.style.background is 'url(dummy://test.png) 20px 50% / contain no-repeat padding-box 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'
 PASS computedStyle.getPropertyValue("background-size") is 'contain'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'
+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%'
 PASS computedStyle.getPropertyValue("background-size") is '50% 75%'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) repeat border-box border-box 0% 0% / 100px 200px'
+PASS e.style.background is 'url(dummy://test.png) 0% 0% / 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'
 PASS computedStyle.getPropertyValue("background-size") is '100px 200px'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) repeat content-box content-box 50% 50% / auto'
+PASS e.style.background is 'url(dummy://test.png) 50% 50% / auto 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'
 PASS computedStyle.getPropertyValue("background-size") is 'auto'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) no-repeat fixed 50px 60px / 50%'
+PASS e.style.background is 'url(dummy://test.png) 50px 60px / 50% no-repeat fixed red'
 PASS e.style.backgroundSize is '50%'
 PASS checkStyle() is true
 PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 50px 60px / 50%'
 PASS computedStyle.getPropertyValue("background-size") is '50%'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) repeat scroll padding-box padding-box 0% 0% / 100px'
+PASS e.style.background is 'url(dummy://test.png) 0% 0% / 100px repeat scroll padding-box border-box red'
 PASS e.style.backgroundSize is '100px'
 PASS checkStyle() is true
 PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px'
 PASS computedStyle.getPropertyValue("background-size") is '100px'
 PASS checkComputedStyleValue() is true
 
-PASS e.style.background is 'red url(dummy://test.png) repeat fixed content-box content-box 50% 50% / auto'
+PASS e.style.background is 'url(dummy://test.png) 50% 50% / auto repeat fixed content-box 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'
 PASS computedStyle.getPropertyValue("background-size") is 'auto'
 PASS checkComputedStyleValue() is true
 
+PASS e.style.background is '0% 0% / 50%'
+PASS e.style.backgroundSize is '50%'
+PASS checkStyle() is true
+PASS computedStyle.getPropertyValue("background") is 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50%'
+PASS computedStyle.getPropertyValue("background-size") is '50%'
+PASS checkComputedStyleValue() is true
+
+PASS e.style.background is 'fixed red'
+PASS e.style.backgroundSize is 'initial'
+PASS checkStyle() is true
+PASS computedStyle.getPropertyValue("background") is 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto'
+PASS computedStyle.getPropertyValue("background-size") is 'auto'
+PASS checkComputedStyleValue() is true
+
 PASS e.style.background is ''
 PASS e.style.backgroundSize is ''
 PASS checkStyle() is true

Modified: trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html (117693 => 117694)


--- trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/LayoutTests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html	2012-05-19 18:25:34 UTC (rev 117694)
@@ -23,7 +23,7 @@
 }
 
 e.style.background = "" / cover red url(dummy://test.png) no-repeat border-box";
-shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat border-box border-box 50% 50% / cover'");
+shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / cover no-repeat border-box 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'");
@@ -32,7 +32,7 @@
 debug("")
 
 e.style.background = "" 20px / contain url(dummy://test.png) no-repeat padding-box";
-shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat padding-box padding-box 20px 50% / contain'");
+shouldBe("e.style.background", "'url(dummy://test.png) 20px 50% / contain no-repeat padding-box 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'");
@@ -41,7 +41,7 @@
 debug("")
 
 e.style.background = "" url(dummy://test.png) 50px 60px / 50% 75% no-repeat";
-shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat 50px 60px / 50% 75%'");
+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%'");
@@ -49,8 +49,8 @@
 shouldBe("checkComputedStyleValue()", "true");
 debug("")
 
-e.style.background = "" url(dummy://test.png) repeat top left / 100px 200px border-box border-box";
-shouldBe("e.style.background", "'red url(dummy://test.png) repeat border-box border-box 0% 0% / 100px 200px'");
+e.style.background = "" url(dummy://test.png) repeat top left / 100px 200px border-box content-box";
+shouldBe("e.style.background", "'url(dummy://test.png) 0% 0% / 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'");
@@ -58,8 +58,8 @@
 shouldBe("checkComputedStyleValue()", "true");
 debug("")
 
-e.style.background = "" url(dummy://test.png) repeat 50% / auto auto content-box content-box";
-shouldBe("e.style.background", "'red url(dummy://test.png) repeat content-box content-box 50% 50% / auto'");
+e.style.background = "" url(dummy://test.png) repeat 50% / auto auto content-box padding-box";
+shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto 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'");
@@ -68,7 +68,7 @@
 debug("")
 
 e.style.background = "" red 50px 60px / 50% no-repeat fixed";
-shouldBe("e.style.background", "'red url(dummy://test.png) no-repeat fixed 50px 60px / 50%'");
+shouldBe("e.style.background", "'url(dummy://test.png) 50px 60px / 50% no-repeat fixed red'");
 shouldBe("e.style.backgroundSize", "'50%'");
 shouldBe("checkStyle()", "true");
 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 50px 60px / 50%'");
@@ -76,8 +76,8 @@
 shouldBe("checkComputedStyleValue()", "true");
 debug("")
 
-e.style.background = "" repeat scroll padding-box padding-box top left / 100px url(dummy://test.png)";
-shouldBe("e.style.background", "'red url(dummy://test.png) repeat scroll padding-box padding-box 0% 0% / 100px'");
+e.style.background = "" repeat scroll padding-box border-box top left / 100px url(dummy://test.png)";
+shouldBe("e.style.background", "'url(dummy://test.png) 0% 0% / 100px repeat scroll padding-box border-box red'");
 shouldBe("e.style.backgroundSize", "'100px'");
 shouldBe("checkStyle()", "true");
 shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / 100px'");
@@ -86,7 +86,7 @@
 debug("")
 
 e.style.background = "" / auto fixed url(dummy://test.png) repeat content-box red";
-shouldBe("e.style.background", "'red url(dummy://test.png) repeat fixed content-box content-box 50% 50% / auto'");
+shouldBe("e.style.background", "'url(dummy://test.png) 50% 50% / auto repeat fixed content-box 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'");
@@ -94,6 +94,24 @@
 shouldBe("checkComputedStyleValue()", "true");
 debug("")
 
+e.style.background = "" left / 50%";
+shouldBe("e.style.background", "'0% 0% / 50%'");
+shouldBe("e.style.backgroundSize", "'50%'");
+shouldBe("checkStyle()", "true");
+shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50%'");
+shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
+shouldBe("checkComputedStyleValue()", "true");
+debug("")
+
+e.style.background = "" fixed";
+shouldBe("e.style.background", "'fixed red'");
+shouldBe("e.style.backgroundSize", "'initial'");
+shouldBe("checkStyle()", "true");
+shouldBe('computedStyle.getPropertyValue("background")', "'rgb(255, 0, 0) none repeat fixed 0% 0% / auto'");
+shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
+shouldBe("checkComputedStyleValue()", "true");
+debug("")
+
 e.style.background = ""
 e.style.background = "" / cover url(dummy://test.png) repeat";
 shouldBe("e.style.background", "''");

Modified: trunk/LayoutTests/fast/dom/background-shorthand-csstext-expected.txt (117693 => 117694)


--- trunk/LayoutTests/fast/dom/background-shorthand-csstext-expected.txt	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/LayoutTests/fast/dom/background-shorthand-csstext-expected.txt	2012-05-19 18:25:34 UTC (rev 117694)
@@ -1,6 +1,6 @@
 This page tests whether or not the background shorthand properly omits initial values.
 
 PASS: document.body.style.background == 'green' should be true and is.
-PASS: document.getElementById('div1').style.background == 'repeat-x, white repeat-y' should be true and is.
-PASS: document.getElementById('div2').style.background == 'blue 50% 50%' should be true and is.
-PASS: document.getElementById('div3').style.background == 'rgb(255, 255, 255) none repeat scroll' should be true and is.
+PASS: document.getElementById('div1').style.background == 'repeat-x, repeat-y white' should be true and is.
+PASS: document.getElementById('div2').style.background == '50% 50% blue' should be true and is.
+PASS: document.getElementById('div3').style.background == 'none repeat scroll rgb(255, 255, 255)' should be true and is.

Modified: trunk/LayoutTests/fast/dom/background-shorthand-csstext.html (117693 => 117694)


--- trunk/LayoutTests/fast/dom/background-shorthand-csstext.html	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/LayoutTests/fast/dom/background-shorthand-csstext.html	2012-05-19 18:25:34 UTC (rev 117694)
@@ -32,9 +32,9 @@
         layoutTestController.dumpAsText();
     
     shouldBe("document.body.style.background == 'green'", true);
-    shouldBe("document.getElementById('div1').style.background == 'repeat-x, white repeat-y'", true);
-    shouldBe("document.getElementById('div2').style.background == 'blue 50% 50%'", true);
-    shouldBe("document.getElementById('div3').style.background == 'rgb(255, 255, 255) none repeat scroll'", true);
+    shouldBe("document.getElementById('div1').style.background == 'repeat-x, repeat-y white'", true);
+    shouldBe("document.getElementById('div2').style.background == '50% 50% blue'", true);
+    shouldBe("document.getElementById('div3').style.background == 'none repeat scroll rgb(255, 255, 255)'", true);
 }
 </script>
 </head>

Modified: trunk/Source/WebCore/ChangeLog (117693 => 117694)


--- trunk/Source/WebCore/ChangeLog	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/Source/WebCore/ChangeLog	2012-05-19 18:25:34 UTC (rev 117694)
@@ -1,3 +1,16 @@
+2012-05-19  Joe Thomas  <[email protected]>
+
+        The order of CSS properties is wrong in background shorthand
+        https://bugs.webkit.org/show_bug.cgi?id=86152
+
+        Reviewed by Ryosuke Niwa.
+
+        Corrected the order of properties returned in StylePropertySet::getPropertyValue for background shorthand property to match the specification  
+        http://www.w3.org/TR/css3-background/#background.
+
+        * css/StylePropertyShorthand.cpp:
+        (WebCore::backgroundShorthand):
+
 2012-05-19  Ryosuke Niwa  <[email protected]>
 
         Touch Internals.* in an attempt to fix Windows builds after r117646.

Modified: trunk/Source/WebCore/css/StylePropertyShorthand.cpp (117693 => 117694)


--- trunk/Source/WebCore/css/StylePropertyShorthand.cpp	2012-05-19 18:12:48 UTC (rev 117693)
+++ trunk/Source/WebCore/css/StylePropertyShorthand.cpp	2012-05-19 18:25:34 UTC (rev 117694)
@@ -28,16 +28,16 @@
 const StylePropertyShorthand& backgroundShorthand()
 {
     static const CSSPropertyID backgroundProperties[] = {
-        CSSPropertyBackgroundColor,
         CSSPropertyBackgroundImage,
+        CSSPropertyBackgroundPositionX,
+        CSSPropertyBackgroundPositionY,
+        CSSPropertyBackgroundSize,
         CSSPropertyBackgroundRepeatX,
         CSSPropertyBackgroundRepeatY,
         CSSPropertyBackgroundAttachment,
+        CSSPropertyBackgroundOrigin,
         CSSPropertyBackgroundClip,
-        CSSPropertyBackgroundOrigin,
-        CSSPropertyBackgroundPositionX,
-        CSSPropertyBackgroundPositionY,
-        CSSPropertyBackgroundSize
+        CSSPropertyBackgroundColor
     };
     DEFINE_STATIC_LOCAL(StylePropertyShorthand, backgroundShorthand, (backgroundProperties, WTF_ARRAY_LENGTH(backgroundProperties)));
     return backgroundShorthand;
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to