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.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/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;