Bug 885939 (Part 2) - Add reftests for SVG image stretching and scaling. r=dholbert
authorSeth Fowler <seth@mozilla.com>
Tue, 16 Jul 2013 15:41:33 -0400
changeset 138749 de46c9ce71ef6291d80f0472cc0f88ff5483c091
parent 138748 7c49f7bbd12928b570674d4960ae8d883c39b8d6
child 138750 c2f1cc4b2a418a83c4c21bb446313bc82952bfbe
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersdholbert
bugs885939
milestone25.0a1
Bug 885939 (Part 2) - Add reftests for SVG image stretching and scaling. r=dholbert
layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
layout/reftests/svg/as-image/background-stretch-1-ref.html
layout/reftests/svg/as-image/background-stretch-1.html
layout/reftests/svg/as-image/reftest.list
layout/reftests/svg/as-image/white-rect-no-viewbox.svg
layout/reftests/svg/as-image/white-rect-with-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: white;
+      width: 12px;
+      height: 60px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      background-image: url("white-rect-no-viewbox.svg");
+      width: 6px;
+      height: 30px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: white;
+      width: 12px;
+      height: 60px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      background-image: url("white-rect-with-viewbox.svg");
+      width: 6px;
+      height: 30px;
+    }
+    body {
+      background-color: black;
+      margin:  0px;
+      padding: 0px;
+      border:  0px;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      background-color: yellow;
+      height: 30px;
+    }
+    .container {
+      width: 100px;
+    }
+    .stretch {
+      width: 40px;
+      background-color: white;
+      display: inline-block;
+    }
+    .left-spacer {
+      width: 30px;
+      float: left;
+    }
+    .right-spacer {
+      width: 30px;
+      float: right;
+    }
+    body {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="left-spacer"></div>
+    <div class="stretch"></div>
+    <div class="right-spacer"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    div {
+      height: 30px;
+      width: 100px;
+      background-image: url("white-rect-with-viewbox.svg");
+      background-repeat: no-repeat;
+      background-position: 30px;
+      background-size: 40px 30px;
+      background-color: yellow;
+    }
+    body {
+      background-color: black;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
--- a/layout/reftests/svg/as-image/reftest.list
+++ b/layout/reftests/svg/as-image/reftest.list
@@ -11,16 +11,23 @@ skip-if(B2G) == background-simple-1.html
 == background-viewBox-1.html  lime100x100-ref.html
 
 # background tests with the background area getting resized
 == background-resize-1.html  lime100x100-ref.html
 == background-resize-2.html  lime100x100-ref.html
 == background-resize-3.html  lime100x100-ref.html
 == background-resize-4.html  lime100x100-ref.html
 
+# Test for stretching background images by different amounts in each dimension
+== background-stretch-1.html background-stretch-1-ref.html
+
+# Tests for scaling background images
+== background-scale-no-viewbox-1.html   background-scale-no-viewbox-1-ref.html
+== background-scale-with-viewbox-1.html background-scale-with-viewbox-1-ref.html
+
 # Tests with -moz-image-rect()
 skip-if(B2G) == background-image-rect-1svg.html  lime100x100-ref.html # bug 773482
 == background-image-rect-1png.html  lime100x100-ref.html
 == background-image-rect-2.html     lime100x100-ref.html
 
 # Test for border-image
 == border-image-simple-1.html       lime100x100-ref.html
 == border-image-simple-2.html       lime100x100-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+	   
+  <rect width="6" height="30" style="fill:white;" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="6px"
+     height="30px"
+     viewBox="0 0 6 30">
+	   
+  <rect width="6" height="30" style="fill:white;" />
+</svg>