mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
109 lines
3.9 KiB
XML
109 lines
3.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
class="reftest-wait"
|
|
onload="setTimeAndSnapshot(1, true)">
|
|
<script xlink:href="../smil-util.js" type="text/javascript"/>
|
|
<defs>
|
|
<linearGradient id="grad">
|
|
<stop offset="5%" stop-color="#F66"/>
|
|
<stop offset="95%" stop-color="#FF6"/>
|
|
</linearGradient>
|
|
<circle fill="url(#grad)" stroke="black" stroke-width="1" cx="0" cy="0"
|
|
r="20" id="circle"/>
|
|
</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="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" to="4" dur="2s" fill="freeze"/>
|
|
</use>
|
|
</g>
|
|
<!-- from-to animation -->
|
|
<g transform="translate(150 50)">
|
|
<use xlink:href="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" from="-5" to="9" 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="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" to="-4" dur="2s" fill="freeze"/>
|
|
<animateTransform attributeName="transform"
|
|
type="rotate" from="0" to="360" 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="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" by="4" dur="2s" fill="freeze"/>
|
|
</use>
|
|
</g>
|
|
<!-- by animation #2 -->
|
|
<g transform="translate(150 150)">
|
|
<use xlink:href="#circle" transform="scale(4)">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" by="1" dur="2s" fill="freeze" additive="sum"/>
|
|
</use>
|
|
</g>
|
|
<!-- from-by animation -->
|
|
<g transform="translate(250 150)">
|
|
<use xlink:href="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" from="2" by="0" dur="2s" fill="freeze"/>
|
|
</use>
|
|
</g>
|
|
<!-- values animation -->
|
|
<g transform="translate(50 250)">
|
|
<use xlink:href="#circle">
|
|
<animateTransform attributeName="transform"
|
|
type="scale" values="0; 10; 2; 5; -1" dur="2s" fill="freeze"/>
|
|
</use>
|
|
</g>
|
|
<!-- repetition -->
|
|
<g transform="translate(150 250)">
|
|
<use xlink:href="#circle">
|
|
<animateTransform attributeName="transform" type="scale" from="0"
|
|
to="0.6" 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="#circle">
|
|
<animateTransform attributeName="transform" type="scale"
|
|
to="6" dur="0.75" repeatCount="2" accumulate="sum"
|
|
fill="freeze"/>
|
|
</use>
|
|
</g>
|
|
</svg>
|