mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-27 10:57:34 +09:00
52 lines
2.1 KiB
XML
52 lines
2.1 KiB
XML
<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>
|
