Bug 1290782 Part 3 - Add test cases for using an SVG image as border-image. r?dholbert,cjku
MozReview-Commit-ID: 4w3tEkVAMWd
--- a/layout/reftests/border-image/reftest.list
+++ b/layout/reftests/border-image/reftest.list
@@ -82,11 +82,12 @@ fuzzy(1,1054) fails-if(OSX) fuzzy-if(ski
# border-image-source (-moz-)element
fuzzy(125,5808) == border-image-element.html border-image-element-ref.html
# svg-as-border-image
== svg-as-border-image-1a.html svg-as-border-image-1-ref.html
== svg-as-border-image-1b.html svg-as-border-image-1-ref.html
== svg-as-border-image-1c.html svg-as-border-image-1-ref.html
-fails-if(webrender) == svg-as-border-image-2.html svg-as-border-image-2-ref.html # see bug 1151016. The svg viewport size may be wrong
+== svg-as-border-image-2.html svg-as-border-image-2-ref.html
== svg-as-border-image-3.html svg-as-border-image-3-ref.html
-== svg-as-border-image-4.html svg-as-border-image-4-ref.html
+== svg-as-border-image-4a.html svg-as-border-image-4-ref.html
+== svg-as-border-image-4b.html svg-as-border-image-4-ref.html
--- a/layout/reftests/border-image/svg-as-border-image-4-ref.html
+++ b/layout/reftests/border-image/svg-as-border-image-4-ref.html
@@ -3,16 +3,22 @@
<title>reference of svg-as-border-image</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
margin: 30px;
border-width: 30px;
border-style: solid;
+}
+#border5p {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
}
+#border25p {
+ border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch;
+}
</style>
</head>
<body>
-<div></div>
+<div id="border5p"></div>
+<div id="border25p"></div>
</body>
</html>
rename from layout/reftests/border-image/svg-as-border-image-4.html
rename to layout/reftests/border-image/svg-as-border-image-4a.html
--- a/layout/reftests/border-image/svg-as-border-image-4.html
+++ b/layout/reftests/border-image/svg-as-border-image-4a.html
@@ -3,24 +3,31 @@
<title>test of svg-as-border-image</title>
<style type="text/css">
div {
width: 400px;
height: 100px;
margin: 30px;
border-width: 30px;
border-style: solid;
+}
+#border5p {
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
}
+#border25p {
+ border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch;
+}
</style>
<script>
function resizeDiv() {
- document.getElementById('borderdiv').style.width = '100px';
+ document.getElementById('border5p').style.width = '100px';
+ document.getElementById('border25p').style.width = '100px';
document.documentElement.removeAttribute('class');
}
document.addEventListener('MozReftestInvalidate', resizeDiv);
</script>
</head>
<body>
-<div id="borderdiv"></div>
+<div id="border5p"></div>
+<div id="border25p"></div>
</body>
</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4b.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<title>test of svg-as-border-image</title>
+<style type="text/css">
+div {
+ width: 100px;
+ height: 100px;
+ margin: 30px;
+ border-width: 30px;
+ border-style: solid;
+ transform: translate(100px, 200px);
+}
+#border5p {
+ border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+#border25p {
+ border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 25% stretch;
+}
+</style>
+</head>
+<body style="transform: translate(-100px, -200px);">
+<div id="border5p"></div>
+<div id="border25p"></div>
+</body>
+</html>