mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
51 lines
2.0 KiB
XML
51 lines
2.0 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 2px-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. -->
|
||
|
|
<path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z"
|
||
|
|
style="fill: currentColor; stroke: lime; stroke-width: 2px"/>
|
||
|
|
</defs>
|
||
|
|
<script xlink:href="../smil-util.js" type="text/javascript"/>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function doTest() {
|
||
|
|
setTimeAndSnapshot(1, 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="1s" dur="1s"/>
|
||
|
|
</use>
|
||
|
|
<use xlink:href="#marker" class="testEnd">
|
||
|
|
<animateMotion by="20,20" rotate="auto" dur="1s" fill="freeze"/>
|
||
|
|
</use>
|
||
|
|
<use xlink:href="#marker" class="mask">
|
||
|
|
<animateMotion by="40,40" rotate="auto" dur="2s"/>
|
||
|
|
</use>
|
||
|
|
</g>
|
||
|
|
</svg>
|