<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div id="testElement">test</div>
<script>
description("Test the style.length of an element with a border-image.")
debug("border-image");
testElement.style.borderImage = "url(dummy://test.png) 10 / 13px 1.5em 1em 10px";
shouldBe("testElement.style.length", "5");
testElement.style.borderImage = "initial";
shouldBe("testElement.style.length", "5");
testElement.style.borderImage = "inherit";
shouldBe("testElement.style.length", "5");
testElement.style.borderImage = "";
shouldBe("testElement.style.length", "0");
debug("-webkit-border-image");
testElement.style.webkitBorderImage = "url(dummy://test.png) 0 7 0 13 / 0 7 0 13 stretch stretch";
shouldBe("testElement.style.length", "1");
testElement.style.webkitBorderImage = "initial";
shouldBe("testElement.style.length", "1");
testElement.style.webkitBorderImage = "inherit";
shouldBe("testElement.style.length", "1");
testElement.style.webkitBorderImage = "";
shouldBe("testElement.style.length", "0");
// -webkit-mask-box-image behaves exactly like border-image in terms of CSS syntax.
debug("-webkit-mask-box-image");
testElement.style.webkitMaskBoxImage = "url(dummy://test.png) 0 7 0 13 / 0 7 0 13 stretch stretch";
shouldBe("testElement.style.length", "5");
testElement.style.webkitMaskBoxImage = "initial";
shouldBe("testElement.style.length", "5");
testElement.style.webkitMaskBoxImage = "inherit";
shouldBe("testElement.style.length", "5");
testElement.style.webkitMaskBoxImage = "";
shouldBe("testElement.style.length", "0");
document.body.removeChild(testElement);
</script>
</body>
</html>