blob: c8f2f8f3b428a3dd677abbee7a893c5c56279dc3 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("Test to make sure background-position is parsed correctly.")
var testContainer = document.createElement("div");
document.body.appendChild(testContainer);
testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';
e = document.getElementById('test');
style = e.style;
computedStyle = window.getComputedStyle(e, null);
style.backgroundImage = "url(resources/diamond.png)";
style.backgroundRepeat = "no-repeat";
debug("background-position with one value");
// Initial test.
shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
style.backgroundPosition = "70%";
// Second value is assuming to be 'center'
shouldBe("style.backgroundPosition", "'70% center'");
shouldBe("computedStyle.backgroundPosition", "'70% 50%'");
style.backgroundPosition = "84px";
shouldBe("style.backgroundPosition", "'84px center'");
shouldBe("computedStyle.backgroundPosition", "'84px 50%'");
style.backgroundPosition = "left";
shouldBe("style.backgroundPosition", "'left center'");
shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
style.backgroundPosition = "right";
shouldBe("style.backgroundPosition", "'right center'");
shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
style.backgroundPosition = "bottom";
shouldBe("style.backgroundPosition", "'center bottom'");
shouldBe("computedStyle.backgroundPosition", "'50% 100%'");
style.backgroundPosition = "top";
shouldBe("style.backgroundPosition", "'center top'");
shouldBe("computedStyle.backgroundPosition", "'50% 0%'");
style.backgroundPosition = "center";
shouldBe("style.backgroundPosition", "'center center'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
debug("background-position with two values");
style.backgroundPosition = "left bottom";
shouldBe("style.backgroundPosition", "'left bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
style.backgroundPosition = "bottom left";
shouldBe("style.backgroundPosition", "'left bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
style.backgroundPosition = "100% bottom";
shouldBe("style.backgroundPosition", "'100% bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% 100%'");
style.backgroundPosition = "100% top";
shouldBe("style.backgroundPosition", "'100% top'");
shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
style.backgroundPosition = "54px bottom";
shouldBe("style.backgroundPosition", "'54px bottom'");
shouldBe("computedStyle.backgroundPosition", "'54px 100%'");
style.backgroundPosition = "center center";
shouldBe("style.backgroundPosition", "'center center'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "5% bottom";
shouldBe("style.backgroundPosition", "'5% bottom'");
shouldBe("computedStyle.backgroundPosition", "'5% 100%'");
style.backgroundPosition = "30pt -20px";
shouldBe("style.backgroundPosition", "'30pt -20px'");
shouldBe("computedStyle.backgroundPosition", "'40px -20px'");
style.backgroundPosition = "right center";
shouldBe("style.backgroundPosition", "'right center'");
shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
style.backgroundPosition = "100% 0";
shouldBe("style.backgroundPosition", "'100% 0px'");
shouldBe("computedStyle.backgroundPosition", "'100% 0px'");
style.backgroundPosition = "center right";
shouldBe("style.backgroundPosition", "'right center'");
shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
style.backgroundPosition = "center 50%";
shouldBe("style.backgroundPosition", "'center 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "center left";
shouldBe("style.backgroundPosition", "'left center'");
shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
style.backgroundPosition = "-20% center";
shouldBe("style.backgroundPosition", "'-20% center'");
shouldBe("computedStyle.backgroundPosition", "'-20% 50%'");
style.backgroundPosition = "top right";
shouldBe("style.backgroundPosition", "'right top'");
shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
style.backgroundPosition = "50% 50%";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
debug("background-position invalid with one or two values, no change expected");
style.backgroundPosition = "5 right";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "0 right";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "0px right";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "top 108px";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "top 100%";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "60 50%";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "hidden";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "hidden solid";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "bottombottom";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "left left";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "left right";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "top top";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "50% left";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "50";
shouldBe("style.backgroundPosition", "'50% 50%'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
style.backgroundPosition = "1px+1px";
shouldBe("style.backgroundPosition", "'1px 1px'");
shouldBe("computedStyle.backgroundPosition", "'1px 1px'");
debug("background-position with CSS3 comma separator, one or two values");
style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
style.backgroundRepeat = "no-repeat";
style.backgroundPosition = "50%, 100%";
shouldBe("style.backgroundPosition", "'50% center, 100% center'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'");
style.backgroundPosition = "top, bottom";
shouldBe("style.backgroundPosition", "'center top, center bottom'");
shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'");
style.backgroundPosition = "right center, 5px bottom";
shouldBe("style.backgroundPosition", "'right center, 5px bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'");
style.backgroundPosition = "top left, bottom right";
shouldBe("style.backgroundPosition", "'left top, right bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
debug("background-position with CSS3 comma separator, with invalid one or two values, no change expected");
style.backgroundPosition = "0 center, right right";
shouldBe("style.backgroundPosition", "'left top, right bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
style.backgroundPosition = "center right, right right";
shouldBe("style.backgroundPosition", "'left top, right bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
style.backgroundPosition = "center 20px, solid 20px";
shouldBe("style.backgroundPosition", "'left top, right bottom'");
shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
debug("background-position with CSS3 four values");
style.backgroundImage = "url(resources/diamond.png)";
style.backgroundPosition = "left 10px top 15px";
shouldBe("style.backgroundPosition", "'left 10px top 15px'");
shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px'");
style.backgroundPosition = "left 10% top 30%";
shouldBe("style.backgroundPosition", "'left 10% top 30%'");
shouldBe("computedStyle.backgroundPosition", "'left 10% top 30%'");
style.backgroundPosition = "top 10% left 30%";
shouldBe("style.backgroundPosition", "'left 30% top 10%'");
shouldBe("computedStyle.backgroundPosition", "'left 30% top 10%'");
style.backgroundPosition = "right top 15px";
shouldBe("style.backgroundPosition", "'right top 15px'");
shouldBe("computedStyle.backgroundPosition", "'100% top 15px'");
style.backgroundPosition = "left 10px center";
shouldBe("style.backgroundPosition", "'left 10px center'");
shouldBe("computedStyle.backgroundPosition", "'left 10px 50%'");
style.backgroundPosition = "center top 20px";
shouldBe("style.backgroundPosition", "'center top 20px'");
shouldBe("computedStyle.backgroundPosition", "'50% top 20px'");
style.backgroundPosition = "top 20px center";
shouldBe("style.backgroundPosition", "'center top 20px'");
shouldBe("computedStyle.backgroundPosition", "'50% top 20px'");
style.backgroundPosition = "center left 30px";
shouldBe("style.backgroundPosition", "'left 30px center'");
shouldBe("computedStyle.backgroundPosition", "'left 30px 50%'");
style.backgroundPosition = "";
shouldBe("style.backgroundPosition", "''");
shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
style.backgroundPosition = "left 20% top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
debug("background-position with CSS3 invalid four values, no change expected");
style.backgroundPosition = "left center top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "0px right top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left center top center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left center top 20%";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center bottom top 20%";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "right bottom top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "right bottom solid";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "20px bottom top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "20px bottom hidden";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "solid dotted bottom top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "top top top top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left 0px right 20%";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left 30% top 20% center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "20px 30% bottom";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "top 0px bottom";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left 0px right";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "top 0px bottom 30px top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left 10px center 15px";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left 10px top center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center right top 20px";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center 10px center 10px";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "top center center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center 10px center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center center 10px";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center 0px left 20%";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "left center top";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center center center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "top left 50% 50%";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
style.backgroundPosition = "center center center center";
shouldBe("style.backgroundPosition", "'left 20% top'");
shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
debug("background-position with CSS3 four values and comma");
style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
style.backgroundPosition = "center, left bottom 20px";
shouldBe("style.backgroundPosition", "'center center, left bottom 20px'");
shouldBe("computedStyle.backgroundPosition", "'50% 50%, 0% bottom 20px'");
style.backgroundPosition = "right 20px bottom 20px, center left";
shouldBe("style.backgroundPosition", "'right 20px bottom 20px, left center'");
shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'");
style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px";
shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'");
shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'");
style.backgroundPosition = "left 10% top, top 0px right";
shouldBe("style.backgroundPosition", "'left 10% top, right top 0px'");
shouldBe("computedStyle.backgroundPosition", "'left 10% 0%, 100% top 0px'");
style.backgroundPosition = "right top 15px, bottom right 20px";
shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'");
debug("background-position with invalid CSS3 four values and comma, no change expected");
style.backgroundPosition = "right top 15px, left right 20px";
shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'");
style.backgroundPosition = "right left 15px, left bottom 20px";
shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'");
style.backgroundPosition = "solid, left bottom 20px";
shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'");
debug("background-position inside the background shorthand");
style.background = "top 10% left 30% / 10em gray round fixed border-box";
shouldBe("style.background", "'left 30% top 10% / 10em round fixed border-box border-box gray'");
shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box'");
style.background = "right top 15px / 10em gray round fixed border-box";
shouldBe("style.background", "'right top 15px / 10em round fixed border-box border-box gray'");
shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed 100% top 15px / 160px border-box border-box'");
style.background = "left 10px center / 10em gray round fixed border-box";
shouldBe("style.background", "'left 10px center / 10em round fixed border-box border-box gray'");
shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 10px 50% / 160px border-box border-box'");
style.background = "left 10px center round fixed border-box";
shouldBe("style.background", "'left 10px center round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 10px 50% / auto border-box border-box'");
style.background = "center top 20px round fixed border-box";
shouldBe("style.background", "'center top 20px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% top 20px / auto border-box border-box'");
style.background = "top 20px center round fixed border-box";
shouldBe("style.background", "'center top 20px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% top 20px / auto border-box border-box'");
style.background = "top center round fixed border-box";
shouldBe("style.background", "'center top round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box'");
style.background = "50px 60px / 50px round fixed border-box";
shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 60px / 50px border-box border-box'");
style.background = "50px / 50px round fixed border-box";
shouldBe("style.background", "'50px center / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 50% / 50px border-box border-box'");
style.background = "left top 60px / 50px round fixed border-box";
shouldBe("style.background", "'left top 60px / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 0% top 60px / 50px border-box border-box'");
style.background = "left -20px top 60px / 50px round fixed border-box";
shouldBe("style.background", "'left -20px top 60px / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left -20px top 60px / 50px border-box border-box'");
style.background = "border-box left 20px top / 50px round fixed";
shouldBe("style.background", "'left 20px top / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px 0% / 50px border-box border-box'");
style.background = "border-box round fixed left 20px top / 50px";
shouldBe("style.background", "'left 20px top / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px 0% / 50px border-box border-box'");
style.background = "border-box round fixed left 20px top 40px / 50px";
shouldBe("style.background", "'left 20px top 40px / 50px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / 50px border-box border-box'");
style.background = "border-box round fixed left 20px top 40px";
shouldBe("style.background", "'left 20px top 40px round fixed border-box border-box'");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / auto border-box border-box'");
style.background = "top 10% left 30% gray round fixed border-box";
shouldBe("style.background", "'left 30% top 10% round fixed border-box border-box gray'");
shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box'");
debug("background-position inside the background shorthand, some invalid cases, no changes expected");
style.background = "";
style.background = "top 10% left 30% 50% gray round fixed border-box";
shouldBe("style.background", "''");
// This is the default computed style.
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "top 10% solid 30% gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "top 10% left round gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "top 10% top 30% gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "center center center / 10em gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "center center 30px / 10em gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "top center left / 10em gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "50% left / 10em gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "solid / 10em gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "top 10% left 20px 50% 50px gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "20px 20px 30px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "20px 20px 30px 60px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
style.background = "20px 20px 30px / 40px gray top left round fixed border-box";
shouldBe("style.background", "''");
shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
document.body.removeChild(testContainer);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>