third_party/blink/web_tests/fast/backgrounds/background-shorthand-with-backgroundSize-style.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
 <script src="../../resources/js-test.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';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") center center / cover no-repeat border-box border-box red');
 shouldBeEqualToString("e.style.backgroundSize", 'cover');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50% 50% / cover border-box border-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cover');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")

 e.style.background = 'red 20px / contain url("dummy://test.png") no-repeat padding-box';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px center / contain no-repeat padding-box padding-box red');
 shouldBeEqualToString("e.style.backgroundSize", 'contain');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box padding-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'contain');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")

 e.style.background = 'red url("dummy://test.png") 50px 60px / 50% 75% no-repeat';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red');
 shouldBeEqualToString("e.style.backgroundSize", '50% 75%');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50px 60px / 50% 75% padding-box border-box');
 shouldBeEqualToString('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';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px 200px repeat border-box content-box red');
 shouldBeEqualToString("e.style.backgroundSize", '100px 200px');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box content-box');
 shouldBeEqualToString('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';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat content-box padding-box red');
 shouldBeEqualToString("e.style.backgroundSize", 'auto');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")

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

 e.style.background = '50% / auto fixed url("dummy://test.png") repeat content-box red';
 shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat fixed content-box content-box red');
 shouldBeEqualToString("e.style.backgroundSize", 'auto');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")

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

 e.style.background = "red fixed";
 shouldBeEqualToString("e.style.background", 'fixed red');
 shouldBeEqualToString("e.style.backgroundSize", 'initial');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")

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

 e.style.background = "";
 e.style.background = 'red url("dummy://test.png") repeat 25px / contain contain';
 shouldBeEqualToString("e.style.background", '');
 shouldBeEqualToString("e.style.backgroundSize", '');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
 shouldBeEqualToString('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';
 shouldBeEqualToString("e.style.background", '');
 shouldBeEqualToString("e.style.backgroundSize", '');
 shouldBe("checkStyle()", "true");
 shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
 shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
 shouldBe("checkComputedStyleValue()", "true");
 debug("")
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<script src="../../resources/js-test.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';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") center center / cover no-repeat border-box border-box red');
	shouldBeEqualToString("e.style.backgroundSize", 'cover');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50% 50% / cover border-box border-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'cover');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")

	e.style.background = 'red 20px / contain url("dummy://test.png") no-repeat padding-box';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 20px center / contain no-repeat padding-box padding-box red');
	shouldBeEqualToString("e.style.backgroundSize", 'contain');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 20px 50% / contain padding-box padding-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'contain');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")

	e.style.background = 'red url("dummy://test.png") 50px 60px / 50% 75% no-repeat';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50px 60px / 50% 75% no-repeat red');
	shouldBeEqualToString("e.style.backgroundSize", '50% 75%');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") no-repeat scroll 50px 60px / 50% 75% padding-box border-box');
	shouldBeEqualToString('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';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") left top / 100px 200px repeat border-box content-box red');
	shouldBeEqualToString("e.style.backgroundSize", '100px 200px');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 0% 0% / 100px 200px border-box content-box');
	shouldBeEqualToString('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';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat content-box padding-box red');
	shouldBeEqualToString("e.style.backgroundSize", 'auto');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat scroll 50% 50% / auto content-box padding-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")

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

	e.style.background = '50% / auto fixed url("dummy://test.png") repeat content-box red';
	shouldBeEqualToString("e.style.background", 'url("dummy://test.png") 50% center / auto repeat fixed content-box content-box red');
	shouldBeEqualToString("e.style.backgroundSize", 'auto');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) url("dummy://test.png") repeat fixed 50% 50% / auto content-box content-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")

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

	e.style.background = "red fixed";
	shouldBeEqualToString("e.style.background", 'fixed red');
	shouldBeEqualToString("e.style.backgroundSize", 'initial');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgb(255, 0, 0) none repeat fixed 0% 0% / auto padding-box border-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")

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

	e.style.background = "";
	e.style.background = 'red url("dummy://test.png") repeat 25px / contain contain';
	shouldBeEqualToString("e.style.background", '');
	shouldBeEqualToString("e.style.backgroundSize", '');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
	shouldBeEqualToString('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';
	shouldBeEqualToString("e.style.background", '');
	shouldBeEqualToString("e.style.backgroundSize", '');
	shouldBe("checkStyle()", "true");
	shouldBeEqualToString('computedStyle.getPropertyValue("background")', 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box');
	shouldBeEqualToString('computedStyle.getPropertyValue("background-size")', 'auto');
	shouldBe("checkComputedStyleValue()", "true");
	debug("")
	</script>
	</body>
	</html>