LayoutTests/fast/css/getComputedStyle/getComputedStyle-background-shorthand.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="../../../resources/js-test-pre.js"></script>
 </head>
 <body>
 <script>

 description("Test to make sure background shorthand properties returns CSSValueList properly.")

 var testContainer = document.createElement("div");
 testContainer.contentEditable = true;
 document.body.appendChild(testContainer);

 testContainer.innerHTML = '<div id="test">hello</div>';

 e = document.getElementById('test');
 computedStyle = window.getComputedStyle(e, null);

 function checkComputedStyleValue() {
     var before = window.getComputedStyle(e, null).getPropertyValue('background');
     e.style.background = 'none';
     e.style.background = before;
     return (window.getComputedStyle(e, null).getPropertyValue('background') == before);
 }

 e.style.background = "red";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'none'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'scroll'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'auto'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundImage = "url(dummy://test.png)";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'scroll'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'auto'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundRepeat = "no-repeat";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat scroll 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'scroll'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'auto'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundAttachment = "fixed";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 0% 0% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'auto'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundPosition = "right bottom";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / auto padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'auto'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundSize = "cover";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover padding-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'cover'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundOrigin = "content-box";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover content-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover content-box border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'cover'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'content-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'border-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.backgroundClip = "padding-box";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover content-box padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(255, 0, 0) url(dummy://test.png) no-repeat fixed 100% 100% / cover content-box padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "255");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'no-repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "100");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'cover'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'content-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'padding-box'");
 shouldBe("checkComputedStyleValue()", "true");

 e.style.background = "border-box padding-box url(dummy://test.png) green 45% / contain repeat fixed";
 shouldBe("computedStyle.getPropertyValue('background')", "'rgb(0, 128, 0) url(dummy://test.png) repeat fixed 45% 50% / contain border-box padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').cssText", "'rgb(0, 128, 0) url(dummy://test.png) repeat fixed 45% 50% / contain border-box padding-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').length", "2");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).length", "5");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).length", "3");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "128");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(0).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)", "0");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(1).getStringValue()", "'dummy://test.png'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(2).getStringValue()", "'repeat'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(3).getStringValue()", "'fixed'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).toString()", "'[object CSSValueList]'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(0).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "45");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(0).item(4).item(1).getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE)", "50");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(0).getStringValue()", "'contain'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(1).getStringValue()", "'border-box'");
 shouldBe("computedStyle.getPropertyCSSValue('background').item(1).item(2).getStringValue()", "'padding-box'");
 shouldBe("checkComputedStyleValue()", "true");

 document.body.removeChild(testContainer);

 </script>
 <script src="../../../resources/js-test-post.js"></script>
 </body>
 </html>