<!DOCTYPE html>
<html>
<script src="../../resources/js-test-pre.js"></script>
<div id="test"> </div>
<script>
description("Tests background shortand property with background-size");

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

function checkStyle() {
    var before = e.style.background;
    e.style.background = 'none';
    e.style.background = before;
    return (e.style.background == before);
}

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 = "center / cover red url(dummy://test.png) no-repeat border-box";
shouldBe("e.style.background", "'url(dummy://test.png) center center / 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 border-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'cover'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red 20px / contain url(dummy://test.png) no-repeat padding-box";
shouldBe("e.style.background", "'url(dummy://test.png) 20px center / 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 padding-box padding-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'contain'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red url(dummy://test.png) 50px 60px / 50% 75% no-repeat";
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% padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'50% 75%'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red url(dummy://test.png) repeat top left / 100px 200px border-box content-box";
shouldBe("e.style.background", "'url(dummy://test.png) left top / 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 border-box content-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'100px 200px'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red url(dummy://test.png) repeat 50% / auto auto content-box padding-box";
shouldBe("e.style.background", "'url(dummy://test.png) 50% center / 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 content-box padding-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "url(dummy://test.png) red 50px 60px / 50% no-repeat fixed";
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% padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red repeat scroll padding-box border-box top left / 100px url(dummy://test.png)";
shouldBe("e.style.background", "'url(dummy://test.png) left top / 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 padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'100px'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "50% / auto fixed url(dummy://test.png) repeat content-box red";
shouldBe("e.style.background", "'url(dummy://test.png) 50% center / 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 content-box content-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "top left / 50%";
shouldBe("e.style.background", "'left top / 50%'");
shouldBe("e.style.backgroundSize", "'50%'");
shouldBe("checkStyle()", "true");
shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / 50% padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'50%'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "red 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 padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "";
e.style.background = "red / cover url(dummy://test.png) repeat";
shouldBe("e.style.background", "''");
shouldBe("e.style.backgroundSize", "''");
shouldBe("checkStyle()", "true");
shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "";
e.style.background = "red url(dummy://test.png) repeat 25px / contain contain";
shouldBe("e.style.background", "''");
shouldBe("e.style.backgroundSize", "''");
shouldBe("checkStyle()", "true");
shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")

e.style.background = "";
e.style.background = "red top left / 100px cover url(dummy://test.png) repeat";
shouldBe("e.style.background", "''");
shouldBe("e.style.backgroundSize", "''");
shouldBe("checkStyle()", "true");
shouldBe('computedStyle.getPropertyValue("background")', "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
shouldBe('computedStyle.getPropertyValue("background-size")', "'auto'");
shouldBe("checkComputedStyleValue()", "true");
debug("")
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>