88 lines
5.8 KiB
HTML
88 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<p>Test computed style for the border-image property and sub-properties</p>
|
|
<div id="console"></div>
|
|
<script>
|
|
|
|
var testDiv = document.createElement('div');
|
|
testDiv.style.borderWidth = '10px';
|
|
document.body.appendChild(testDiv);
|
|
|
|
function computedBorderImageStyle(borderImageStyle, property) {
|
|
testDiv.style.borderImage = 'none';
|
|
testDiv.style.borderImage = borderImageStyle;
|
|
return window.getComputedStyle(testDiv).getPropertyValue(property);
|
|
}
|
|
|
|
function checkComputedStyleValue() {
|
|
var before = window.getComputedStyle(testDiv).getPropertyValue('border-image');
|
|
testDiv.style.borderImage = 'none';
|
|
testDiv.style.borderImage = before;
|
|
return (window.getComputedStyle(testDiv).getPropertyValue('border-image') == before);
|
|
}
|
|
|
|
shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image-slice')", "'12 11'");
|
|
shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image')", "'none'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 12 11 repeat stretch', 'border-image-slice')", "'12 11'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 12 11 repeat stretch', 'border-image')", "'url(\"dummy://test.png\") 12 11 / 1 / 0 repeat stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 1 2 3 4 repeat stretch', 'border-image-slice')", "'1 2 3 4'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 1 2 3 4 repeat stretch', 'border-image')", "'url(\"dummy://test.png\") 1 2 3 4 / 1 / 0 repeat stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 12 repeat stretch', 'border-image-slice')", "'12'");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 10 5 5 repeat stretch', 'border-image-slice')", "'10 10 5 5'");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 a b c repeat stretch', 'border-image-slice')", "'100%'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 a b c repeat stretch', 'border-image')", "'none'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 20 fill', 'border-image-slice')", "'10 20 fill'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 20 fill', 'border-image')", "'url(\"dummy://test.png\") 10 20 fill / 1 / 0 stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat stretch', 'border-image-source')", "'url(\"dummy://test.png\")'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat stretch', 'border-image')", "'url(\"dummy://test.png\") 10 / 1 / 0 repeat stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10', 'border-image-repeat')", "'stretch'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10', 'border-image')", "'url(\"dummy://test.png\") 10 / 1 / 0 stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 stretch', 'border-image-repeat')", "'stretch'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch', 'border-image')", "'url(\"dummy://test.png\") 10 / 1 / 0 stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 kittens', 'border-image-repeat')", "'stretch'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 kittens', 'border-image')", "'none'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 stretch stretch fill', 'border-image-repeat')", "'stretch'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch stretch fill', 'border-image')", "'none'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 repeat stretch', 'border-image-repeat')", "'repeat stretch'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 repeat stretch', 'border-image')", "'url(\"dummy://test.png\") 10 / 1 / 0 repeat stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 round space', 'border-image-repeat')", "'round space'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 round space', 'border-image')", "'url(\"dummy://test.png\") 10 / 1 / 0 round space'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px 1.5em 1em 10px', 'border-image-width')", "'13px 24px 16px 10px'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px 1.5em 1em 10px', 'border-image')", "'url(\"dummy://test.png\") 10 / 13px 24px 16px 10px / 0 stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 / 14px 10%', 'border-image-width')", "'14px 10%'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 14px 10%', 'border-image')", "'url(\"dummy://test.png\") 10 / 14px 10% / 0 stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px', 'border-image-outset')", "'11px'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px', 'border-image')", "'url(\"dummy://test.png\") 10 / 13px / 11px stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
|
|
shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px repeat stretch', 'border-image-outset')", "'11px'");
|
|
shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px repeat stretch', 'border-image')", "'url(\"dummy://test.png\") 10 / 13px / 11px repeat stretch'");
|
|
shouldBe("checkComputedStyleValue()", "true");
|
|
|
|
</script>
|
|
<script src="../../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|