summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/smil/motion
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/svg/smil/motion')
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-by-1.svg53
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-by-2.svg16
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg26
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg44
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg10
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg11
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg31
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg34
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg14
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg151
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg63
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg63
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg52
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg61
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg38
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg15
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg38
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg14
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg15
-rw-r--r--layout/reftests/svg/smil/motion/lime.svg8
-rw-r--r--layout/reftests/svg/smil/motion/reftest.list22
21 files changed, 779 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-1.svg b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
new file mode 100644
index 0000000000..072947735e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Red "workspaces" (should be covered up, if tests pass) -->
+ <rect x="100" y="100" width="100" height="100" fill="red"/>
+ <rect x="100" y="300" width="100" height="100" fill="red"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'by' works at all -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion by="100, 100" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Check that 'by' is additive w/ 'by' -->
+ <rect fill="lime" x="50" y="50" width="50" height="50">
+ <animateMotion by="60, 75" begin="100" dur="1" fill="freeze"/>
+ <animateMotion by="40, -25" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- SECOND ROW -->
+ <!-- Check that 'by' is additive w/ 'to' -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion to="50,100" begin="100" dur="1" fill="freeze"/>
+ <animateMotion by="50, 50" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Check that 'from-to' replaces 'by' -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion by="500, 500" begin="100" dur="1" fill="freeze"/>
+ <animateMotion from="300,300" to="150,150" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Other tags -->
+ <foreignObject id="fo" x="0" y="0" width="100" height="50">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background-color:lime"/>
+ </foreignObject>
+ <animateMotion xlink:href="#fo" by="100, 300" begin="100" dur="1" fill="freeze"/>
+
+ <svg x="0" y="50" width="100" height="50">
+ <rect width="100" height="50" fill="lime"/>
+ <animateMotion by="100, 300" begin="100" dur="1" fill="freeze"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-2.svg b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
new file mode 100644
index 0000000000..9502828c35
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" transform="translate(100,0)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <animateMotion by="-100, 0" begin="100" dur="1" fill="freeze"/>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
new file mode 100644
index 0000000000..cf3a55523a
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
@@ -0,0 +1,26 @@
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 45 45" preserveAspectRatio="none"
+ class="reftest-wait">
+ <!--
+ Bug 946540. Test that motion paths with inflection points that both lie
+ outside of (0, 1) are flattened correctly.
+
+ We have a lime background and move a red square along a motion path. If
+ the path is not flattened correctly the red square will get stuck at the
+ point where it covers the viewport.
+ -->
+ <script xlink:href="../smil-util.js"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndSnapshot(110, true);
+ }, false);
+ </script>
+ <!-- Lime background -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Animated square -->
+ <rect x="-25" y="-25" width="50" height="50" fill="red">
+ <animateMotion calcMode="paced" begin="100s" dur="1s" fill="freeze"
+ path="m0-32c0 25 10 46 22 56 34 28 75 35 102 38"/>
+ </rect>
+ </svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
new file mode 100644
index 0000000000..065ee36b12
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect x="100" y="100" width="100" height="100" fill="red"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'from' gets applied at begin time -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion from="100, 100" to="500, 500" begin="101" dur="1"/>
+ </rect>
+
+ <!-- Check that 'to' gets hit at end time -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion from="200,200" to="150,100" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- SECOND ROW -->
+ <!-- Check that animation effects are removed after end time
+ (note that fill="remove" is default; just specifying it for clarity -->
+ <rect fill="lime" x="100" y="150" width="50" height="50">
+ <animateMotion from="500,500" to="600,600" begin="1000" dur="1" fill="remove"/>
+ </rect>
+ <rect fill="purple" x="-25" y="-25" width="25" height="25">
+ <!-- With the purple rect's x/y offsets, this animateMotion path moves us
+ around the 2nd row, 1st col -->
+ <animateMotion from="125,175" to="150,175" begin="100" dur="1" fill="remove"/>
+ </rect>
+
+ <!-- Check interpolation halfway through animation -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion from="200,100" to="100,200" begin="100.5" dur="1"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
new file mode 100644
index 0000000000..12c62da2c8
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation just sticks to the base value for
+ animateMotion. -->
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="15" y="15" width="100" height="100" fill="red"/>
+ <rect x="15" y="15" width="100" height="100" fill="lime">
+ <animateMotion to="500,500" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
new file mode 100644
index 0000000000..82f5a61a05
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation with discrete calcMode applies
+ the underlying value for the whole time. -->
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="15" y="15" width="100" height="100" fill="red"/>
+ <rect x="15" y="15" width="100" height="100" fill="lime">
+ <animateMotion to="500,500" dur="indefinite"
+ calcMode="discrete"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
new file mode 100644
index 0000000000..ffb991c1a6
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+ <title>Test that pathLength of paths has no effect in animation</title>
+ <defs>
+ <path id="path" pathLength="100" d="M0,0 h400" />
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(100.5, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- calcMode="linear" -->
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="-190" y="10" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+
+ <!-- calcMode="paced" -->
+ <rect x="10" y="110" width="100" height="100" fill="red"/>
+ <rect x="-190" y="110" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg
new file mode 100644
index 0000000000..d57aa1a29f
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+ <title>Test that pathLength works inside a shadow tree</title>
+ <defs>
+ <path id="path" pathLength="100" d="M0,0 h400" />
+ <g id="content">
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- calcMode="linear" -->
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="-190" y="10" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+
+ <!-- calcMode="paced" -->
+ <rect x="10" y="110" width="100" height="100" fill="red"/>
+ <rect x="-190" y="110" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+ </g>
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(100.5, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <use xlink:href="#content"></use>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
new file mode 100644
index 0000000000..c8f5919b79
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test that 'transform' on the &lt;mpath&gt; target has no affect</title>
+ <defs>
+ <path id="path" d="M0,0 L100,100" transform="translate(100,0)"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="10" y="10" width="100" height="100" fill="lime">
+ <animateMotion dur="indefinite">
+ <mpath xlink:href="#path"/>
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
new file mode 100644
index 0000000000..b2a408ca62
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ </style>
+ <defs>
+ <!-- 'Dummy' path -->
+ <path id="moveFarAway" d="M300,300 h0"/>
+
+ <path id="moveToUpperLeft" d="M100,100 h0"/>
+
+ <path id="pathWhoseDAttrChanges" d="M360,360 h0"/>
+
+ <!-- The first of these two elems w/ same ID should be used. -->
+ <path id="moveToMiddleLeft" d="M100,150 h0"/>
+ <path id="moveToMiddleLeft" d="M350,350 h0"/>
+
+ <!-- The first of these two elems w/ same ID initially wins, but then
+ it gets removed via script. -->
+ <path id="moveToMiddleCenter" d="M340,340 h0"/>
+ <path id="moveToMiddleCenter" d="M150,150 h0"/>
+
+ <!-- This elem doesn't do what its id would suggest, but we'll use JS to
+ add an earlier elem with the same ID that *does* do what it says. -->
+ <path id="moveToMiddleRight" d="M330,330 h0"/>
+
+ <path id="moveToLowerLeft" d="M100,200 h0"/>
+ <path id="moveToLowerCenter" d="M150,200 h0"/>
+
+ </defs>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ const SVGNS = "http://www.w3.org/2000/svg";
+ const XLINKNS = "http://www.w3.org/1999/xlink";
+
+
+ function insertPathElem(aPathId, aPathSpec) {
+ var newPath = document.createElementNS(SVGNS, "path");
+ newPath.setAttribute("id", aPathId);
+ newPath.setAttribute("d", aPathSpec);
+
+ // Insert new path into defs
+ var defsElem = document.getElementsByTagName("defs")[0];
+ defsElem.insertBefore(newPath, defsElem.firstChild);
+ }
+
+ function doTest() {
+ // Seek already, so we'll have sampled the initial 'stale' state
+ document.documentElement.setCurrentTime(1);
+
+ // Make tweaks
+ var mpathToModify = document.getElementById("modifyMyTarget");
+ mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft");
+
+ var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget");
+ mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href");
+
+ var pathToTweak = document.getElementById("pathWhoseDAttrChanges");
+ pathToTweak.setAttribute("d", "M200 100 h0");
+
+ var mpathToDelete = document.getElementById("removeMe");
+ mpathToDelete.parentNode.removeChild(mpathToDelete);
+
+ var pathToDelete = document.getElementById("moveToMiddleCenter");
+ pathToDelete.parentNode.removeChild(pathToDelete);
+
+ insertPathElem("moveToMiddleRight", "M200,150 h0");
+ insertPathElem("moveToLowerRight", "M200,200 h0");
+
+ setTimeAndSnapshot(1, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="150" height="150"/>
+
+ <!-- FIRST ROW: Test behavior... -->
+ <!-- ...when mpath's 'xlink:href' attr is modified. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="modifyMyTarget" xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when mpath's 'xlink:href' is unset. -->
+ <rect class="test" x="150" y="100" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="unsetMyTarget" xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when the target-path's "d" attr is modified. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#pathWhoseDAttrChanges"/>
+ </animateMotion>
+ </rect>
+
+ <!-- SECOND ROW: Test behavior... -->
+ <!-- ...when there are two paths with same ID (first should win) -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleLeft"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when there are two paths with same ID, and the first is removed. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleCenter"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when an earlier path is added with our target ID. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleRight"/>
+ </animateMotion>
+ </rect>
+
+ <!-- THIRD ROW: Test behavior... -->
+ <!-- ...when there are two mpath children (first should win). -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToLowerLeft"/>
+ <mpath xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when there are two mpath children, and the first is removed. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="removeMe" xlink:href="#moveFarAway"/>
+ <mpath xlink:href="#moveToLowerCenter"/>
+ </animateMotion>
+ </rect>
+ <!-- ...when there's an mpath child that initially matches nothing, until
+ a node with the right ID is inserted into the DOM. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToLowerRight"/>
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
new file mode 100644
index 0000000000..414a6c718b
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ .filler { fill: lime }
+ </style>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'rotate' gets applied at begin time -->
+ <g>
+ <animateMotion from="150, 100" to="500, 500" rotate="90"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+ <!-- Check that 'rotate' gets applied at end time -->
+ <g>
+ <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100"
+ dur="1" fill="freeze"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+ <!-- SECOND ROW -->
+ <!-- Check that rotate combines with existing rotate -->
+ <g transform="rotate(90)">
+ <animateMotion from="150,200" to="600,600" rotate="90"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+ <!-- Check additivity of <animateMotion> "rotate" adds -->
+ <g>
+ <animateMotion from="100,100" to="100,200" rotate="90"
+ begin="100.5" dur="1"/>
+ <animateMotion by="100,-200" rotate="90"
+ begin="100.5" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
new file mode 100644
index 0000000000..8c4287d33e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ .filler { fill: lime }
+ </style>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'rotate' gets applied at begin time -->
+ <g>
+ <animateMotion from="150, 100" to="500, 500" rotate="100grad"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+ <!-- Check that 'rotate' gets applied at end time -->
+ <g>
+ <animateMotion from="600, 700" to="200, 150" rotate="200grad" begin="100"
+ dur="1" fill="freeze"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+ <!-- SECOND ROW -->
+ <!-- Check that rotate combines with existing rotate -->
+ <g transform="rotate(90)">
+ <animateMotion from="150,200" to="600,600" rotate="100grad"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+ <!-- Check additivity of <animateMotion> "rotate" adds -->
+ <g>
+ <animateMotion from="100,100" to="100,200" rotate="100grad"
+ begin="100.5" dur="1"/>
+ <animateMotion by="100,-200" rotate="100grad"
+ begin="100.5" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
new file mode 100644
index 0000000000..7f6fcc7cf5
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <!-- Tests for rotate="auto" and "auto-reverse" -->
+ <!-- The idea here is to create positioned red "holes" in the lime
+ background, and then hopefully use paused <animateMotion> elements to
+ position other elements exactly on top of the hole. -->
+ <style>
+ .background { fill: lime }
+ .hole { color: red }
+ .testBegin { color: purple }
+ .testEnd { color: orange }
+ .mask { color: lime }
+ </style>
+ <defs>
+ <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->
+ <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in
+ SVG when redrawing the same non-pixel-aligned shape on top of itself
+ in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the
+ maximum distance from a path that antialiasing of square pixels can
+ cause the path to affect. -->
+ <path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z"
+ style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <g transform="translate(50,50)">
+ <!-- Here's the hole -->
+ <use xlink:href="#marker" class="hole"
+ transform="translate(20,20) rotate(45)"/>
+
+ <!-- And here's a stack of elements animated with 'animateMotion' that
+ should end up there. -->
+ <use xlink:href="#marker" class="testBegin">
+ <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>
+ </use>
+ <use xlink:href="#marker" class="testEnd">
+ <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>
+ </use>
+ <use xlink:href="#marker" class="mask">
+ <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>
+ </use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
new file mode 100644
index 0000000000..2c6179640a
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect fill="lime" width="100%" height="100%" />
+
+ <!-- In the following pairs of rects, the only pairwise differences are the
+ fill-color and the presence of the "to" attribute on the animateMotion
+ element. "to" shouldn't have any effect in these cases, since it has
+ lower priority than "values," "path," and "mpath". So in each case, the
+ lime rect should cover up the red rect at all times. -->
+
+ <!-- Single-point path specified with "values" attribute: -->
+ <g transform="translate(0,0)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion values="20,0" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Multi-point path specified with "values" attribute: -->
+ <g transform="translate(0,30)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion values="20,0; 80,0" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Path specified with "path" attribute: -->
+ <g transform="translate(0,60)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion path="m0,0 h100" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Path specified with "mpath" subelement: -->
+ <path id="p" d="m0,0 h100"/>
+ <g transform="translate(0,90)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion>
+ </rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
new file mode 100644
index 0000000000..fbb06fcf13
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- First row -->
+ <g transform="translate(20,20)">
+ <g>
+ <rect width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="0" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="9" y="10" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Second row -->
+ <g transform="translate(20,70)">
+ <g>
+ <rect x="22.5" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="29.7" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="45" y="30" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Third row -->
+ <g transform="translate(20,120)">
+ <g>
+ <rect x="48" y="34" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
new file mode 100644
index 0000000000..6c4721cca0
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50",
+ "calcMode" : "linear" };
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
new file mode 100644
index 0000000000..d933fb8381
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- First row -->
+ <g transform="translate(20,20)">
+ <g>
+ <rect width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="0" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="12" y="10" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Second row -->
+ <g transform="translate(20,70)">
+ <g>
+ <rect x="30" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="35.76" y="17.68" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="48" y="34" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Third row -->
+ <g transform="translate(20,120)">
+ <g>
+ <rect x="50.4" y="37.2" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
new file mode 100644
index 0000000000..737574cae5
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50"};
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
new file mode 100644
index 0000000000..9d72807d9e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50",
+ "calcMode" : "paced" };
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/lime.svg b/layout/reftests/svg/smil/motion/lime.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/lime.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testcase reference file for generic pass condition</title>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/reftest.list b/layout/reftests/svg/smil/motion/reftest.list
new file mode 100644
index 0000000000..9163259736
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/reftest.list
@@ -0,0 +1,22 @@
+# Tests related to SVG Animation (using SMIL), focusing on the animateMotion
+# element.
+
+== animateMotion-by-1.svg lime.svg
+== animateMotion-by-2.svg lime.svg
+fuzzy(0-15,0-1600) == animateMotion-flattening-1.svg lime.svg # bug 951541
+== animateMotion-from-to-1.svg lime.svg
+== animateMotion-indefinite-to-1.svg lime.svg
+== animateMotion-indefinite-to-2.svg lime.svg
+== animateMotion-rotate-1a.svg lime.svg
+== animateMotion-rotate-1b.svg lime.svg
+fuzzy(0-1,0-40) == animateMotion-rotate-2.svg lime.svg
+== animateMotion-to-overridden-1.svg lime.svg
+fuzzy(0-4,0-15) == animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg
+fuzzy(0-5,0-91) == animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg
+fuzzy(0-5,0-91) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1-ref.svg
+
+# Tests involving <mpath> sub-element
+== animateMotion-mpath-pathLength-1.svg lime.svg
+== animateMotion-mpath-targetChange-1.svg lime.svg
+== animateMotion-mpath-target-transform-1.svg lime.svg
+== animateMotion-mpath-shadow.svg lime.svg
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-07 11:09:05 +0000