1 files changed, 52 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
new file mode 100644
index 0000000000..7f6fcc7cf5
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+  <!-- Tests for rotate="auto" and "auto-reverse" -->
+  <!-- The idea here is to create positioned red "holes" in the lime
+       background, and then hopefully use paused <animateMotion> elements to
+       position other elements exactly on top of the hole. -->
+  <style>
+    .background { fill:  lime   }
+    .hole       { color: red    }
+    .testBegin  { color: purple }
+    .testEnd    { color: orange }
+    .mask       { color: lime   }
+  </style>
+  <defs>
+    <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->
+    <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in
+         SVG when redrawing the same non-pixel-aligned shape on top of itself
+         in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the
+         maximum distance from a path that antialiasing of square pixels can
+         cause the path to affect. -->
+    <path id="marker" d="m0,0 l-10,-30  c-5,-20 25,-20 20,0 z"
+          style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>
+  </defs>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(101, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <!-- Big green background to match lime.svg -->
+  <rect class="background" width="100%" height="100%" />
+  <g transform="translate(50,50)">
+    <!-- Here's the hole -->
+    <use xlink:href="#marker" class="hole"
+         transform="translate(20,20) rotate(45)"/>
+
+    <!-- And here's a stack of elements animated with 'animateMotion' that
+         should end up there. -->
+    <use xlink:href="#marker" class="testBegin">
+      <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>
+    </use>
+    <use xlink:href="#marker" class="testEnd">
+      <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>
+    </use>
+    <use xlink:href="#marker" class="mask">
+      <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>
+    </use>
+  </g>
+</svg>