Add m-esr52 at 52.6.0

21 files changed, 767 insertions, 0 deletions

diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-1.svg b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
new file mode 100644
index 000000000..072947735
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
@@ -0,0 +1,53 @@
+<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 type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(101, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <!-- Big green background to match lime.svg -->
+  <rect width="100%" height="100%" fill="lime"/>
+  <!-- Red "workspaces" (should be covered up, if tests pass) -->
+  <rect x="100" y="100" width="100" height="100" fill="red"/>
+  <rect x="100" y="300" width="100" height="100" fill="red"/>
+
+  <!-- FIRST ROW -->
+  <!-- Check that 'by' works at all -->
+  <rect fill="lime" x="0" y="0" width="50" height="50">
+    <animateMotion by="100, 100" begin="100" dur="1" fill="freeze"/>
+  </rect>
+
+  <!-- Check that 'by' is additive w/ 'by' -->
+  <rect fill="lime" x="50" y="50" width="50" height="50">
+    <animateMotion by="60, 75" begin="100" dur="1" fill="freeze"/>
+    <animateMotion by="40, -25" begin="100" dur="1" fill="freeze"/>
+  </rect>
+
+  <!-- SECOND ROW -->
+  <!-- Check that 'by' is additive w/ 'to' -->
+  <rect fill="lime" width="50" height="50">
+    <animateMotion to="50,100" begin="100" dur="1" fill="freeze"/>
+    <animateMotion by="50, 50" begin="100" dur="1" fill="freeze"/>
+  </rect>
+
+  <!-- Check that 'from-to' replaces 'by' -->
+  <rect fill="lime" width="50" height="50">
+    <animateMotion by="500, 500" begin="100" dur="1" fill="freeze"/>
+    <animateMotion from="300,300" to="150,150" begin="100" dur="1" fill="freeze"/>
+  </rect>
+
+  <!-- Other tags -->
+  <foreignObject id="fo" x="0" y="0" width="100" height="50">
+    <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background-color:lime"/>
+  </foreignObject>
+  <animateMotion xlink:href="#fo" by="100, 300" begin="100" dur="1" fill="freeze"/>
+
+  <svg x="0" y="50" width="100" height="50">
+    <rect width="100" height="50" fill="lime"/>
+    <animateMotion by="100, 300" begin="100" dur="1" fill="freeze"/>
+  </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-2.svg b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
new file mode 100644
index 000000000..9502828c3
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait" transform="translate(100,0)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(101, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <animateMotion by="-100, 0" begin="100" dur="1" fill="freeze"/>
+
+  <!-- Big green background to match lime.svg -->
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
new file mode 100644
index 000000000..cf3a55523
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
@@ -0,0 +1,26 @@
+  <svg xmlns="http://www.w3.org/2000/svg"

+    xmlns:xlink="http://www.w3.org/1999/xlink"

+    width="100%" height="100%" viewBox="0 0 45 45" preserveAspectRatio="none"

+    class="reftest-wait">

+    <!--

+      Bug 946540. Test that motion paths with inflection points that both lie

+      outside of (0, 1) are flattened correctly.

+

+      We have a lime background and move a red square along a motion path. If

+      the path is not flattened correctly the red square will get stuck at the

+      point where it covers the viewport.

+     -->

+    <script xlink:href="../smil-util.js"/>

+    <script>

+      window.addEventListener("MozReftestInvalidate", function() {

+        setTimeAndSnapshot(110, true);

+      }, false);

+    </script>

+    <!-- Lime background -->

+    <rect width="100%" height="100%" fill="lime"/>

+    <!-- Animated square -->

+    <rect x="-25" y="-25" width="50" height="50" fill="red">

+      <animateMotion calcMode="paced" begin="100s" dur="1s" fill="freeze"

+        path="m0-32c0 25 10 46 22 56 34 28 75 35 102 38"/>

+    </rect>

+  </svg>

diff --git a/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
new file mode 100644
index 000000000..065ee36b1
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
@@ -0,0 +1,44 @@
+<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 type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(101, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <!-- Big green background to match lime.svg -->
+  <rect width="100%" height="100%" fill="lime"/>
+  <!-- Red "workspace" (should be covered up, if tests pass) -->
+  <rect x="100" y="100" width="100" height="100" fill="red"/>
+
+  <!-- FIRST ROW -->
+  <!-- Check that 'from' gets applied at begin time -->
+  <rect fill="lime" x="0" y="0" width="50" height="50">
+    <animateMotion from="100, 100" to="500, 500" begin="101" dur="1"/>
+  </rect>
+
+  <!-- Check that 'to' gets hit at end time -->
+  <rect fill="lime" x="0" y="0" width="50" height="50">
+    <animateMotion from="200,200" to="150,100" begin="100" dur="1" fill="freeze"/>
+  </rect>
+
+  <!-- SECOND ROW -->
+  <!-- Check that animation effects are removed after end time
+       (note that fill="remove" is default; just specifying it for clarity -->
+  <rect fill="lime" x="100" y="150" width="50" height="50">
+    <animateMotion from="500,500" to="600,600" begin="1000" dur="1" fill="remove"/>
+  </rect>
+  <rect fill="purple" x="-25" y="-25" width="25" height="25">
+    <!-- With the purple rect's x/y offsets, this animateMotion path moves us
+         around the 2nd row, 1st col -->
+    <animateMotion from="125,175" to="150,175" begin="100" dur="1" fill="remove"/>
+  </rect>
+
+  <!-- Check interpolation halfway through animation -->
+  <rect fill="lime" width="50" height="50">
+    <animateMotion from="200,100" to="100,200" begin="100.5" dur="1"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
new file mode 100644
index 000000000..12c62da2c
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- Test that an indefinite to-animation just sticks to the base value for
+       animateMotion. -->
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <rect x="15" y="15" width="100" height="100" fill="red"/>
+  <rect x="15" y="15" width="100" height="100" fill="lime">
+    <animateMotion to="500,500" dur="indefinite"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
new file mode 100644
index 000000000..82f5a61a0
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- Test that an indefinite to-animation with discrete calcMode applies
+       the underlying value for the whole time. -->
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <rect x="15" y="15" width="100" height="100" fill="red"/>
+  <rect x="15" y="15" width="100" height="100" fill="lime">
+    <animateMotion to="500,500" dur="indefinite"
+                   calcMode="discrete"/>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
new file mode 100644
index 000000000..ffb991c1a
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+  <title>Test that pathLength of paths has no effect in animation</title>
+  <defs>
+    <path id="path" pathLength="100" d="M0,0 h400" />
+  </defs>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(100.5, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <!-- calcMode="linear" -->
+  <rect x="10" y="10" width="100" height="100" fill="red"/>
+  <rect x="-190" y="10" width="100" height="100" fill="lime">
+    <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+      <mpath xlink:href="#path" />
+    </animateMotion>
+  </rect>
+
+  <!-- calcMode="paced" -->
+  <rect x="10" y="110" width="100" height="100" fill="red"/>
+  <rect x="-190" y="110" width="100" height="100" fill="lime">
+    <animateMotion begin="100s" dur="1s">
+      <mpath xlink:href="#path" />
+    </animateMotion>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
new file mode 100644
index 000000000..c8f5919b7
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Test that 'transform' on the &lt;mpath&gt; target has no affect</title>
+  <defs>
+    <path id="path" d="M0,0 L100,100" transform="translate(100,0)"/>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+  <rect x="10" y="10" width="100" height="100" fill="red"/>
+  <rect x="10" y="10" width="100" height="100" fill="lime">
+    <animateMotion dur="indefinite">
+      <mpath xlink:href="#path"/>
+    </animateMotion>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
new file mode 100644
index 000000000..b2a408ca6
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+  <style>
+    .background { fill: lime }
+    .workspace  { fill: red  }
+    .test       { fill: lime }
+  </style>
+  <defs>
+    <!-- 'Dummy' path -->
+    <path id="moveFarAway"      d="M300,300 h0"/>
+
+    <path id="moveToUpperLeft"  d="M100,100 h0"/>
+
+    <path id="pathWhoseDAttrChanges" d="M360,360 h0"/>
+
+    <!-- The first of these two elems w/ same ID should be used. -->
+    <path id="moveToMiddleLeft"  d="M100,150 h0"/>
+    <path id="moveToMiddleLeft"  d="M350,350 h0"/>
+
+    <!-- The first of these two elems w/ same ID initially wins, but then
+         it gets removed via script. -->
+    <path id="moveToMiddleCenter" d="M340,340 h0"/>
+    <path id="moveToMiddleCenter" d="M150,150 h0"/>
+
+    <!-- This elem doesn't do what its id would suggest, but we'll use JS to
+         add an earlier elem with the same ID that *does* do what it says. -->
+    <path id="moveToMiddleRight" d="M330,330 h0"/>
+
+    <path id="moveToLowerLeft"   d="M100,200 h0"/>
+    <path id="moveToLowerCenter" d="M150,200 h0"/>
+
+  </defs>
+
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script type="text/javascript">
+    const SVGNS   = "http://www.w3.org/2000/svg";
+    const XLINKNS = "http://www.w3.org/1999/xlink";
+
+
+    function insertPathElem(aPathId, aPathSpec) {
+      var newPath = document.createElementNS(SVGNS, "path");
+      newPath.setAttribute("id", aPathId);
+      newPath.setAttribute("d",  aPathSpec);
+
+      // Insert new path into defs
+      var defsElem = document.getElementsByTagName("defs")[0];
+      defsElem.insertBefore(newPath, defsElem.firstChild);
+    }
+
+    function doTest() {
+      // Seek already, so we'll have sampled the initial 'stale' state
+      document.documentElement.setCurrentTime(1);
+
+      // Make tweaks
+      var mpathToModify = document.getElementById("modifyMyTarget");
+      mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft");
+
+      var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget");
+      mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href");
+
+      var pathToTweak = document.getElementById("pathWhoseDAttrChanges");
+      pathToTweak.setAttribute("d", "M200 100 h0");
+
+      var mpathToDelete = document.getElementById("removeMe");
+      mpathToDelete.parentNode.removeChild(mpathToDelete);
+
+      var pathToDelete = document.getElementById("moveToMiddleCenter");
+      pathToDelete.parentNode.removeChild(pathToDelete);
+
+      insertPathElem("moveToMiddleRight", "M200,150 h0");
+      insertPathElem("moveToLowerRight", "M200,200 h0");
+
+      setTimeAndSnapshot(1, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <!-- Big green background to match lime.svg -->
+  <rect class="background" width="100%" height="100%" />
+  <!-- Red "workspace" (should be covered up, if tests pass) -->
+  <rect class="workspace" x="100" y="100" width="150" height="150"/>
+
+  <!-- FIRST ROW: Test behavior... -->
+  <!-- ...when mpath's 'xlink:href' attr is modified. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath id="modifyMyTarget" xlink:href="#moveFarAway"/>
+    </animateMotion>
+  </rect>
+
+  <!-- ...when mpath's 'xlink:href' is unset.  -->
+  <rect class="test" x="150" y="100" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath id="unsetMyTarget" xlink:href="#moveFarAway"/>
+    </animateMotion>
+  </rect>
+
+  <!-- ...when the target-path's "d" attr is modified. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#pathWhoseDAttrChanges"/>
+    </animateMotion>
+  </rect>
+
+  <!-- SECOND ROW: Test behavior... -->
+  <!--  ...when there are two paths with same ID (first should win) -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#moveToMiddleLeft"/>
+    </animateMotion>
+  </rect>
+
+  <!--  ...when there are two paths with same ID, and the first is removed. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#moveToMiddleCenter"/>
+    </animateMotion>
+  </rect>
+
+  <!--  ...when an earlier path is added with our target ID. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#moveToMiddleRight"/>
+    </animateMotion>
+  </rect>
+
+  <!-- THIRD ROW: Test behavior... -->
+  <!--  ...when there are two mpath children (first should win). -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#moveToLowerLeft"/>
+      <mpath xlink:href="#moveFarAway"/>
+    </animateMotion>
+  </rect>
+
+  <!--  ...when there are two mpath children, and the first is removed. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath id="removeMe" xlink:href="#moveFarAway"/>
+      <mpath xlink:href="#moveToLowerCenter"/>
+    </animateMotion>
+  </rect>
+  <!--  ...when there's an mpath child that initially matches nothing, until
+        a node with the right ID is inserted into the DOM. -->
+  <rect class="test" x="0" y="0" width="50" height="50">
+    <animateMotion begin="1" dur="1" fill="freeze">
+      <mpath xlink:href="#moveToLowerRight"/>
+    </animateMotion>
+  </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
new file mode 100644
index 000000000..414a6c718
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+  <style>
+    .background { fill: lime }
+    .workspace  { fill: red  }
+    .test       { fill: lime }
+    .filler     { fill: lime }
+  </style>
+
+  <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%" />
+  <!-- Red "workspace" (should be covered up, if tests pass) -->
+  <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+  <!-- FIRST ROW -->
+  <!-- Check that 'rotate' gets applied at begin time -->
+  <g>
+    <animateMotion from="150, 100" to="500, 500" rotate="90"
+                   begin="101" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+  <!-- Check that 'rotate' gets applied at end time -->
+  <g>
+    <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100"
+                   dur="1" fill="freeze"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+  <!-- SECOND ROW -->
+  <!-- Check that rotate combines with existing rotate -->
+  <g transform="rotate(90)">
+    <animateMotion from="150,200" to="600,600" rotate="90"
+                   begin="101" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+  <!-- Check additivity of <animateMotion> "rotate" adds -->
+  <g>
+    <animateMotion from="100,100" to="100,200" rotate="90"
+                   begin="100.5" dur="1"/>
+    <animateMotion by="100,-200" rotate="90"
+                   begin="100.5" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
new file mode 100644
index 000000000..8c4287d33
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+  <style>
+    .background { fill: lime }
+    .workspace  { fill: red  }
+    .test       { fill: lime }
+    .filler     { fill: lime }
+  </style>
+
+  <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%" />
+  <!-- Red "workspace" (should be covered up, if tests pass) -->
+  <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+  <!-- FIRST ROW -->
+  <!-- Check that 'rotate' gets applied at begin time -->
+  <g>
+    <animateMotion from="150, 100" to="500, 500" rotate="100grad"
+                   begin="101" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+  <!-- Check that 'rotate' gets applied at end time -->
+  <g>
+    <animateMotion from="600, 700" to="200, 150" rotate="200grad" begin="100"
+                   dur="1" fill="freeze"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+  <!-- SECOND ROW -->
+  <!-- Check that rotate combines with existing rotate -->
+  <g transform="rotate(90)">
+    <animateMotion from="150,200" to="600,600" rotate="100grad"
+                   begin="101" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+  <!-- Check additivity of <animateMotion> "rotate" adds -->
+  <g>
+    <animateMotion from="100,100" to="100,200" rotate="100grad"
+                   begin="100.5" dur="1"/>
+    <animateMotion by="100,-200" rotate="100grad"
+                   begin="100.5" dur="1"/>
+    <rect class="test" x="0" y="0" width="20" height="50"/>
+    <rect class="test" x="0" y="0" width="50" height="20"/>
+  </g>
+  <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
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 000000000..7f6fcc7cf
--- /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>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
new file mode 100644
index 000000000..2c6179640
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
@@ -0,0 +1,61 @@
+<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 type="text/javascript">
+    function doTest() {
+      setTimeAndSnapshot(101, true);
+    }
+    window.addEventListener("MozReftestInvalidate", doTest, false);
+  </script>
+
+  <!-- Big green background to match lime.svg -->
+  <rect fill="lime" width="100%" height="100%" />
+
+  <!-- In the following pairs of rects, the only pairwise differences are the
+       fill-color and the presence of the "to" attribute on the animateMotion
+       element.  "to" shouldn't have any effect in these cases, since it has
+       lower priority than "values," "path," and "mpath". So in each case, the
+       lime rect should cover up the red rect at all times. -->
+
+  <!-- Single-point path specified with "values" attribute: -->
+  <g transform="translate(0,0)">
+    <rect width="20" height="20" fill="red">
+      <animateMotion values="20,0" dur="2" begin="100"/>
+    </rect>
+    <rect width="20" height="20" fill="lime">
+      <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/>
+    </rect>
+  </g>
+
+  <!-- Multi-point path specified with "values" attribute: -->
+  <g transform="translate(0,30)">
+    <rect width="20" height="20" fill="red">
+      <animateMotion values="20,0; 80,0" dur="2" begin="100"/>
+    </rect>
+    <rect width="20" height="20" fill="lime">
+      <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/>
+    </rect>
+  </g>
+
+  <!-- Path specified with "path" attribute: -->
+  <g transform="translate(0,60)">
+    <rect width="20" height="20" fill="red">
+      <animateMotion path="m0,0 h100" dur="2" begin="100"/>
+    </rect>
+    <rect width="20" height="20" fill="lime">
+      <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/>
+    </rect>
+  </g>
+
+  <!-- Path specified with "mpath" subelement: -->
+  <path id="p" d="m0,0 h100"/>
+  <g transform="translate(0,90)">
+    <rect width="20" height="20" fill="red">
+      <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion>
+    </rect>
+    <rect width="20" height="20" fill="lime">
+      <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion>
+    </rect>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
new file mode 100644
index 000000000..fbb06fcf1
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- First row -->
+  <g transform="translate(20,20)">
+    <g>
+      <rect width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="0" y="10" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="9" y="10" width="15px" height="15px"/>
+    </g>
+  </g>
+  <!-- Second row -->
+  <g transform="translate(20,70)">
+    <g>
+      <rect x="22.5" y="10" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="29.7" y="10" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="45" y="30"  width="15px" height="15px"/>
+    </g>
+  </g>
+  <!-- Third row -->
+  <g transform="translate(20,120)">
+    <g>
+      <rect x="48" y="34" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="60" y="50" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="60" y="50" width="15px" height="15px"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
new file mode 100644
index 000000000..6c4721cca
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- Tests for <animateMotion> with 'values' attribute -->
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "values"    : "0,10; 30,10; 60,50",
+                           "calcMode"  : "linear" };
+      testAnimatedRectGrid("animateMotion", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
new file mode 100644
index 000000000..d933fb838
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- First row -->
+  <g transform="translate(20,20)">
+    <g>
+      <rect width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="0" y="10" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="12" y="10" width="15px" height="15px"/>
+    </g>
+  </g>
+  <!-- Second row -->
+  <g transform="translate(20,70)">
+    <g>
+      <rect x="30" y="10" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="35.76" y="17.68" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="48" y="34"  width="15px" height="15px"/>
+    </g>
+  </g>
+  <!-- Third row -->
+  <g transform="translate(20,120)">
+    <g>
+      <rect x="50.4" y="37.2" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(50,0)">
+      <rect x="60" y="50" width="15px" height="15px"/>
+    </g>
+    <g transform="translate(100,0)">
+      <rect x="60" y="50" width="15px" height="15px"/>
+    </g>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
new file mode 100644
index 000000000..737574cae
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- Tests for <animateMotion> with 'values' attribute -->
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "values"    : "0,10; 30,10; 60,50"};
+      testAnimatedRectGrid("animateMotion", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
new file mode 100644
index 000000000..9d72807d9
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="go()">
+  <!-- Tests for <animateMotion> with 'values' attribute -->
+  <script xlink:href="../smil-grid.js" type="text/javascript"/>
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <script>
+    function go() {
+      var animAttrHash = { "values"    : "0,10; 30,10; 60,50",
+                           "calcMode"  : "paced" };
+      testAnimatedRectGrid("animateMotion", [animAttrHash]);
+    }
+  </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/lime.svg b/layout/reftests/svg/smil/motion/lime.svg
new file mode 100644
index 000000000..c09c6601e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/lime.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <title>Testcase reference file for generic pass condition</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/reftest-stylo.list b/layout/reftests/svg/smil/motion/reftest-stylo.list
new file mode 100644
index 000000000..fb9c53e55
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/reftest-stylo.list
@@ -0,0 +1,23 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests related to SVG Animation (using SMIL), focusing on the animateMotion
+# element.
+
+== animateMotion-by-1.svg animateMotion-by-1.svg
+== animateMotion-by-2.svg animateMotion-by-2.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,800) == animateMotion-flattening-1.svg animateMotion-flattening-1.svg
+# bug 951541
+== animateMotion-from-to-1.svg animateMotion-from-to-1.svg
+== animateMotion-indefinite-to-1.svg animateMotion-indefinite-to-1.svg
+== animateMotion-indefinite-to-2.svg animateMotion-indefinite-to-2.svg
+== animateMotion-rotate-1a.svg animateMotion-rotate-1a.svg
+== animateMotion-rotate-1b.svg animateMotion-rotate-1b.svg
+fuzzy-if(skiaContent,1,40) == animateMotion-rotate-2.svg animateMotion-rotate-2.svg
+== animateMotion-to-overridden-1.svg animateMotion-to-overridden-1.svg
+== animateMotion-values-linear-1.svg animateMotion-values-linear-1.svg
+== animateMotion-values-paced-1a.svg animateMotion-values-paced-1a.svg
+fuzzy-if(skiaContent,1,30) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1b.svg
+
+# Tests involving <mpath> sub-element
+== animateMotion-mpath-pathLength-1.svg animateMotion-mpath-pathLength-1.svg
+== animateMotion-mpath-targetChange-1.svg animateMotion-mpath-targetChange-1.svg
+== animateMotion-mpath-target-transform-1.svg animateMotion-mpath-target-transform-1.svg
diff --git a/layout/reftests/svg/smil/motion/reftest.list b/layout/reftests/svg/smil/motion/reftest.list
new file mode 100644
index 000000000..c7bcac313
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/reftest.list
@@ -0,0 +1,21 @@
+# Tests related to SVG Animation (using SMIL), focusing on the animateMotion
+# element.
+
+== animateMotion-by-1.svg      lime.svg
+== animateMotion-by-2.svg      lime.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,800) == animateMotion-flattening-1.svg lime.svg # bug 951541
+== animateMotion-from-to-1.svg lime.svg
+== animateMotion-indefinite-to-1.svg lime.svg
+== animateMotion-indefinite-to-2.svg lime.svg
+== animateMotion-rotate-1a.svg lime.svg
+== animateMotion-rotate-1b.svg lime.svg
+fuzzy-if(skiaContent,1,40) == animateMotion-rotate-2.svg  lime.svg
+== animateMotion-to-overridden-1.svg lime.svg
+== animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg
+== animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg
+fuzzy-if(skiaContent,1,30) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1-ref.svg
+
+# Tests involving <mpath> sub-element
+== animateMotion-mpath-pathLength-1.svg lime.svg
+== animateMotion-mpath-targetChange-1.svg lime.svg
+== animateMotion-mpath-target-transform-1.svg lime.svg