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

description("Test to make sure border-image-slice is correctly parsed.")

var testContainer = document.createElement("div");
document.body.appendChild(testContainer);

testContainer.innerHTML = '<div style="width:100px;height:100px"><div id="test">hello</div></div>';

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

var testValues = [ "10", "30%", "10 10", "10 30%", "30% 30%", "10 10 10", "30% 10 10", "10 30% 10", "30% 30% 30% 10", "10 10 10 10", "30% 30% 30% 10", "30% 30% 30% 30%", "fill 30%", "fill 10", "fill 2 4 8% 16%", "30% fill", "10 fill", "2 4 8% 16% fill", "10 fill 10", "solid", "fill fill" ];

var expectedValues = [ "'10'", "'30%'", "'10'", "'10 30%'", "'30%'", "'10'", "'30% 10 10'", "'10 30%'", "'30% 30% 30% 10'", "'10'", "'30% 30% 30% 10'", "'30%'", "'30% fill'", "'10 fill'", "'2 4 8% 16% fill'", "'30% fill'", "'10 fill'", "'2 4 8% 16% fill'", "'100%'", "'100%'", "'100%'" ];

for (i = 0; i < testValues.length; i++) {
    e.style.borderImageSlice = "";
    e.style.borderImageSlice = testValues[i];
    shouldBe("computedStyle.getPropertyValue('border-image-slice')", expectedValues[i]);
    shouldBe("computedStyle.getPropertyCSSValue('border-image-slice').cssText", expectedValues[i]);
}
document.body.removeChild(testContainer);

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>