summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/smil/transform
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/svg/smil/transform')
-rw-r--r--layout/reftests/svg/smil/transform/additive-1-ref.svg42
-rw-r--r--layout/reftests/svg/smil/transform/additive-1.svg111
-rw-r--r--layout/reftests/svg/smil/transform/animate-width-1.svg22
-rw-r--r--layout/reftests/svg/smil/transform/lime.svg8
-rw-r--r--layout/reftests/svg/smil/transform/paced-1-ref.svg31
-rw-r--r--layout/reftests/svg/smil/transform/paced-1.svg64
-rw-r--r--layout/reftests/svg/smil/transform/reftest.list18
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-1.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-2.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-3.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-4.svg79
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-5.svg86
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-ref.svg38
-rw-r--r--layout/reftests/svg/smil/transform/scale-1-ref.svg43
-rw-r--r--layout/reftests/svg/smil/transform/scale-1.svg119
-rw-r--r--layout/reftests/svg/smil/transform/set-transform-1.svg27
-rw-r--r--layout/reftests/svg/smil/transform/skew-1-ref.svg43
-rw-r--r--layout/reftests/svg/smil/transform/skew-1.svg86
-rw-r--r--layout/reftests/svg/smil/transform/translate-clipPath-1.svg39
-rw-r--r--layout/reftests/svg/smil/transform/translate-gradient-1.svg29
-rw-r--r--layout/reftests/svg/smil/transform/translate-pattern-1.svg28
-rw-r--r--layout/reftests/svg/smil/transform/use-1.svg27
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>
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-08-18 23:49:55 +0000