Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

22 files changed, 1120 insertions, 0 deletions

diff --git a/layout/reftests/svg/smil/transform/additive-1-ref.svg b/layout/reftests/svg/smil/transform/additive-1-ref.svg
new file mode 100644
index 0000000000..1b5f9a5aad
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/additive-1-ref.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(50 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 350)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/additive-1.svg b/layout/reftests/svg/smil/transform/additive-1.svg
new file mode 100644
index 0000000000..20f035a3ac
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/additive-1.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(1.5, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <!-- not additive -->
+  <g transform="translate(50 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="90" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- to-animation: special additive -->
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="90" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- by-animation: special additive -->
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" by="180" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- normal additive: same type -->
+  <g transform="translate(50 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(45)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- normal additive: different type -->
+  <g transform="translate(100 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="translate(50)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="90" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- stacked additive: same type -->
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="90" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="90" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- stacked additive: different types #1 -->
+  <g transform="translate(0 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="translate(50)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- stacked additive: different types #2 -->
+  <g transform="translate(100 250) skewX(-20)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="skewX(20) translate(50)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- stacked additive: different types #3 -->
+  <g transform="translate(200 250) skewX(-20)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="skewX(20) translate(50)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="translate" from="0" to="30" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="translate" from="0" to="-30" dur="1s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- base value with rotation around a centre -->
+  <g transform="translate(-50 300)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(90 50 50)">
+      <animateTransform attributeName="transform"
+        type="translate" from="0 0" to="0 -50" dur="1s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/animate-width-1.svg b/layout/reftests/svg/smil/transform/animate-width-1.svg
new file mode 100644
index 0000000000..3f874cdd95
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/animate-width-1.svg
@@ -0,0 +1,22 @@
+<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>
+
+  <rect width="100%" height="100%" fill="lime" />
+
+  <!-- Test 1: We shouldn't animate a width attribute with animateTransform -->
+
+  <rect width="0px" height="50px" fill="red">
+    <animateTransform attributeName="width" begin="100s" dur="1s"
+                      from="0" to="100" fill="freeze" />
+  </rect>
+
+</svg>
diff --git a/layout/reftests/svg/smil/transform/lime.svg b/layout/reftests/svg/smil/transform/lime.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/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/transform/paced-1-ref.svg b/layout/reftests/svg/smil/transform/paced-1-ref.svg
new file mode 100644
index 0000000000..ac843a13e4
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/paced-1-ref.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+        r="40"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+        r="14"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+        r="14"/>
+      <circle cx="-10" cy="-14" r="4"/>
+      <circle cx="10" cy="-14" r="4"/>
+      <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <g transform="translate(50 50)">
+    <use xlink:href="#smiley"/>
+  </g>
+  <g transform="translate(150 50)">
+    <use xlink:href="#smiley"/>
+  </g>
+  <g transform="translate(250 50)">
+    <use xlink:href="#smiley"/>
+  </g>
+  <g transform="translate(50 150)">
+    <use xlink:href="#smiley"/>
+  </g>
+  <g transform="translate(150 150)">
+    <use xlink:href="#smiley"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/paced-1.svg b/layout/reftests/svg/smil/transform/paced-1.svg
new file mode 100644
index 0000000000..2e8238b3cb
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/paced-1.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+        r="40"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+        r="14"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+        r="14"/>
+      <circle cx="-10" cy="-14" r="4"/>
+      <circle cx="10" cy="-14" r="4"/>
+      <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <!-- translation -->
+  <g transform="translate(0 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+        values="-5 -10; 35 20; 95 -60"/>
+    </use>
+  </g>
+  <!-- rotation -->
+  <g transform="translate(150 50) rotate(-90)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="rotate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+        values="20 10 10; 40 -15 25; 160 21 -35"/>
+    </use>
+  </g>
+  <!-- skewY -->
+  <g transform="translate(250 50) skewY(-30)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewY" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+        values="10; 40; 50"/>
+    </use>
+  </g>
+  <!-- scale -->
+  <g transform="translate(50 150) scale(0.5)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="scale" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+        values="-4 -2.5; 4 3.5; 8 0.5"/>
+    </use>
+  </g>
+  <!-- to-animation
+
+       You can't have to-animation with a paced calcMode. This test should just
+       produce regular to-animation without any assertions. This is a white-box
+       test.
+   -->
+  <g transform="translate(100 150)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+        to="100"/>
+    </use>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/reftest.list b/layout/reftests/svg/smil/transform/reftest.list
new file mode 100644
index 0000000000..ef97515317
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/reftest.list
@@ -0,0 +1,18 @@
+# Tests related to SVG Animation (using SMIL), focusing on the animateTransform
+# element.
+
+fuzzy(0-130,0-1000) == additive-1.svg additive-1-ref.svg # bug 981344, bug 1239766
+== animate-width-1.svg lime.svg
+fuzzy-if(cocoaWidget,0-5,0-101) fuzzy-if(winWidget,0-15,0-101) fuzzy-if(gtkWidget,0-5,0-101) fuzzy-if(Android,0-16,0-1) == paced-1.svg paced-1-ref.svg # bug 981640, Bug 1293550, Bug 1592998
+fuzzy(0-7,0-90) == rotate-angle-1.svg rotate-angle-ref.svg
+fuzzy(0-7,0-90) == rotate-angle-2.svg rotate-angle-ref.svg
+fuzzy(0-7,0-130) == rotate-angle-3.svg rotate-angle-ref.svg
+fuzzy(0-7,0-90) == rotate-angle-4.svg rotate-angle-ref.svg
+fuzzy(0-7,0-60) == rotate-angle-5.svg rotate-angle-ref.svg
+fuzzy(0-7,0-306) fuzzy-if(Android,0-16,0-3) == scale-1.svg scale-1-ref.svg  # bug 981004, AA difference
+== set-transform-1.svg lime.svg
+fuzzy(0-7,0-1548) == skew-1.svg skew-1-ref.svg # bug 983671, Bug 1260629
+== translate-clipPath-1.svg lime.svg
+== translate-gradient-1.svg lime.svg
+== translate-pattern-1.svg lime.svg
+== use-1.svg lime.svg
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-1.svg b/layout/reftests/svg/smil/transform/rotate-angle-1.svg
new file mode 100644
index 0000000000..75ace79c2d
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-1.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <g transform="translate(50 50) rotate(90)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="0" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="90" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(50 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="270" begin="100s" dur="3s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(150 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="360" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="540" begin="100s" dur="6s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(50 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="3600" begin="100s" dur="40s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(150 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="-270" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(250 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="-540" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-2.svg b/layout/reftests/svg/smil/transform/rotate-angle-2.svg
new file mode 100644
index 0000000000..8d75991aa0
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-2.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <g transform="translate(44 0) rotate(90 6 50)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="0 6 50" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(144 0)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0,6,50" to="90 6 50" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(244,0)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="180,6,50" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(44,100)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0,6,50" to="270,6,50" begin="100s" dur="3s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(144,100)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="360 6 50" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(244,100)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="540 6 50" begin="100s" dur="6s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(44,200)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="3600 6 50" begin="100s" dur="40s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(144,200)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="-270 6 50" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(244,200)">
+    <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 6 50" to="-540 6 50" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-3.svg b/layout/reftests/svg/smil/transform/rotate-angle-3.svg
new file mode 100644
index 0000000000..c24a2a5b54
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-3.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <g transform="translate(0 0) rotate(90 50 50)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="0 200 50" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(100 0)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="90 50 50" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(200 0)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="180 100 50" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(0 100)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="270 150 50" begin="100s" dur="3s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(100 100)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="360 200 50" begin="100s" dur="4s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(200 100)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="540 300 50" begin="100s" dur="6s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(0 200)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="3600 2000 50" begin="100s" dur="40s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(100 200)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="-270 50 50" begin="100s" dur="1s" fill="freeze"/>
+    </path>
+  </g>
+  <g transform="translate(200 200)">
+    <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0 0 50" to="-540 100 50" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-4.svg b/layout/reftests/svg/smil/transform/rotate-angle-4.svg
new file mode 100644
index 0000000000..48a9e8b92f
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-4.svg
@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <!-- no animation -->
+  <g transform="translate(50 50) rotate(90)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"/>
+  </g>
+  <!-- accumulate: sum -->
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="45" begin="100s" dur="0.5s" fill="freeze"
+        repeatCount="4" accumulate="sum"/>
+    </path>
+  </g>
+  <!-- accumulate: none -->
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="270" begin="100s" dur="0.75s" fill="freeze"
+        repeatCount="2"/>
+    </path>
+  </g>
+  <!-- additive: replace -->
+  <g transform="translate(50 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- additive: sum (adding to base value) -->
+  <g transform="translate(150 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="270" begin="100s" dur="1.5s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- additive: sum (adding to other animations) -->
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"
+        additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"
+        additive="sum"/>
+    </path>
+  </g>
+  <!-- to animation -->
+  <g transform="translate(50 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(45)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="135" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- by animation -->
+  <g transform="translate(150 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(45)">
+      <animateTransform attributeName="transform"
+        type="rotate" by="90" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- values animation -->
+  <g transform="translate(250 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+      <animateTransform attributeName="transform"
+        type="rotate" values="0; 135; 0" begin="100s" dur="1.5s" fill="freeze"/>
+    </path>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-5.svg b/layout/reftests/svg/smil/transform/rotate-angle-5.svg
new file mode 100644
index 0000000000..354b0f7e0b
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-5.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <!-- Tests to-animation behaviour for a lot of undefined situations.
+       SVG 1.1 doesn't define what should happen here but the behaviour we
+       expect is based on other browsers. -->
+  <!-- to animation: rotation from base value -90 to final value 180 -->
+  <g transform="translate(50 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="180" begin="100s" dur="1.5s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- to animation: rotation from base value -810 to final value 990 -->
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-810)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="990" begin="100s" dur="2s" fill="freeze"/>
+    </path>
+  </g>
+  <!-- to animation: rotation from base value -180 to final value 90 but with
+       other animations combined.
+
+       What happens here is that the rotation animation can't interpolate from
+       the base value as it's not a rotation transformation, so instead it
+       assumes an underlying zero matrix as the base value. (see next comment)
+   -->
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90) translate(0 50) scale(2)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+    </path>
+  </g>
+  <!-- to animation: rotate and scale
+       
+       Here again the scale animation can't interpolate from its base value
+       which is of a different type so it assumes a zero matrix NOT an identity
+       matrix (this is what the SVG WG have decided in the SVGT1.2 Tiny test
+       suite).
+   -->
+  <g transform="translate(50 150) rotate(90)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="scale(2)">
+      <animateTransform attributeName="transform"
+        type="rotate" to="180" begin="100s" dur="1s" fill="freeze" additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="scale" to="2" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+    </path>
+  </g>
+  <!-- to animation: translate and rotate
+       
+       Likewise here we end up rotating from 0 to 180 because we can't
+       interpolate from the underlying translation transformation.
+   -->
+  <g transform="translate(150 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+    transform="rotate(-90) translate(0 50) scale(2)">
+      <animateTransform attributeName="transform"
+        type="translate" to="0" begin="100s" dur="1s" fill="freeze" additive="sum"/>
+      <animateTransform attributeName="transform"
+        type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+    </path>
+  </g>
+  <!-- The following are from the reference image -->
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-ref.svg b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg
new file mode 100644
index 0000000000..e69ce351ef
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(50 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 50)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 150)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(50 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(150 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+  <g transform="translate(250 250)">
+    <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+      transform="rotate(90)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/scale-1-ref.svg b/layout/reftests/svg/smil/transform/scale-1-ref.svg
new file mode 100644
index 0000000000..58a3c117f9
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/scale-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0"
+        r="20"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7"
+        r="7"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7"
+        r="7"/>
+      <circle cx="-5" cy="-7" r="2"/>
+      <circle cx="5" cy="-7" r="2"/>
+      <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <g transform="translate(50 50)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(150 50)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(250 50)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(50 150)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(150 150)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(250 150)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(50 250)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(150 250)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+  <g transform="translate(250 250)">
+    <use xlink:href="#smiley" transform="scale(2)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/scale-1.svg b/layout/reftests/svg/smil/transform/scale-1.svg
new file mode 100644
index 0000000000..7393c35e11
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/scale-1.svg
@@ -0,0 +1,119 @@
+<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>
+    window.addEventListener("MozReftestInvalidate", run, false);
+
+    function run() {
+      setTimeAndSnapshot(101, true);
+    }
+  </script>
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0"
+        r="20"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7"
+        r="7"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7"
+        r="7"/>
+      <circle cx="-5" cy="-7" r="2"/>
+      <circle cx="5" cy="-7" r="2"/>
+      <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <!-- to animation 
+
+       This should interpolate from 0 (not 1) to 4 to match the behaviour
+       required by the SVGT1.2 test suite and Opera's behaviour.
+  -->
+  <g transform="translate(50 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" to="4" begin="100s" dur="2s" fill="freeze"/>
+    </use>
+  </g>
+  <!-- from-to animation -->
+  <g transform="translate(150 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/>
+    </use>
+  </g>
+  <!-- negative to-animation
+
+       Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor
+       should be -2, so we add a rotation animation to correct the gradient
+   -->
+  <g transform="translate(250 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/>
+      <animateTransform attributeName="transform"
+        type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+    </use>
+  </g>
+  <!-- by animation
+
+       The behaviour at this point is not clear. The definition of by-animation
+       is:
+
+       "simple animation in which the animation function is defined to offset
+       the underlying value for the attribute, using a delta that varies over
+       the course of the simple duration, starting from a delta of 0 and ending
+       with the delta specified with the by attribute." (SMILANIM 3.2.2)
+
+       Therefore it might seem like by-animation of by="1" means to ADD to the
+       underlying scale factor. Furthermore, the underlying scale factor when
+       not otherwise specified might seemt to be 1, but the SVG WG have decided
+       it's 0. This is inconsistent with the definition of addition for
+       animateTransform (post-multiplication of matrices) but it is the
+       behaviour required by SVGT1.2 test suite and used by Opera.
+
+       The following animation should go from 0 to 4, over 2s so at t=1s, the
+       scale factor should be 2.
+   -->
+  <g transform="translate(50 150)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" by="4" begin="100s" dur="2s" fill="freeze"/>
+    </use>
+  </g>
+  <!-- by animation #2 -->
+  <g transform="translate(150 150)">
+    <use xlink:href="#smiley" transform="scale(4)">
+      <animateTransform attributeName="transform"
+        type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+    </use>
+  </g>
+  <!-- from-by animation -->
+  <g transform="translate(250 150)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/>
+    </use>
+  </g>
+  <!-- values animation -->
+  <g transform="translate(50 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform"
+        type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/>
+    </use>
+  </g>
+  <!-- repetition -->
+  <g transform="translate(150 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" type="scale" from="0"
+      to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum"
+      fill="freeze"/>
+    </use>
+  </g>
+  <!-- repeated to-animation (should NOT accumulate) -->
+  <g transform="translate(250 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" type="scale"
+      to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum"
+      fill="freeze"/>
+    </use>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/set-transform-1.svg b/layout/reftests/svg/smil/transform/set-transform-1.svg
new file mode 100644
index 0000000000..f698cbaa82
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/set-transform-1.svg
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<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>
+
+  <rect width="100%" height="100%" fill="lime" />
+
+  <!-- Test 1: We shouldn't animate a transform attribute with set -->
+
+  <rect x="50" y="50" width="100" height="100" fill="red">
+    <set attributeName="transform" to="75,75" begin="100s"/>
+  </rect>
+
+  <rect x="50" y="50" width="100" height="100" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/transform/skew-1-ref.svg b/layout/reftests/svg/smil/transform/skew-1-ref.svg
new file mode 100644
index 0000000000..10c7ca8a38
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/skew-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+        r="40"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+        r="14"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+        r="14"/>
+      <circle cx="-10" cy="-14" r="4"/>
+      <circle cx="10" cy="-14" r="4"/>
+      <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <g transform="translate(50 50)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(150 50)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(250 50)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(50 150)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(150 150)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(250 150)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(50 250)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(150 250)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+  <g transform="translate(250 250)">
+    <use xlink:href="#smiley" transform="skewX(30)"/>
+  </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/skew-1.svg b/layout/reftests/svg/smil/transform/skew-1.svg
new file mode 100644
index 0000000000..603c7f4025
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/skew-1.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait"
+     onload="setTimeAndSnapshot(101, true)">
+  <script xlink:href="../smil-util.js" type="text/javascript"/>
+  <defs>
+    <g id="smiley">
+      <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+        r="40"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+        r="14"/>
+      <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+        r="14"/>
+      <circle cx="-10" cy="-14" r="4"/>
+      <circle cx="10" cy="-14" r="4"/>
+      <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+    </g>
+  </defs>
+  <!-- from-to animation -->
+  <g transform="translate(50 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s"/>
+    </use>
+  </g>
+  <!-- from-by animation -->
+  <g transform="translate(150 50)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="60" by="-60" begin="100s" dur="2s"/>
+    </use>
+  </g>
+  <!-- by animation -->
+  <g transform="translate(250 50) skewX(-15)">
+    <use xlink:href="#smiley" transform="skewX(15)">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" by="60" begin="100s" dur="2s"/>
+    </use>
+  </g>
+  <!-- to animation -->
+  <g transform="translate(50 150)">
+    <use xlink:href="#smiley" transform="skewX(15)">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" to="45" begin="100s" dur="2s"/>
+    </use>
+  </g>
+  <!-- values animation -->
+  <g transform="translate(150 150)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" values="10; 40; 20; 60" begin="100s" dur="2s"/>
+    </use>
+  </g>
+  <!-- additive -->
+  <g transform="translate(250 150)">
+    <use xlink:href="#smiley" transform="skewY(-30)">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewY" fill="freeze" to="30" begin="100s" dur="2s"/>
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s" additive="sum"/>
+    </use>
+  </g>
+  <!-- accumulate: none -->
+  <g transform="translate(50 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="20" to="50" begin="100s" dur="0.75s"
+        repeatCount="3"/>
+    </use>
+  </g>
+  <!-- accumulate: sum -->
+  <g transform="translate(150 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="0" to="22.5" begin="100s" dur="0.75"
+        accumulate="sum" repeatCount="3"/>
+    </use>
+  </g>
+  <!-- angles > 360 -->
+  <g transform="translate(250 250)">
+    <use xlink:href="#smiley">
+      <animateTransform attributeName="transform" attributeType="XML"
+        type="skewX" fill="freeze" from="-690" to="750" begin="100s" dur="2s"/>
+    </use>
+  </g>
+</svg>
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>
diff --git a/layout/reftests/svg/smil/transform/translate-gradient-1.svg b/layout/reftests/svg/smil/transform/translate-gradient-1.svg
new file mode 100644
index 0000000000..240777b14e
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-gradient-1.svg
@@ -0,0 +1,29 @@
+<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>
+    <linearGradient id="grad" width="200%">
+      <stop offset="0" stop-color="red"/>
+      <stop offset="1" stop-color="lime"/>
+      <stop offset="2" stop-color="lime"/>
+      <animateTransform attributeName="gradientTransform" type="translate" begin="100s" dur="1s"
+		        from="0 0" to="-1 0" fill="freeze"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Test 1: Lime background covered by left hand side of gradient.
+       After the animation, the right hand lime side of the gradient
+       is visible, so no red is shown. -->
+  <rect x="0" width="50" height="100%" fill="lime" />
+  <rect x="0" width="50" height="100%" fill="url(#grad)"/>
+
+  <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+  <rect x="50" height="100%" width="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/translate-pattern-1.svg b/layout/reftests/svg/smil/transform/translate-pattern-1.svg
new file mode 100644
index 0000000000..b6b9983f03
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-pattern-1.svg
@@ -0,0 +1,28 @@
+<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>
+    <pattern id="pat" width="200%" height="100%">
+      <rect x="0" y="0" width="50" height="100%" fill="red"/>
+      <rect x="50" y="0" width="50" height="100%" fill="lime"/>
+      <animateTransform attributeName="patternTransform" type="translate" begin="100s" dur="1s"
+		        from="0 0" to="-50 0" fill="freeze"/>
+    </pattern>
+  </defs>
+
+  <!-- Test 1: Lime background covered by left hand side of pattern.
+       After the animation, the right hand lime side of the pattern
+       is visible, so no red is shown. -->
+  <rect x="0" width="50" height="100%" fill="lime" />
+  <rect x="0" width="50" height="100%" fill="url(#pat)" />
+
+  <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+  <rect x="50" height="100%" width="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/use-1.svg b/layout/reftests/svg/smil/transform/use-1.svg
new file mode 100644
index 0000000000..eee0b33796
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/use-1.svg
@@ -0,0 +1,27 @@
+<svg width="100%" xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  class="reftest-wait">
+<script>
+  function run() {
+    document.documentElement.setCurrentTime(30);
+    document.documentElement.removeAttribute('class');
+  }
+  window.addEventListener("MozReftestInvalidate", run, false);
+</script>
+<defs>
+  <g id="shape">
+    <rect height="100" width="100" fill="red"/>
+    <rect x="100" height="100" width="100" fill="lime"/>
+  </g>
+
+  <pattern id="pattern" width="200" height="100" patternUnits="userSpaceOnUse">
+    <use xlink:href="#shape">
+      <animateTransform attributeName="transform" type="translate" calcMode="discrete"
+                        dur="30s" from="0 0" to="-100 0" fill="freeze"/>
+    </use>
+  </pattern>
+</defs>
+<rect height="100%" width="100%" fill="lime"/>
+<rect height="100%" width="100%" fill="url(#pattern)"/>
+</svg>
+