1 files changed, 39 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/transform/translate-clipPath-1.svg b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg
new file mode 100644
index 0000000000..80291076cd
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function doTest() {
+      setTimeAndSnapshot(101, false);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+  <defs>
+    <clipPath id="clip">
+      <rect x="0" y="0" width="50" height="100%"/>
+      <animateTransform attributeName="transform" type="translate" begin="100s" dur="1s"
+		        from="0 0" to="-50 0" fill="freeze"/>
+    </clipPath>
+  </defs>
+
+  <!-- Test 1: Lime background covered by clipped red block.
+       After the animation, the clipping path doesn't intersecting the red
+       block at all, so no red is shown. -->
+  <rect x="0" width="50" height="100%" fill="lime" />
+  <rect x="0" width="50" height="100%" fill="red"
+        style="clip-path: url(#clip);"/>
+
+  <!-- Test 2: Purple background covered by clipped lime block.
+       Initially, the clipping path is to the right of the lime, so the purple
+       background shows through.  But after the animation, the clipping path
+       exactly matches the dimensions of the lime block, which lets it
+       completly cover all the purple. -->
+  <g transform="translate(100, 0)">
+    <rect x="-50" y="0" width="50" height="100%" fill="purple"/>
+    <rect x="-50" y="0" width="50" height="100%" fill="lime"
+        style="clip-path: url(#clip);"/>
+  </g>
+
+  <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+  <rect x="100" height="100%" width="100%" fill="lime"/>
+</svg>