Google Git
Sign in
webkit / WebKit / 896f2e1627ae91d975ee73fd9010259c3dd716cd / . / LayoutTests / fast / borders / border-image-legacy.html
blob: c76c570a4f61c7bb18eab27cbfefdac6241b54ad [file] [log] [blame]
<!DOCTYPE html>
<style>
#target {
border: 1px solid;
}
</style>
<div id="target"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
const target = document.getElementById("target");
const style = target.style;
const cs = getComputedStyle(target);
test(() => {
style.cssText = "border-image: url(\"\");";
assert_equals(style.cssText, "border-image: url(\"\");", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "initial", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "initial", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\")", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\")", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "100%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "1", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 100% / 1 / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 100% / 1 / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "border-image: url(\"\")");
test(() => {
style.cssText = "-webkit-border-image: url(\"\");";
assert_equals(style.cssText, "border-image: url(\"\");", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "initial", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "initial", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\")", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\")", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "100%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "1", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 100% / 1 / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 100% / 1 / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "-webkit-border-image: url(\"\")");
test(() => {
style.cssText = "border-image: url(\"\") 50%;";
assert_equals(style.cssText, "border-image: url(\"\") 50%;", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50%", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "initial", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50%", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50%", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "1", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% / 1 / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% / 1 / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "border-image: url(\"\") 50%");
test(() => {
style.cssText = "-webkit-border-image: url(\"\") 50%;";
assert_equals(style.cssText, "border-image: url(\"\") 50% fill;", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50% fill", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "initial", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50% fill", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50% fill", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50% fill", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "1", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% fill / 1 / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% fill / 1 / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "-webkit-border-image: url(\"\") 50%");
test(() => {
style.cssText = "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) auto;";
assert_equals(style.cssText, "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) auto;", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50%", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "11 22% calc(33% + 33px) auto", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) auto", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) auto", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "11 22% calc(33% + 33px) auto", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) auto / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) auto / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) auto");
test(() => {
style.cssText = "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) calc(22px * 2);";
assert_equals(style.cssText, "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) calc(44px);", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50%", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "11 22% calc(33% + 33px) calc(44px)", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) calc(44px)", "Specified border-image");
assert_equals(style.webkitBorderImage, "", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "11 22% calc(33% + 33px) 44px", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% / 11 22% calc(33% + 33px) 44px / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "border-image: url(\"\") 50% / 11 22% calc(33% + 33px) calc(22px * 2)");
test(() => {
style.cssText = "-webkit-border-image: url(\"\") 50% / 11 22% calc(33% + 33px) calc(22px * 2);";
assert_equals(style.cssText, "-webkit-border-image: url(\"\") 50% fill / 11 22% calc(33% + 33px) calc(44px);", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50% fill", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50% fill / 11 22% calc(33% + 33px) calc(44px)", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50% fill", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% fill / 11 22% calc(33% + 33px) 44px / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px 1px 1px 44px", "Computed border-width");
}, "-webkit-border-image: url(\"\") 50% fill / 11 22% calc(33% + 33px) calc(22px * 2)");
test(() => {
style.cssText = "border-image: url(\"\") 50% / 11px 22px 33px 44px;";
assert_equals(style.cssText, "border-image: url(\"\") 50% / 11px 22px 33px 44px;", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50%", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "11px 22px 33px 44px", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50% / 11px 22px 33px 44px", "Specified border-image");
assert_equals(style.webkitBorderImage, "", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "11px 22px 33px 44px", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% / 11px 22px 33px 44px / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "border-image: url(\"\") 50% / 11px 22px 33px 44px");
test(() => {
style.cssText = "-webkit-border-image: url(\"\") 50% / 11px 22px 33px 44px;";
assert_equals(style.cssText, "-webkit-border-image: url(\"\") 50% fill / 11px 22px 33px 44px;", "cssText");
assert_array_equals([...style], ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "url(\"\")", "Specified border-image-source");
assert_equals(style.borderImageSlice, "50% fill", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "", "Specified border-image-width");
assert_equals(style.borderImageOutset, "initial", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "initial", "Specified border-image-repeat");
assert_equals(style.borderImage, "", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50% fill / 11px 22px 33px 44px", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50% fill", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% fill / 11px 22px 33px 44px / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "11px 22px 33px 44px", "Computed border-width");
}, "-webkit-border-image: url(\"\") 50% fill / 11px 22px 33px 44px");
test(() => {
style.cssText = "--v: 50px; border-image: url(\"\") 50% / var(--v);";
assert_equals(style.cssText, "--v: 50px; border-image: url(\"\") 50% / var(--v);", "cssText");
assert_array_equals([...style], ["--v", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "", "Specified border-image-source");
assert_equals(style.borderImageSlice, "", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "", "Specified border-image-width");
assert_equals(style.borderImageOutset, "", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "", "Specified border-image-repeat");
assert_equals(style.borderImage, "url(\"\") 50% / var(--v)", "Specified border-image");
assert_equals(style.webkitBorderImage, "", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50%", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "50px", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "url(\"\") 50% / 50px / 0 stretch", "Computed border-image");
assert_equals(cs.webkitBorderImage, "", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "1px", "Computed border-width");
}, "--v: 50px; border-image: url(\"\") 50% / var(--v)");
test(() => {
style.cssText = "--v: 50px; -webkit-border-image: url(\"\") 50% / var(--v);";
assert_equals(style.cssText, "--v: 50px; -webkit-border-image: url(\"\") 50% / var(--v);", "cssText");
assert_array_equals([...style], ["--v", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"]);
assert_equals(style.borderImageSource, "", "Specified border-image-source");
assert_equals(style.borderImageSlice, "", "Specified border-image-slice");
assert_equals(style.borderImageWidth, "", "Specified border-image-width");
assert_equals(style.borderImageOutset, "", "Specified border-image-outset");
assert_equals(style.borderImageRepeat, "", "Specified border-image-repeat");
assert_equals(style.borderImage, "", "Specified border-image");
assert_equals(style.webkitBorderImage, "url(\"\") 50% / var(--v)", "Specified -webkit-border-image");
assert_equals(cs.borderImageSource, "url(\"\")", "Computed border-image-source");
assert_equals(cs.borderImageSlice, "50% fill", "Computed border-image-slice");
assert_equals(cs.borderImageWidth, "", "Computed border-image-width");
assert_equals(cs.borderImageOutset, "0", "Computed border-image-outset");
assert_equals(cs.borderImageRepeat, "stretch", "Computed border-image-repeat");
assert_equals(cs.borderImage, "", "Computed border-image");
assert_equals(cs.webkitBorderImage, "url(\"\") 50% fill / 50px / 0 stretch", "Computed -webkit-border-image");
assert_equals(cs.borderWidth, "50px", "Computed border-width");
}, "--v: 50px; -webkit-border-image: url(\"\") 50% / var(--v)");
</script>