Source code
Revision control
Copy as Markdown
Other Tools
SVG Preview (Scaled)
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
<!--======================================================================-->
<!--= SVG 1.1 2nd Edition Test Case =-->
<!--======================================================================-->
<!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--======================================================================-->
template-version="1.4" reviewer="SVGWG" author="Chris lilley" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-20-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test hyperlinking rules as they relate to resolved start times.
</p>
</d:testDescription>
<p>
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
</p>
</d:operatorScript>
<p>The test is passed if:</p>
<ul>
<li>The first time "fade in" is clicked, a blue rectangle should smoothly fade from white to blue over the course of three seconds.</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, the blue rectangle should smoothly fade from white to blue over the course of three seconds, and then directly fade out from blue to white over the course of three seconds.</li>
<li>The rendered picture matches the reference image, (except
for possible variations in the labeling text (per CSS2 rules))
after activating the link on the fade-in button the first time
and waiting three seconds for the animation to complete. The picture
should remain looking the same way indefinitely, until another
link is activated.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-20-t.svg,v $</title>
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<rect id="pink" x="20" y="20" width="200" height="200" fill="#fff">
<animate id="fadein" attributeName="fill" attributeType="auto" from="#fff" to="blue" begin="indefinite" dur="3s" fill="freeze"/>
<animate id="fadeout" attributeName="fill" attributeType="auto" from="blue" to="#fff" begin="indefinite" dur="3s" fill="freeze"/>
</rect>
<!-- ok so this is testing dynamic compositing as well -->
<g id="buttons">
<a xlink:href="#fadein">
<rect x="320" y="0" width="160" height="180" fill="green"/>
<text fill="white" font-size="30" font-weight="bold" x="330" y="90">Fade in</text>
</a>
<a xlink:href="#fadeout">
<rect x="320" y="180" width="160" height="180" fill="maroon"/>
<text fill="white" font-size="30" font-weight="bold" x="330" y="280">Fade out</text>
</a>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
<!-- comment out this watermark once the test is approved -->
<!--<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>