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