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