getComputedStyle-background-shorthand.html

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

description("Tests that the background shorthand is computed 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";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundImage = "url(dummy://test.png)";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / auto padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundRepeat = "no-repeat";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 0% 0% / auto padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundAttachment = "fixed";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 0% 0% / auto padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundPosition = "right bottom";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / auto padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundSize = "cover";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover padding-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundOrigin = "content-box";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover content-box border-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.backgroundClip = "padding-box";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(255, 0, 0) url("dummy://test.png") no-repeat fixed 100% 100% / cover content-box padding-box');
shouldBe("checkComputedStyleValue()", "true");

e.style.background = "border-box padding-box url(dummy://test.png) green 45% / contain repeat fixed";
shouldBeEqualToString("computedStyle.getPropertyValue('background')", 'rgb(0, 128, 0) url("dummy://test.png") repeat fixed 45% 50% / contain border-box padding-box');
shouldBe("checkComputedStyleValue()", "true");

document.body.removeChild(testContainer);

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/getComputedStyle-background-shorthand.html
