Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/reftests/svg/smil/reftest.list
SVG Preview (Scaled)
<!--
-->
class="reftest-wait"
onload="setTimeAndSnapshot(1, true)">
<title>Test animation of the 'd' attribute on the 'path' element</title>
<script xlink:href="smil-util.js" type="text/javascript"/>
<style type="text/css">
path { fill: none; stroke: blue; stroke-width: 1px;
shape-rendering: crispEdges; }
</style>
<!-- The difference between respective numbers in the effective 'from' and
'to' path data below is carefully designed to be a factor of 3. That way
our reference file (which checks against a one third complete animation)
can contain whole numbers, which is necessary to avoid failure due to
hard coded rounded numbers in the reference not matching platform
specific rounding behaviour.
-->
<!-- Test 'to' animation. -->
<path d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="linear"
begin="0s" dur="3s"
to="M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
<!-- Test 'by' animation. -->
<path transform="translate(0, 70)"
d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="linear"
begin="0s" dur="3s"
by="M0,0
L21,0
l-21,42
H21
V0
h21
v42
M0,0
C30,-30 15,60 21,60
S12,-30 42,0
m-30,0
c30,-30 15,60 21,60
s-9,-90 21,-60
M0,30
Q15,78 21,21
T42,30
M0,30
q15,48 21,-9
t21,9
M12,51
A21,6 -90 1 1 6,51
M0,51
a21,6 -90 1 1 -6,0
"
fill="freeze"/>
</path>
<!-- Test calcMode="paced". We don't currently support paced animation, so
we're just testing that we don't do anything unexpected (that we behave
as if calcMode="discrete").
-->
<path transform="translate(0, 140)">
<animate attributeName="d"
calcMode="paced"
begin="0s" dur="3s"
values="
M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
;
M10,10
L33,10
l-23,46
H33
V10
h23
v46
M80,10
C100,20 90,50 103,50
S106,20 126,10
m20,0
c20,10 10,40 23,40
s3,-30 23,-40
M220,30
Q230,72 243,33
T266,30
M290,30
q10,42 23,3
t23,-3
M368,53
A23,13 -60 1 1 382,53
M410,53
a23,13 -60 1 1 14,0
;
M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
<!-- Test calcMode="discrete". -->
<path transform="translate(0, 210)"
d="M10,10
L19,10
l-9,18
H19
V10
h9
v18
M80,10
C80,40 80,10 89,10
S98,40 98,10
m40,0
c0,30 0,0 9,0
s9,30 9,0
M220,10
Q220,20 229,19
T238,10
M290,10
q0,10 9,9
t9,-9
M360,19
A9,9 0 1 1 378,19
M410,19
a9,9 0 1 1 18,0
">
<animate attributeName="d"
calcMode="discrete"
begin="0s" dur="2s"
to="M10,10
L40,10
l-30,60
H40
V10
h30
v60
M80,10
C110,10 95,70 110,70
S110,10 140,10
m10,0
c30,0 15,60 30,60
s0,-60 30,-60
M220,40
Q235,98 250,40
T280,40
M290,40
q15,58 30,0
t30,0
M372,70
A30,15 -90 1 1 384,70
M410,70
a30,15 -90 1 1 12,0
"
fill="freeze"/>
</path>
</svg>