Skip to content
GitLab
Commit d5c659a5 authored by Eric Domke's avatar Eric Domke
Browse files

Refactoring while working through W3C tests 

- Adding W3C test cases and a test fixture
- Fixed support for CSS stylesheets (particularly when class names are
referenced)
- Refactoring unit calculations so that percentages and fractions
calculate more accurately
- SvgImage:
- Support PreserveAspectRatio attribute
- Support for referencing svg images
- Refactored text rendering to use the AttributeCollection inheritance
scheme
- Initial attempt at 'ex' unit support
- Added support for system color names
- Changed parsing of entities to support XML entities
- Supporting loading of a svg document directly from a XmlDocument with
requiring serializing the document as a string first.
- ...
parent 3aedd8e8
Hide whitespace changes
Inline Side-by-side
Tests/W3CTestSuite/svg/animate-elem-14-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-14-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'calcMode'=discrete.
</p>
<p>
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
to help show what the correct behavior is. The headline text shows the values for the 'calcMode' and 'keyTimes' attributes. The
black text and ruler lines help show the size and movement of the rectangle over time.
</p>
<p>
This test shows an animation with calcMode="discrete" (i.e., a jumping animation).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The right edge of the blue rectangle should line up with the ruler lines at the indicated times, and should jump directly to each position with no animation in between.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-14-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">
<text font-size="40" x="3" y="45">calcMode="discrete"</text>
<text font-size="40" x="3" y="100">keyTimes="0;.2;.4;.6"</text>
<g xml:space="preserve" font-size="13.5" stroke-width="3">
<g transform="translate(150,140)">
<text font-size="36" x="-140" y="140">Time (s):</text>
<text font-size="36" x="290" y="140">0</text>
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="245" y="140">2</text>
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="170" y="140">4</text>
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="20" y="140">6</text>
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000"/>
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4">
<animate attributeName="width" calcMode="discrete" values="300;255;180;30" keyTimes="0;.2;.4;.6" begin="0s" dur="10s" fill="freeze"/>
</rect>
</g>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>
Tests/W3CTestSuite/svg/animate-elem-15-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-15-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'calcMode'=paced.
</p>
<p>
One animation has been defined to animate the width of a rectangle. Ruler lines and text are provided
to help show what the correct behavior is. The headline text shows the values for the 'calcMode' and 'keyTimes' attributes. The
black text and ruler lines help show the size and movement of the rectangle over time.
</p>
<p>
This test shows calcMode="paced" for an animation that has constant velocity, thus showing how 'values'
and 'keyTimes' are ignored.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width at a constant speed so that the right edge of the rectangle lines up with the ruler line at the indicated times.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-15-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">
<text font-size="40" x="3" y="45">calcMode="paced"</text>
<text font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
<g xml:space="preserve" font-size="13.5" stroke-width="3">
<g transform="translate(150,140)">
<text font-size="36" x="-140" y="140">Time (s):</text>
<text font-size="36" x="290" y="140">0</text>
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="230" y="140">1.5</text>
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="170" y="140">4</text>
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="20" y="140">9</text>
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000"/>
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4">
<animate attributeName="width" calcMode="paced" values="300;255;180;30" keyTimes="0;.25;.5;1" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
</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>
Tests/W3CTestSuite/svg/animate-elem-17-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-17-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'calcMode'=spline.
</p>
<p>
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
black text and ruler lines help show the size and movement of the rectangle over time.
</p>
<p>
This animation shows calcMode="spline". Between time 4 seconds and 8 seconds, the animation displays an ease-in/ease-out approach
instead of a constant linear approach which would have been the case if calcMode had been linear instead.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. Between 4 and 8 seconds the animation should show an ease-in/ease-out motion (i.e. a gradual change in speed).
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-17-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">
<text font-size="40" x="3" y="45">calcMode="spline"</text>
<text font-size="40" x="3" y="100">keyTimes="0;.25;.5;1"</text>
<g xml:space="preserve" font-size="13.5" stroke-width="3">
<g transform="translate(150,140)">
<text font-size="36" x="-140" y="140">Time (s):</text>
<text font-size="36" x="290" y="140">0</text>
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="245" y="140">2</text>
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="170" y="140">4</text>
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="20" y="140">8</text>
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000"/>
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4">
<animate attributeName="width" calcMode="spline" values="300;255;180;30" keyTimes="0;.25;.5;1" keySplines="0,0,1,1;0,0,1,1;1,0,0,1" begin="0s" dur="8s" fill="freeze"/>
</rect>
</g>
</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>
Tests/W3CTestSuite/svg/animate-elem-19-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-19-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'calcMode'=linear.
</p>
<p>
One animation has been defined to animate the width of a rectangle. Ruler lines and text are provided
to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The
black text and ruler lines help show the size and movement of the rectangle over time.
</p>
<p>
This test shows an animation with calcMode="linear".
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. The rate of change will increase after each ruler line is passed.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-19-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">
<text font-size="40" x="3" y="45">calcMode="linear"</text>
<text font-size="40" x="3" y="100">keyTimes="0;.5;.75;1"</text>
<g xml:space="preserve" font-size="13.5" stroke-width="3">
<g transform="translate(150,140)">
<text font-size="36" x="-140" y="140">Time (s):</text>
<text font-size="36" x="290" y="140">0</text>
<line x1="300" y1="0" x2="300" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="245" y="140">4</text>
<line x1="255" y1="0" x2="255" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="170" y="140">6</text>
<line x1="180" y1="0" x2="180" y2="100" fill="none" stroke="#880000"/>
<text font-size="36" x="20" y="140">8</text>
<line x1="30" y1="0" x2="30" y2="100" fill="none" stroke="#880000"/>
<rect x="0" y="0" width="300" height="80" fill="#44AAFF" stroke="#880088" stroke-width="4">
<animate attributeName="width" calcMode="linear" values="300;255;180;30" keyTimes="0;.5;.75;1" begin="0s" dur="8s" fill="freeze"/>
</rect>
</g>
</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>
Tests/W3CTestSuite/svg/animate-elem-20-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
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>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<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>
Tests/W3CTestSuite/svg/animate-elem-21-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Chris lilley" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-21-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test for chained animations.
</p>
<p>
The assumption is that you will first click on "fade in" and
then click on "fade out", each exactly once. The first time you
select the link 'fade in', you should see a blue square appearing,
gradually and smoothly fading from white to blue over the
course of three seconds. This square is in front of and thus
obscures the lower left circle, but is behind the upper right
circle. The fill color of these circles is also animated, from white to
grey. The animations are triggered by the start of the corresponding
animation of the blue square.
</p>
<p>
With the second click on "fade in", however, the behavior might
be different. In the case of having a first click on "fade in",
waiting three seconds, and then immediately perform a first click
on "fade out", waiting three seconds, and then immediately perform
a second click on "fade in", you should see the following. After
the first click on "fade in", the blue square goes from white to blue.
After the first click on "fade out", the blue square goes
from blue to white. After the second click on "fade in",
however, the blue square goes from white to blue, and then
goes back from blue to white. This is because of the
hyperlinking rules as they relate to resolved start times in the
SMIL Animation specification.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<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, and two circles should fade from white to gray, all over the course of three seconds</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white, and the two circles should fade from gray to white, all over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, it should behave as the first time "fade in" was clicked but immediately followed by the "fade out" behaviour described above, so that the shapes all fade in over the course of three seconds, and then out again 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 compete. 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-21-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">
<circle stroke="white" stroke-width="30" fill="none" cx="100" cy="200" r="60">
<animate id="fadein" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="indefinite" dur="3s" fill="freeze"/>
<animate id="fadeout" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="indefinite" dur="3s" fill="freeze"/>
</circle>
<rect id="pink" x="20" y="20" width="180" height="180" fill="#fff">
<animate id="fadein2" attributeName="fill" attributeType="auto" from="#fff" to="blue" begin="fadein.begin" dur="3s" fill="freeze"/>
<animate id="fadeout2" attributeName="fill" attributeType="auto" from="blue" to="#fff" begin="fadeout.begin" dur="3s" fill="freeze"/>
</rect>
<circle stroke="white" stroke-width="20" fill="none" cx="200" cy="110" r="80">
<animate id="fadein3" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="fadein.begin" dur="3s" fill="freeze"/>
<animate id="fadeout3" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="fadeout.begin" dur="3s" fill="freeze"/>
</circle>
<!-- 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>
Tests/W3CTestSuite/svg/animate-elem-22-b.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-22-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test which verifies that the basic facilities of declarative
animation are working.
</p>
<p>
This test uses the following element : 'animate'
</p>
<p>
The test is a nine second animation with no repeats. It shows
a rectangle growing from small (37.5% width, 33.3% height) to
big (100% width, 100% height)
</p>
<p>
The file includes various guides that can be used to verify the
correctness of the animation. Outlines exist for the rectangle
size and location at times 0s, 3s and 9s.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if:</p>
<ul>
<li>At the start of the animation the innermost rectangle is filled by a yellow semitransparent color</li>
<li>Over the course of three seconds the yellow rect smoothly animates its width and height so that at time t=3s fully fills the middle rectangle</li>
<li>The animation then continues in the same fashion and at time t=9s fully fills the largest rectangle with blue stroke</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-22-b.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">
<!-- Guide objects to show where the animation elements belong at which time -->
<g font-family="Verdana" font-size="12">
<text x="200" y="131">Yellow rect at time 0s</text>
<rect x="200" y="135" width="50" height="50" fill="none" stroke="black"/>
<text x="141.6666" y="102.6666">Yellow rect at time 3s</text>
<rect x="141.6666" y="106.6666" width="166.6666" height="111.6666" fill="none" stroke="rgb(0,0,255)"/>
<text x="25" y="46">Yellow rect at time 9s</text>
<rect x="25" y="50" width="400" height="240" fill="none" stroke="rgb(0,0,255)"/>
</g>
<rect id="RectElement" x="200" y="135" width="50" height="50" fill="rgb(255,255,0)" opacity=".5">
<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="200" to="25"/>
<animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="135" to="50"/>
<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="50" to="400"/>
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="50" to="240"/>
</rect>
<!-- Set up a new user coordinate system so that the text string's
origin is at (0,0), allowing rotation and scale relative to
the new origin
-->
</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>
Tests/W3CTestSuite/svg/animate-elem-23-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-23-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test which verifies that the basic facilities of declarative
animation are working.
</p>
<p>
This test uses the following elements : 'set',
and 'animateColor'.
</p>
<p>
The test is a nine second animation with no repeats. It shows a circle
changing color from 3s to 9s.
</p>
<p>
The file includes various guides that can be used to verify the
correctness of the animation.
Boxes on the left show the correct circle color values at times
3s, 6s and 9s.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
</p>
<ul>
<li>From time t=0 seconds to t=3 seconds the large rectangle is filled with black</li>
<li>At t=3 seconds a blue circle appears inside the black rectangle</li>
<li>Between time t=3 seconds and t=6 seconds the fill of the circle is animated between blue and bluegreen</li>
<li>Between time t=6 seconds and t=9 seconds the fill of the circle is animated between bluegreen and green</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-23-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">
<!-- Guide objects to show where the animation elements belong at which time -->
<g font-size="12">
<text x="15" y="55">Color at 3s</text>
<rect x="15" y="60" width="30" height="30"/>
<circle cx="30" cy="75" r="10" fill="rgb(0,0,255)"/>
<text x="15" y="145">Color at 6s</text>
<rect x="15" y="150" width="30" height="30"/>
<circle cx="30" cy="165" r="10" fill="rgb(0,127,127)"/>
<text x="15" y="235">Color at 9s</text>
<rect x="15" y="240" width="30" height="30"/>
<circle cx="30" cy="255" r="10" fill="rgb(0,255,0)"/>
</g>
<g>
<rect x="150" y="50" width="240" height="240" stroke="black" fill="black"/>
<circle cx="270" cy="170" r="110" visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze"/>
<animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(0,255,0)" begin="3s" dur="6s" fill="freeze"/>
</circle>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</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>
Tests/W3CTestSuite/svg/animate-elem-24-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="CL" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-24-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test which verifies that the basic facilities of declarative
animation are working.
</p>
<p>
This test uses the following elements : 'animateMotion' and
'animateTransform'
</p>
<p>
The test is a nine second animation with no repeats. It shows
the text string "It's alive" moving, rotating and growing from
time 3s to 9s.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The file includes various guides that can be used to verify the
correctness of the animation. Pale blue guides exist for
the text size, location and orientation at times 3s, 6s and 9s.
</p>
<p>
The test is passed if the animated text covers the pale blue guides at
the indicated times on the test.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-24-t.svg,v $</title>
<defs>
<font id="MyFont" horiz-adv-x="416">
<font-face font-family="MyFont" units-per-em="1000" panose-1="2 0 0 6 3 0 0 2 0 4" ascent="700" descent="-127" alphabetic="0"/>
<missing-glyph horiz-adv-x="233"/>
<glyph unicode=" " glyph-name="space" horiz-adv-x="233"/>
<glyph unicode="I" glyph-name="I" horiz-adv-x="330" d="M30 700V550H90V150H30V0H300V150H240V550H300V700H30Z"/>
<glyph unicode="t" glyph-name="t" horiz-adv-x="417" d="M5 550V410H137V0H280V410H412V550H5Z"/>
<glyph unicode="s" glyph-name="s" horiz-adv-x="468" d="M34 550V410V218H291V120H34V0H434V338H177V430H434V550H34Z"/>
<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="198" d="M35 700L73 483H125L163 700H35Z"/>
<glyph unicode="a" glyph-name="a" horiz-adv-x="435" d="M71 550L3 0H143L154 119H282L293 0H433L365 550H71ZM168 259L182 410H254L268 259H168Z"/>
<glyph unicode="l" glyph-name="l" horiz-adv-x="435" d="M37 0H425V130H180V550H37V410V0Z"/>
<glyph unicode="i" glyph-name="i" horiz-adv-x="217" d="M37 550V410V0H180V550H37Z"/>
<glyph unicode="v" glyph-name="v" horiz-adv-x="430" d="M73 0H357L430 550H282L235 140H195L148 550H0L19 410L73 0Z"/>
<glyph unicode="e" glyph-name="e" horiz-adv-x="442" d="M37 550V410V0H419V130H180V210H299V340H180V420H419V550H37Z"/>
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="237" d="M46 145V0H191V145H46ZM58 220H179L194 700H43L58 220Z"/>
</font>
</defs>
<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>
<font id="MyFont" horiz-adv-x="416">
<font-face font-family="MyFont" units-per-em="1000" panose-1="2 0 0 6 3 0 0 2 0 4" ascent="700" descent="-127" alphabetic="0"/>
<missing-glyph horiz-adv-x="233"/>
<glyph unicode=" " glyph-name="space" horiz-adv-x="233"/>
<glyph unicode="I" glyph-name="I" horiz-adv-x="330" d="M30 700V550H90V150H30V0H300V150H240V550H300V700H30Z"/>
<glyph unicode="t" glyph-name="t" horiz-adv-x="417" d="M5 550V410H137V0H280V410H412V550H5Z"/>
<glyph unicode="s" glyph-name="s" horiz-adv-x="468" d="M34 550V410V218H291V120H34V0H434V338H177V430H434V550H34Z"/>
<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="198" d="M35 700L73 483H125L163 700H35Z"/>
<glyph unicode="a" glyph-name="a" horiz-adv-x="435" d="M71 550L3 0H143L154 119H282L293 0H433L365 550H71ZM168 259L182 410H254L268 259H168Z"/>
<glyph unicode="l" glyph-name="l" horiz-adv-x="435" d="M37 0H425V130H180V550H37V410V0Z"/>
<glyph unicode="i" glyph-name="i" horiz-adv-x="217" d="M37 550V410V0H180V550H37Z"/>
<glyph unicode="v" glyph-name="v" horiz-adv-x="430" d="M73 0H357L430 550H282L235 140H195L148 550H0L19 410L73 0Z"/>
<glyph unicode="e" glyph-name="e" horiz-adv-x="442" d="M37 550V410V0H419V130H180V210H299V340H180V420H419V550H37Z"/>
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="237" d="M46 145V0H191V145H46ZM58 220H179L194 700H43L58 220Z"/>
</font>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g font-size="20">
<text x="70" y="110">Text from 0s to 3s</text>
<text x="100" y="185">Text at 6s</text>
<text x="100" y="220">Text at 9s</text>
</g>
<!-- Guide objects to show where the animation elements belong at which time -->
<g font-family="MyFont" stroke="none" fill="#bee">
<text transform="translate(50,90) rotate(-30)" font-size="20">It's alive!</text>
<text transform="translate(75,180) rotate(-15)" font-size="40">It's alive!</text>
<text x="100" y="270" font-size="60">It's alive!</text>
</g>
<!-- Set up a new user coordinate system so that the text string's
origin is at (0,0), allowing rotation and scale relative to
the new origin
-->
<g transform="translate(50,90)">
<!-- The following illustrates the use of the 'animateMotion',
and 'animateTransform' elements. At 3 seconds, the text:
* continuously moves diagonally across the viewport
* rotates from -30 to zero degrees
* scales by a factor of three.
-->
<text id="TextElement" x="0" y="0" font-family="MyFont" font-size="20" fill="#36e" transform="rotate(-30)">
It's alive!
<animateMotion path="M 0 0 L 50 180" begin="3s" dur="6s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze"/>
</text>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</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>
Tests/W3CTestSuite/svg/animate-elem-25-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-25-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test animation options for specifying the target attribute/property.
</p>
<p>
The left-hand rectangle animates an XML attribute without
specifying a value for 'attributeType'. The right-hand rectangle
animates an XML attribute and does set 'attributeType' to 'XML'.
</p>
<p>
The left rectangle animates its height from 100 to 50,
starting at time 3 seconds and ending at 6 seconds.
The right rectangle animates its height from 100 to 50,
starting at time 6 seconds and ending at 9 seconds.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
</p>
<ul>
<li>the left yellow rectangle animates its height from 100 to 50,
starting at time 3 seconds and ending at 6 seconds, as indicated
by the green ruler lines.</li>
<li>the right yellow rectangle animates its height from 100 to 50,
starting at time 6 seconds and ending at 9 seconds, as indicated
by the green ruler lines.
</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-25-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">
<text font-family="Arial" font-size="14" x="30" y="40">Test animation options for specifying the target attribute/property.</text>
<g xml:space="preserve" font-family="Arial" font-size="14" stroke-width="3" transform="translate(0,50)">
<text x="20" y="164">0-3 sec. </text>
<line x1="80" y1="160" x2="200" y2="160" fill="none" stroke="green"/>
<text x="20" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" from="80" to="40" begin="3s" dur="3s" fill="freeze"/>
</rect>
<text x="240" y="164">0-6 sec. </text>
<line x1="305" y1="160" x2="425" y2="160" fill="none" stroke="green"/>
<text x="240" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="80" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>
Tests/W3CTestSuite/svg/animate-elem-26-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-26-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test animation options for specifying the target attribute/property.
</p>
<p>
On the left, a circle animates the stroke-width property without
specifying a value for 'attributeType'. On the right,
a circle animates the stroke-width property and does set 'attributeType' to 'CSS'.
</p>
<p>
For each circle, guides shows what
the stroke-width looks like initially and
what it looks like at the end of the animation.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
</p>
<ul>
<li>the left blue circle smoothly animates its stroke-width from time t=1 second to time t=5 seconds, so that the blue color fully fills the left donut shape</li>
<li>the right pink circle smoothly animates its stroke-width from time t=4 seconds to time t=7 seconds, so that the pink color fully fills the right donut shape</li>
<li>both of the stroke-width animations originate from the thin black circle in the middle of each donut shape</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-26-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">
<g font-size="30">
<circle cx="120" cy="140" r="70" fill="none" stroke="#36e" stroke-width="1">
<animate attributeName="stroke-width" from="1" to="60" begin="1s" dur="4s" fill="freeze"/>
</circle>
<circle cx="120" cy="140" r="40" fill="none" stroke="black" stroke-width="1"/>
<circle cx="120" cy="140" r="70" fill="none" stroke="black" stroke-width="1"/>
<circle cx="120" cy="140" r="100" fill="none" stroke="black" stroke-width="1"/>
<text x="70" y="280">anim. 1</text>
</g>
<g font-size="30">
<circle cx="360" cy="140" r="70" fill="none" stroke="#e3a" stroke-width="1">
<animate attributeName="stroke-width" attributeType="CSS" from="1" to="60" begin="4s" dur="3s" fill="freeze"/>
</circle>
<circle cx="360" cy="140" r="40" fill="none" stroke="black" stroke-width="1"/>
<circle cx="360" cy="140" r="70" fill="none" stroke="black" stroke-width="1"/>
<circle cx="360" cy="140" r="100" fill="none" stroke="black" stroke-width="1"/>
<text x="310" y="280">anim. 2</text>
</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>
Tests/W3CTestSuite/svg/animate-elem-27-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-27-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test animation options for specifying the target element.
</p>
<p>
The leftmost rectangle verifies the use of the 'xlink:href'
attribute to indicate the target element to be animated.
The rightmost rectangle verifies animating the parent of
the 'animate' element (in this case, a 'rect' element)
(i.e., the implicit parent of the 'animate' element).
</p>
<p>
At time 0, two rectangles filled with blue and stroked with
light blue appear, each with width=100 and height=160. Starting at
time 3 seconds and ending at time 6 seconds, the height of
the leftmost rectangle decreases from 160 to 40. Starting at
time 6 seconds and ending at time 9 seconds, the rightmost
rectangle decreases from 160 to 40. Annotations on the picture
show the correct positions at particular times.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
</p>
<ul>
<li>the left blue rectangle animates its height from 160 to 40,
starting at time 3 seconds and ending at 6 seconds, as indicated
by the green ruler lines.</li>
<li>the right blue rectangle animates its height from 160 to 40,
starting at time 6 seconds and ending at 9 seconds, as indicated
by the green ruler lines.
</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-27-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">
<text font-family="Arial" font-size="16" text-anchor="middle" x="225" y="40">Test animation options for specifying the target element.</text>
<g xml:space="preserve" font-family="Arial" font-size="14" text-anchor="end" stroke-width="3">
<text x="80" y="244">0 to 3 sec. </text>
<line x1="80" y1="240" x2="200" y2="240" fill="none" stroke="green"/>
<text x="80" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4"/>
<animate xlink:href="#rect1" attributeName="height" attributeType="XML" from="160" to="40" begin="3s" dur="3s" fill="freeze"/>
<text x="305" y="244">0 to 6 sec. </text>
<line x1="305" y1="240" x2="425" y2="240" fill="none" stroke="green"/>
<text x="305" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="160" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>
Tests/W3CTestSuite/svg/animate-elem-28-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Benoit Bezaire" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-28-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test inheritance of animated properties.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
A yellow happy face should be displayed. The stroke for the smile and
yellow circle are both animated, the stroke color fades from yellow to black.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-28-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">
<g stroke="#F1E900" fill="#F1E900" stroke-width="5">
<circle cx="240" cy="180" r="150"/>
<!--circle cx="240" cy="180" r="150" stroke-opacity=".5"/-->
<g id="eyes" stroke="#000077">
<path d="M260 131c0,-15 12,-28 28,-28 15,0 27,13 27,28 0,15 -12,28 -27,28 -16,0 -28,-13 -28,-28z"/>
<path d="M165 131c0,-15 12,-28 28,-28 15,0 27,13 27,28 0,15 -12,28 -27,28 -16,0 -28,-13 -28,-28z"/>
</g>
<path d="M151 227c46,52 138,52 184,0"/>
<animate attributeName="stroke" attributeType="CSS" begin="0s" dur="4s" fill="freeze" from="#F1E900" to="#000000"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>
Tests/W3CTestSuite/svg/animate-elem-29-b.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Chris Lilley" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-29-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test compositing of animated fill opacity.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
First click once on "fade in" and
then, once the animation has completed, click once on "fade out".
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The first time you
select the link 'fade in', you should see a green square appearing,
gradually and smoothly fading from zero to 100% opacity over the
course of three seconds. This square is in front of and thus
obscures the lower left circle, but is behind the upper right
circle which is thus composited on top of the animated green
square. Then, when you click on "fade out", the green square will
gradually disappear, smoothly fading from 100% to zero opacity
over the course of three seconds.
</p>
<p>
The rendered picture should match the reference image, (except
for possible variations in the labelling 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.
</p>
<!--
With a second click on "fade in", however, the behavior might
be different. In the case of having a first click on "fade in",
waiting three seconds, and then immediately perform a first click
on "fade out", waiting three seconds, and then immediately perform
a second click on "fade in", you should see the following. After
the first click on "fade in", the red square goes from zero to 100%
opacity. After the first click on "fade out", the red square goes
from 100% to zero opacity. After the second click on "fade in",
however, the red square goes from zero to 100% opacity, and then
goes back from 100% to zero opacity. This is because of the
hyperlinking rules as they relate to resolved start times in the
SMIL Animation specification.
-->
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-29-b.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">
<circle stroke="#666" stroke-width="30" fill="none" cx="100" cy="200" r="60"/>
<rect id="pink" x="20" y="20" width="180" height="180" fill="#080" fill-opacity="0">
<animate id="fadein" attributeName="fill-opacity" attributeType="auto" from="0" to="1" begin="indefinite" dur="3s" fill="freeze"/>
<animate id="fadeout" attributeName="fill-opacity" attributeType="auto" from="1" to="0" begin="indefinite" dur="3s" fill="freeze"/>
</rect>
<circle stroke="#666" stroke-width="20" fill="none" cx="200" cy="110" r="80"/>
<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.8 $</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>
Tests/W3CTestSuite/svg/animate-elem-30-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="VH" author="OA" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-30-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The purpose of this test is to test animated &lt;use&gt; where
the referenced &lt;defs&gt; also is animated.
</p>
<p>
The test shows 6 different elements, each element defined in a
&lt;defs&gt; and referenced with a &lt;use&gt;. All the elements are
animated between 0-3 seconds. The expected animation transform is
indicated with a gray silhouette showing the border values (0 and 3 seconds)
and an arrow indicating the movement in between.
For the two elements with a color animation, the colors goes from white to
blue (the same blue color used for all elements).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if:</p>
<ul>
<li>Each animated element (the line, circle, three-segment polyline, image
and the two rectangles) is transformed with a continuous animation
over three seconds. The size and shape of each element must start off
as shown by the silhouette at the start of the arrow, and must end
up as shown by the silhouette at the end of the arrow.</li>
<li>The fill of the two rectangles is animated over three seconds from
white to blue.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-30-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">
<g transform=" translate(20 0) scale(1.3 1.3)">
<!-- SILHOUETTES-->
<path d="M210 40 C210 40 210 100 170 190" fill="none" stroke="#b4b4b4"/>
<path d="M 171 188 l 10 -10 l -10 -4 z" fill="#b4b4b4" stroke="none"/>
<polyline fill="none" stroke="#b4b4b4" stroke-width="2" points="200,20 200,40 220,40 220,60"/>
<polyline transform="rotate(15)" fill="none" stroke="#b4b4b4" stroke-width="9" points="200,120 200,140 220,140 220,160"/>
<line x1="40" y1="50" x2="20" y2="10" stroke="#b4b4b4" stroke-width="3"/>
<line x1="160" y1="50" x2="80" y2="10" stroke="#b4b4b4" stroke-width="3"/>
<line x1="30" y1="30" x2="120" y2="30" stroke="#b4b4b4"/>
<path d="M 120 30 l -10 3 l 0 -6 z" fill="#b4b4b4" stroke="none"/>
<line x1="70" y1="70" x2="145" y2="70" stroke="#b4b4b4"/>
<rect x="10" y="60" width="60" height="20" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
<rect x="145" y="60" width="30" height="40" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
<path d="M 145 70 l -10 3 l 0 -6 z" fill="#b4b4b4" stroke="none"/>
<circle cx="30" cy="100" r="10" fill="#b4b4b4" stroke="#b4b4b4"/>
<circle cx="100" cy="195" r="15" fill="#b4b4b4" stroke="#b4b4b4"/>
<line x1="37" y1="107" x2="89" y2="184" stroke="#b4b4b4"/>
<path d="M 90 185 l -3 -12 l -6 5 z" fill="#b4b4b4" stroke="none"/>
<rect x="300" y="10" width="20" height="20" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
<rect x="300" y="170" width="20" height="40" fill="#b4b4b4" stroke="#b4b4b4" stroke-width="2"/>
<line x1="310" y1="30" x2="310" y2="170" stroke="#b4b4b4"/>
<path d="M 310 170 l -3 -10 l 6 0 z" fill="#b4b4b4" stroke="none"/>
<rect x="230" y="7.5" width="40" height="7.5" fill="#b4b4b4" stroke="none"/>
<rect x="230" y="170" width="40" height="30" fill="#b4b4b4" stroke="none"/>
<line x1="250" y1="10" x2="250" y2="170" stroke="#b4b4b4"/>
<path d="M 250 170 l -3 -10 l 6 0 z" fill="#b4b4b4" stroke="none"/>
<!-- END OF SILHOUETTES-->
<!-- DEFS-->
<defs>
<line id="lineID" x1="30" y1="50" x2="10" y2="10" stroke="rgb(16, 93, 140)" stroke-width="3">
<animate attributeName="x1" from="30" to="90" begin="0" dur="3" fill="freeze"/>
</line>
</defs>
<defs>
<rect id="rectID" x="10" y="60" width="60" height="20" fill="blue" stroke="black" stroke-width="2">
<animateColor attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/>
<animate attributeName="height" from="20" to="40" begin="0" dur="3" fill="freeze"/>
</rect>
</defs>
<defs>
<circle id="circleID" cx="20" cy="100" r="10" fill="rgb(16, 93, 140)" stroke="black">
<animate attributeName="cy" from="100" to="130" begin="0" dur="3" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1" to="1.5" additive="sum" begin="0" dur="3" fill="freeze"/>
</circle>
</defs>
<defs>
<polyline id="polylineID" fill="none" stroke="rgb(16, 93, 140)" stroke-width="2" points="200,20 200,40 220,40 220,60">
<animateMotion path="M 0 0 l 0 100" begin="0" dur="3" fill="freeze"/>
<animate attributeName="stroke-width" from="2" to="9" begin="0" dur="3" fill="freeze"/>
</polyline>
</defs>
<defs>
<polygon id="polygonID" fill="green" stroke="black" points="240,20 240,40 260,40 260,20" stroke-width="2">
<animate attributeName="fill" from="white" to="rgb(16, 93, 140)" begin="0" dur="3" fill="freeze"/>
</polygon>
</defs>
<defs>
<image id="imageID" x="230" y="20" width="40" height="80" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4RX+RXhpZgAASUkqAAgAAAAJAA8BAgAGAAAAegAAABABAgAXAAAAgAAAABIBAwABAAAAAQAAABoBBQABAAAAoAAAABsBBQABAAAAqAAAACgBAwABAAAAAgAAADIBAgAUAAAAsAAAABMCAwABAAAAAQAAAGmHBAABAAAAxAAAAGYFAABDYW5vbgBDYW5vbiBESUdJVEFMIElYVVMgMzAwAAAAAAAAAAAAALQAAAABAAAAtAAAAAEAAAAyMDAyOjAxOjE1IDA0OjQyOjU4ABsAmoIFAAEAAABWAwAAnYIFAAEAAABeAwAAAJAHAAQAAAAwMjEwA5ACABQAAAAOAgAABJACABQAAAAiAgAAAZEHAAQAAAABAgMAApEFAAEAAAA+AwAAAZIKAAEAAABGAwAAApIFAAEAAABOAwAABJIKAAEAAABmAwAABZIFAAEAAABuAwAABpIFAAEAAAB2AwAAB5IDAAEAAAAFAAAACZIDAAEAAAAAAAAACpIFAAEAAAB+AwAAfJIHAJoBAACGAwAAhpIHAAgBAAA2AgAAAKAHAAQAAAAwMTAwAaADAAEAAAABAAAAAqADAAEAAABABgAAA6ADAAEAAACwBAAABaAEAAEAAAAwBQAADqIFAAEAAAAgBQAAD6IFAAEAAAAoBQAAEKIDAAEAAAACAAAAF6IDAAEAAAACAAAAAKMHAAEAAAADAAAAAAAAADIwMDI6MDE6MTUgMDQ6NDI6NTgAMjAwMjowMToxNSAwNDo0Mjo1OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAQAAAPUAAAAgAAAA1QAAACAAAAABAAAAyAAAAGQAAAAKAAAAAAAAAAMAAACs3QIAAAABAP//AADoAwAAMAEAACAAAAAMAAEAAwAmAAAAHAQAAAIAAwAEAAAAaAQAAAMAAwAEAAAAcAQAAAQAAwAaAAAAeAQAAAAAAwAGAAAArAQAAAAAAwAEAAAAuAQAAAYAAgAgAAAAwAQAAAcAAgAYAAAA4AQAAAgABAABAAAAcVYQAAkAAgAgAAAA+AQAABAABAABAAAAAAAEAQ0AAwAEAAAAGAUAAAAAAABMAAIAAAADAAEAAAAAAAQAAAABAAAAAAAAAAAAAAAAAAAAAwABAAEwAAD/////BgKtACAAdADVAP//AAAAAAAAAAAAAP//AABABkAGAgAwAdMAngAAAAAAAAAAADQAAACPAD8B1QD1AAAAAAAAAAEAAwAAAAAAAAAHMAAAAAAAAAAA//8AANUA+QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAElNRzpESUdJVEFMIElYVVMgMzAwIEpQRUcAAAAAAAAARmlybXdhcmUgVmVyc2lvbiAxLjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAPQA9AD0AABqGADOAAAAgE8SAJsAAAAEAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAEQAwABAAAAQAYAAAIQAwABAAAAsAQAAAAAAAAGAAMBAwABAAAABgAAABoBBQABAAAAtAUAABsBBQABAAAAvAUAACgBAwABAAAAAgAAAAECBAABAAAA9AUAAAICBAABAAAA7g8AAAAAAAC0AAAAAQAAALQAAAABAAAA//////////////////////////////////////////////////9//////////////9j/2wCEAAkGBggGBQkIBwgKCQkLDRYPDQwMDRwTFRAWIR0jIiEcIB8kKTQsJCcxJx4fLT0tMTY3Ojo6Iio/RD44QjM3OTYBCQkJDAoMFAwMFA8KCgoPGhoKChoaTxoaGhoaT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAHgAoAMBIQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYX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yjLsY19AaUzJHncWPrmsWro1TsC38J6tge4NONxBMAFc59FJrFprbU1Ti9HoD2sLJhmbHo3SmJZwA5Bj46dqqM7kygiVJkiB+YnPbPFMa9jfcFwSPek43dxqSSsNa7mUbvLVB7tSHUHWLcYmHtkHNCh5sXP5EB1p0TAtHx6g4/lU0OqQyLlrd93q4z+tVZ9G0LnXVCyXdw5/cBMf7uaga+uQwLxIT6gYqlHzZLl5KwNcs7ZljOT6UmYznkp+JFaIhjMRqM+ac/72aljDsR+/z9GqkTYk8uRTnex+rVIszIMfOSfamB//2apR82S5eSsDXLO2ZYzk+lJmM//Y/+0O2lBob3Rvc2hvcCAzLjAAOEJJTQPtClJlc29sdXRpb24AAAAAEABIAAAAAQACAEgAAAABAAI4QklNBA0YRlggR2xvYmFsIExpZ2h0aW5nIEFuZ2xlAAAAAAQAAAAeOEJJTQQZEkZYIEdsb2JhbCBBbHRpdHVkZQAAAAAEAAAAHjhCSU0D8wtQcmludCBGbGFncwAAAAkAAAAAAAAAAAEAOEJJTQQKDkNvcHlyaWdodCBGbGFnAAAAAAEAADhCSU0nEBRKYXBhbmVzZSBQcmludCBGbGFncwAAAAAKAAEAAAAAAAAAAjhCSU0D9RdDb2xvciBIYWxmdG9uZSBTZXR0aW5ncwAAAEgAL2ZmAAEAbGZmAAYAAAAAAAEAL2ZmAAEAoZmaAAYAAAAAAAEAMgAAAAEAWgAAAAYAAAAAAAEANQAAAAEALQAAAAYAAAAAAAE4QklNA/gXQ29sb3IgVHJhbnNmZXIgU2V0dGluZ3MAAABwAAD/////////////////////////////A+gAAAAA/////////////////////////////wPoAAAAAP////////////////////////////8D6AAAAAD/////////////////////////////A+gAADhCSU0ECAZHdWlkZXMAAAAAEAAAAAEAAAJAAAACQAAAAAA4QklNBB4NVVJMIG92ZXJyaWRlcwAAAAQAAAAAOEJJTQQaBlNsaWNlcwAAAAB3AAAABgAAAAAAAAAAAAAAWgAAAHgAAAALAG8AcABlAHIAYQBfAGgAbwB1AHMAZQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAeAAA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">
<animate attributeName="y" from="5" to="145" begin="0" dur="3" fill="freeze"/>
</image>
</defs>
<!-- END OF DEFS-->
<!-- ACTUAL TEST CONTENT-->
<use xlink:href="#lineID">
<animate attributeName="x" from="10" to="70" begin="0" dur="3" fill="freeze"/>
</use>
<use xlink:href="#rectID">
<animateTransform attributeName="transform" type="translate" from="0 0" to="140 0" begin="0" dur="3" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1 1" to="0.5 1" begin="0" dur="3" additive="sum" fill="freeze"/>
</use>
<use xlink:href="#circleID">
<animate attributeName="x" from="10" to="70" begin="0" dur="3" fill="freeze"/>
</use>
<use xlink:href="#polylineID">
<animateTransform attributeName="transform" type="rotate" from="0" to="15" additive="sum" begin="0" dur="3" fill="freeze"/>
</use>
<use x="60" y="-10" xlink:href="#polygonID">
<animateMotion path="M 0 0 l 0 150" begin="0" dur="3" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1 1" to="1 2" begin="0" dur="3" additive="sum" fill="freeze"/>
</use>
<use xlink:href="#imageID">
<animateTransform attributeName="transform" type="scale" from="1 .25" to="1 1" begin="0" dur="3" additive="sum" fill="freeze"/>
</use>
<!-- END OF ACTUAL TEST CONTENT-->
</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>
Tests/W3CTestSuite/svg/animate-elem-31-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="VH" author="OA" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-31-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The purpose of this test is to test animation of the display attribute.
</p>
<p>
The test shows two gray rectangles which are filled with colored circles during the length of the animation (8 sec).
The circles in the top rectangle are displayed/hidden by animating the display attribute.
The circles in the bottom rectangle are serving as the reference and are displayed/hidden by animating the visibility attribute.
A correct implementation should display/hide circles with the same color from the top and bottom rectangle at the same time.
</p>
<p>
In total there are 6 different circles (purple, green, dodgerblue, blue, yellow, cyan) in 5 positions (blue and yellow share position) that should be displayed during the test.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>While the test is running (which takes approximately 8 seconds),
the text "Test running" is shown. The test passes if:</p>
<ul>
<li>While the test is running, the colored circles are variously shown and hidden.</li>
<li>A colored circle is shown in the top rectangle if and only if
the corresponding colored circle is shown in the bottom rectangle.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-31-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">
<!-- GRAY TESTAREAS-->
<rect x="5" y="7.5" width="375" height="75" fill="silver" stroke="black" stroke-width="3"/>
<rect x="5" y="112.5" width="375" height="75" fill="silver" stroke="black" stroke-width="3"/>
<g transform="scale(1.5)" display="inline">
<!-- PURPLE CIRCLES-->
<circle display="inline" cx="30" cy="30" r="20" fill="purple" stroke="black" stroke-width="5"/>
<circle display="inline" cx="30" cy="100" r="20" fill="purple" stroke="black" stroke-width="5">
<animate attributeName="visibility" from="visible" to="hidden" begin="6" dur="2"/>
</circle>
<!-- GREEN CIRCLES-->
<g display="none">
<circle display="inline" cx="80" cy="30" r="20" fill="green" stroke="black" stroke-width="5"/>
<animate attributeName="display" from="none" to="inline" begin="0" dur="3" fill="freeze"/>
</g>
<circle visibility="hidden" cx="80" cy="100" r="20" fill="green" stroke="black" stroke-width="5">
<animate attributeName="visibility" from="hidden" to="visible" begin="0" dur="3" fill="freeze"/>
</circle>
<!-- DODGERBLUE CIRCLES-->
<circle display="none" cx="130" cy="30" r="20" fill="dodgerblue" stroke="black" stroke-width="5">
<set attributeName="display" to="inline" begin="2" dur="1" fill="freeze"/>
</circle>
<circle visibility="hidden" cx="130" cy="100" r="20" fill="dodgerblue" stroke="black" stroke-width="5">
<animate attributeName="visibility" from="hidden" to="visible" begin="1" dur="2" fill="freeze"/>
</circle>
<!-- BLUE CIRCLES-->
<g display="none">
<g display="inherit">
<circle display="inline" cx="180" cy="30" r="20" fill="blue" stroke="black" stroke-width="5"/>
</g>
<animate attributeName="display" from="inline" to="none" begin="3" dur="3" fill="freeze"/>
</g>
<circle visibility="hidden" cx="180" cy="100" r="20" fill="blue" stroke="black" stroke-width="5">
<animate attributeName="visibility" from="visible" to="hidden" begin="3" dur="3" fill="freeze"/>
</circle>
<!-- YELLOW CIRCLES-->
<g display="none">
<g display="inherit">
<circle display="inline" cx="180" cy="30" r="20" fill="yellow" stroke="black" stroke-width="5"/>
</g>
<animate attributeName="display" from="none" to="inherit" begin="4" dur="3" fill="freeze"/>
</g>
<circle visibility="hidden" cx="180" cy="100" r="20" fill="yellow" stroke="black" stroke-width="5">
<animate attributeName="visibility" from="hidden" to="visible" begin="4" dur="3" fill="freeze"/>
</circle>
<!-- CYAN CIRCLES-->
<g display="none">
<circle cx="230" cy="30" r="20" fill="#00ffff" stroke="black" stroke-width="5">
<animate attributeName="display" begin="0" dur="0.5" keyTimes="0; 0.5; 1" values="inherit; none; inherit" repeatCount="8"/>
</circle>
<animate attributeName="display" begin="0" dur="2" keyTimes="0; 0.5; 1" values="inline; none; inline" repeatCount="2" fill="freeze"/>
</g>
<g visibility="hidden">
<circle cx="230" cy="100" r="20" fill="#00ffff" stroke="black" stroke-width="5">
<animate attributeName="visibility" begin="0" dur="0.5" keyTimes="0; 0.5; 1" values="inherit; hidden; inherit" repeatCount="8"/>
</circle>
<animate attributeName="visibility" begin="0" dur="2" keyTimes="0; 0.5; 1" values="visible; hidden; visible" repeatCount="2" fill="freeze"/>
</g>
<animate attributeName="display" from="inherit" to="none" begin="6" dur="2"/>
</g>
<text x="385" y="40" font-size="16">display</text>
<text x="385" y="150" font-size="18">visibility</text>
<text x="5" y="235" font-size="28">Test of display attribute animation.</text>
<text x="5" y="265" font-size="18">Circles with same color should be visible at same time.</text>
<text x="310" y="335" display="none" fill="red">Test running...
<set attributeName="display" to="inline" begin="0" dur="8.5"/>
</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>
Tests/W3CTestSuite/svg/animate-elem-32-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="CN" author="SH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-32-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Tests the animation to and from the degenerate cases of the basic shapes.
The shapes are drawn within the black rectangles.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if within each of the 11 rectangles an animated shape
is shown over the first six seconds and that after the six seconds, at the
end of the animation, each of these rectangles is empty.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-32-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">
<!-- ====================================================================== -->
<!-- Draw the boxes to contain the shapes and the text labels for the boxes -->
<!-- ====================================================================== -->
<g fill="black" stroke="none" font-family="Arial" font-size="8">
<text x="5" y="90">Stroked</text>
<text x="5" y="195">Unstroked</text>
<text x="50" y="135">Zero width rect</text>
<text x="130" y="135">Zero height rect</text>
<text x="210" y="135">Zero radius circle</text>
<text x="315" y="135">Zero x radius ellipse</text>
<text x="394" y="135">Zero y radius ellipse</text>
<text x="210" y="290">Zero length line</text>
</g>
<g fill="none" stroke="#000000">
<!-- rects -->
<rect x="50" y="50" width="35" height="60"/>
<rect x="50" y="155" width="35" height="60"/>
<rect x="130" y="50" width="35" height="60"/>
<rect x="130" y="155" width="35" height="60"/>
<!-- circles -->
<rect x="210" y="50" width="60" height="60"/>
<rect x="210" y="155" width="60" height="60"/>
<!-- ellipses -->
<rect x="315" y="50" width="35" height="60"/>
<rect x="315" y="155" width="35" height="60"/>
<rect x="394" y="50" width="35" height="60"/>
<rect x="394" y="155" width="35" height="60"/>
<!-- line -->
<rect x="210" y="260" width="60" height="10"/>
</g>
<!-- ====================================================================== -->
<!-- Draw 4 rectangles, two with zero width, two with zero height -->
<!-- (stroked and unstroked) -->
<!-- ====================================================================== -->
<rect id="Zero-width-stroked-rect" fill="#00FF00" stroke="#000000" x="55" y="55" height="50" width="0">
<animate attributeName="width" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="width" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</rect>
<rect id="Zero-height-stroked-rect" fill="#00FF00" stroke="#000000" x="135" y="55" width="25" height="0">
<animate attributeName="height" from="0" to="50" begin="0" dur="3" fill="freeze"/>
<animate attributeName="height" from="50" to="0" begin="3" dur="3" fill="freeze"/>
</rect>
<rect id="Zero-width-unstroked-rect" fill="#FF8000" stroke="none" x="55" y="160" height="50" width="0">
<animate attributeName="width" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="width" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</rect>
<rect id="Zero-height-unstroked-rect" fill="#FF8000" stroke="none" x="135" y="160" width="25" height="0">
<animate attributeName="height" from="0" to="50" begin="0" dur="3" fill="freeze"/>
<animate attributeName="height" from="50" to="0" begin="3" dur="3" fill="freeze"/>
</rect>
<!-- ====================================================================== -->
<!-- Draw two zero radius circles (stroked and unstroked) -->
<!-- ====================================================================== -->
<circle id="Zero-radius-stroked-circle" fill="#00FF00" stroke="#000000" cx="240" cy="80" r="0">
<animate attributeName="r" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="r" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</circle>
<circle id="Zero-radius-unstroked-circle" fill="#FF8000" stroke="none" cx="240" cy="185" r="0">
<animate attributeName="r" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="r" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</circle>
<!-- ====================================================================== -->
<!-- Draw 4 ellipses, two with a zero x radius, two with a zero y radius -->
<!-- (stroked and unstroked) -->
<!-- ====================================================================== -->
<ellipse id="Zero-x-radius-stroked-ellipse" fill="#00FF00" stroke="#0000FF" cx="332" cy="80" rx="0" ry="25">
<animate attributeName="rx" from="0" to="12" begin="0" dur="3" fill="freeze"/>
<animate attributeName="rx" from="12" to="0" begin="3" dur="3" fill="freeze"/>
</ellipse>
<ellipse id="Zero-x-radius-unstroked-ellipse" fill="#FF8000" stroke="none" cx="332" cy="185" rx="0" ry="25">
<animate attributeName="rx" from="0" to="12" begin="0" dur="3" fill="freeze"/>
<animate attributeName="rx" from="12" to="0" begin="3" dur="3" fill="freeze"/>
</ellipse>
<ellipse id="Zero-y-radius-stroked-ellipse" fill="#00FF00" stroke="#0000FF" cx="411" cy="80" rx="12" ry="0">
<animate attributeName="ry" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="ry" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</ellipse>
<ellipse id="Zero-y-radius-unstroked-ellipse" fill="#FF8000" stroke="none" cx="411" cy="185" rx="12" ry="0">
<animate attributeName="ry" from="0" to="25" begin="0" dur="3" fill="freeze"/>
<animate attributeName="ry" from="25" to="0" begin="3" dur="3" fill="freeze"/>
</ellipse>
<!-- ====================================================================== -->
<!-- Draw a zero-length line -->
<!-- ====================================================================== -->
<line id="Zero-length-line" stroke="#0000FF" x1="240" y1="265" x2="240" y2="265">
<animate attributeName="x1" from="240" to="215" begin="0" dur="3" fill="freeze"/>
<animate attributeName="x2" from="240" to="265" begin="0" dur="3" fill="freeze"/>
<animate attributeName="x1" from="215" to="240" begin="3" dur="3" fill="freeze"/>
<animate attributeName="x2" from="265" to="240" begin="3" dur="3" fill="freeze"/>
</line>
</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>
Tests/W3CTestSuite/svg/animate-elem-33-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="VH" author="OA" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-33-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The purpose of this test is to test animateMotion with keyPoints and keyTimes.
</p>
<p>
The test consists of 4 sub-tests. Each test has a purple circle which moves along a path. The path is indicated with a dashed line and sample points where the circle should pass a certain position on the path is indicated with gray circles. On top of each gray circle is a number which indicates the passing time in seconds. In the cases where the purple circle should pass the gray circle two times the first passing time is written above the gray circle and the second passing time is written below.
</p>
<p>
Section 19.2.12 in the spec. states that a motion path is defined by the path attribute or by values or from/to attributes. So in the animateMotion case, values is just used for defining the motionPath and the number of values do not have to relate to the number of keyTimes.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if, for the first four seconds of the document,
each of the four purple circles moves along the dashed lines
such that they coincide with the gray circles at the times indicated
next to those gray circles. The purple circles must all move continuously
over the four seconds, except for the top-right one, which
jumps discontinuously at 2s from the second grey circle to
the third in that subtest.</p>
<p>If a range of times is given next to a grey circle, then the purple
circle must stay stationary at that position for that duration.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-33-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">
<!-- FIRST TEST-->
<g transform="translate(110, 50) scale(0.6)">
<text x="-160" y="-30" font-size="30" stroke="none" fill="#ccc">0</text>
<text x="-50" y="-30" font-size="30" stroke="none" fill="#ccc">0.8-3.2</text>
<text x="140" y="-30" font-size="30" stroke="none" fill="#ccc">4</text>
<g fill="none" stroke="#888" stroke-dasharray="10,6">
<polyline points="-150,0 0,0 150,0"/>
</g>
<g fill="#ccc" stroke="#555">
<circle cx="-150" r="20"/>
<circle r="20"/>
<circle cx="150" r="20"/>
</g>
<circle r="20" fill="rgb(204,0,102)" stroke="#000" stroke-width="3">
<animateMotion dur="4" values="-150 0; 150 0" calcMode="linear" fill="freeze" keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1" keyPoints="0; 0.5; 0.5; 0.5; 0.5; 1"/>
</circle>
</g>
<!-- SECOND TEST-->
<g transform="translate(370, 50) scale(0.6)">
<text x="-160" y="-30" font-size="30" stroke="none" fill="#ccc">0</text>
<text x="-100" y="-30" font-size="30" stroke="none" fill="#ccc">2</text>
<text x="80" y="-30" font-size="30" stroke="none" fill="#ccc">2</text>
<text x="140" y="-30" font-size="30" stroke="none" fill="#ccc">4</text>
<g fill="none" stroke="#888" stroke-dasharray="10,6">
<polyline points="-150,0 -90,0"/>
<polyline points="90,0 150,0"/>
</g>
<g fill="#ccc" stroke="#555">
<circle cx="-150" r="20"/>
<circle cx="-90" r="20"/>
<circle cx="90" r="20"/>
<circle cx="150" r="20"/>
</g>
<circle r="20" fill="rgb(204,0,102)" stroke="#000" stroke-width="3">
<animateMotion dur="4" values="-150 0; 150 0" calcMode="linear" fill="freeze" keyTimes="0; 0.5; 0.5; 0.5; 0.5; 1" keyPoints="0; 0.2; 0.4; 0.6; 0.8; 1"/>
</circle>
</g>
<!-- THIRD TEST-->
<!-- The lenght of the lines in the polyline (motionpath) are 100,50 and 100.
The animated circle starts at the midpoint of one of the "legs" and also pass
this point at time 1.4 since
1.4 = 4*(0.25) + (4*(0.75-0.25))*(1/5).
Where 0.25 is the time at keyPoint 1 (2nd) and 1/5 since the control circle is at
1/5 of the distance between keyPoint 1 and 0 (2nd and 3rd).-->
<g transform="translate(110, 180) scale(0.6)">
<text x="-115" y="-30" font-size="30" stroke="none" fill="#ccc">3</text>
<text x="-85" y="-60" font-size="30" stroke="none" fill="#ccc">2.6</text>
<text x="60" y="-60" font-size="30" stroke="none" fill="#ccc">0</text>
<text x="95" y="-30" font-size="30" stroke="none" fill="#ccc">1</text>
<text x="-75" y="20" font-size="30" stroke="none" fill="#ccc">4</text>
<text x="40" y="20" font-size="30" stroke="none" fill="#ccc">1.4</text>
<g fill="none" stroke="#888" stroke-dasharray="10,6">
<polyline points="-105,0 -25,-60 25,-60 105,0"/>
</g>
<g fill="#ccc" stroke="#555">
<circle cx="-105" r="20"/>
<circle cx="-65" cy="-30" r="20"/>
<circle cx="65" cy="-30" r="20"/>
<circle cx="105" r="20"/>
</g>
<circle r="20" fill="rgb(204,0,102)" stroke="#000" stroke-width="3">
<animateMotion dur="4" path="M -105,0 L -25,-60 25,-60 105,0" calcMode="linear" fill="freeze" keyPoints="0.8; 1; 0; 0.2" keyTimes="0; 0.25; 0.75; 1"/>
</circle>
</g>
<!-- FOURTH TEST-->
<g transform="translate(370, 160) scale(0.6)">
<text x="-135" y="-30" font-size="30" stroke="none" fill="#ccc">3</text>
<text x="-95" y="-30" font-size="30" stroke="none" fill="#ccc">2.6</text>
<text x="65" y="-30" font-size="30" stroke="none" fill="#ccc">0</text>
<text x="115" y="-30" font-size="30" stroke="none" fill="#ccc">1</text>
<text x="-85" y="50" font-size="30" stroke="none" fill="#ccc">4</text>
<text x="50" y="50" font-size="30" stroke="none" fill="#ccc">1.4</text>
<g fill="none" stroke="#888" stroke-dasharray="10,6">
<polyline points="-125,0 125,0"/>
</g>
<g fill="#ccc" stroke="#555">
<circle cx="-125" r="20"/>
<circle cx="-75" r="20"/>
<circle cx="75" r="20"/>
<circle cx="125" r="20"/>
</g>
<circle r="20" fill="rgb(204,0,102)" stroke="#000" stroke-width="3">
<animateMotion dur="4" from="-125,0" to="125,0" calcMode="linear" fill="freeze" keyPoints="0.8; 1; 0; 0.2" keyTimes="0; 0.25; 0.75; 1"/>
</circle>
</g>
<text x="5" y="235" font-size="28">Test of keyPoints and keyTimes.</text>
<text x="5" y="265" font-size="18">Number indicates the circle's passing time in seconds.</text>
</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>
Tests/W3CTestSuite/svg/animate-elem-34-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="VH" author="OA" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-34-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The purpose of this test is to test animation of attributes points and fill-rule.
</p>
<p>
The test consists of 2 sub-tests. The first test is a polygon shaped as a digit. The polygon
has an animation on its vertex points which morphs the polygon between the numbers 1, 2, 3
and 4. The gray outlines indicates the expected position of the polygon at 1, 2, 3 and 4s.
The second test is 4 paths in a u-shape. They have animated fill-rules. Their initial
fill-rules are, from left to right, nonzero, evenodd, nonzero (by default value, no fill-rule attribute set)
and nonzero (by default value, no fill-rule attribute set). This means, that the second path is
initially u-shaped, and all other paths are initially rect-shaped. All four animations are set to evenodd as a last stage.
The further expected result is that one path at a time is filled. The other three paths are not filled but have the u-shape.
The fourth animation from evenodd to nonzero happens by going back to the initial state,
because the fill attribute is not set to freeze. Which path that should be filled at
which time is indicated by the number above it (indicating time in seconds). To enhance the
difference between the filled path and the rest, the filled path should always have the
same color as the morphing polygon. This is achieved by a discrete color animation.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if all of the following conditions are met:</p>
<ul>
<li>The red path in the shape of the digit "1" morphs continuously over three seconds
(from 1s to 4s in document time) to the shape of "2", "3" and then "4". The gray paths
show the four shapes and positions that the red path takes as it morphs.</li>
<li>Initially, when the document is loaded, of the four paths underneath each of the
four digits, the second one is u-shaped, while the other three are square shaped.
The first path is red, while the remaining three are gray.</li>
<li>From 1s to 2s, the path below the "1" digit is red and square-shaped and the others are gray and u-shaped.</li>
<li>From 2s to 3s, the path below the "2" digit is red and square-shaped and the others are gray and u-shaped.</li>
<li>From 3s to 4s, the path below the "3" digit is red and square-shaped and the others are gray and u-shaped.</li>
<li>From 4s onwards, the path below the "4" digit is red and square-shaped and the others are gray and u-shaped.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-34-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">
<g transform="translate(40,0) scale(0.8)">
<!-- GRAY SILHOUETTES INDICATING TIME IN SECONDS-->
<polygon points="248.5,38.5 276.5,22.5 298.5,19.5 316.5,26.5 332.5,40.5 331.5,57.5 322.5,70.5 307.5,76.5 314.5,80.5 324.5,86.5 333.5,99.5 333.5,121.5 327.5,130.5 312.5,143.5 292.5,149.5 270.5,148.5 248.5,142.5 252.5,114.5 267.5,119.5 282.5,119.5 297.5,115.5 304.5,109.5 295.5,99.5 284.5,92.5 277.5,84.5 270.5,74.5 281.5,66.5 293.5,60.5 297.5,50.5 292.5,45.5 281.5,45.5 274.5,49.5 266.5,53.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<polygon points="108.5,38.5 123.5,26.5 148.5,16.5 172.5,17.5 188.5,19.5 202.5,23.5 206.5,26.5 210.5,37.5 213.5,44.5 215.5,57.5 209.5,68.5 203.5,81.5 187.5,98.5 164.5,120.5 206.5,121.5 224.5,121.5 220.5,149.5 194.5,147.5 181.5,147.5 167.5,146.5 150.5,147.5 133.5,149.5 117.5,148.5 117.5,136.5 118.5,124.5 133.5,115.5 151.5,97.5 170.5,78.5 186.5,59.5 179.5,43.5 159.5,35.5 139.5,40.5 125.5,49.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<polygon points="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5 72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5 72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5 46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5 22.5,51.5 22.5,41.5 22.5,33.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<polygon points="427.5,17.5 439.5,15.5 449.5,15.5 449.5,29.5 447.5,44.5 447.5,59.5 465.5,60.5 466.5,74.5 465.5,89.5 450.5,87.5 449.5,102.5 449.5,123.5 449.5,140.5 449.5,153.5 420.5,154.5 421.5,137.5 420.5,123.5 420.5,111.5 419.5,99.5 392.5,97.5 367.5,99.5 366.5,79.5 367.5,69.5 376.5,43.5 381.5,27.5 384.5,17.5 412.5,16.5 406.5,36.5 400.5,49.5 394.5,70.5 419.5,71.5 423.5,49.5 424.5,33.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<!-- FIRST TEST, POINTS-->
<polygon points="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5 72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5 72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5 46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5 22.5,51.5 22.5,41.5 22.5,33.5" fill="rgb(204,0,102)" stroke="rgb(0,0,0)" stroke-width="4">
<animate attributeName="points" values="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5 72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5 72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5 46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5 22.5,51.5 22.5,41.5 22.5,33.5 ; 108.5,38.5 123.5,26.5 148.5,16.5 172.5,17.5 188.5,19.5 202.5,23.5 206.5,26.5 210.5,37.5 213.5,44.5 215.5,57.5 209.5,68.5 203.5,81.5 187.5,98.5 164.5,120.5 206.5,121.5 224.5,121.5 220.5,149.5 194.5,147.5 181.5,147.5 167.5,146.5 150.5,147.5 133.5,149.5 117.5,148.5 117.5,136.5 118.5,124.5 133.5,115.5 151.5,97.5 170.5,78.5 186.5,59.5 179.5,43.5 159.5,35.5 139.5,40.5 125.5,49.5; 248.5,38.5 276.5,22.5 298.5,19.5 316.5,26.5 332.5,40.5 331.5,57.5 322.5,70.5 307.5,76.5 314.5,80.5 324.5,86.5 333.5,99.5 333.5,121.5 327.5,130.5 312.5,143.5 292.5,149.5 270.5,148.5 248.5,142.5 252.5,114.5 267.5,119.5 282.5,119.5 297.5,115.5 304.5,109.5 295.5,99.5 284.5,92.5 277.5,84.5 270.5,74.5 281.5,66.5 293.5,60.5 297.5,50.5 292.5,45.5 281.5,45.5 274.5,49.5 266.5,53.5 ; 427.5,17.5 439.5,15.5 449.5,15.5 449.5,29.5 447.5,44.5 447.5,59.5 465.5,60.5 466.5,74.5 465.5,89.5 450.5,87.5 449.5,102.5 449.5,123.5 449.5,140.5 449.5,153.5 420.5,154.5 421.5,137.5 420.5,123.5 420.5,111.5 419.5,99.5 392.5,97.5 367.5,99.5 366.5,79.5 367.5,69.5 376.5,43.5 381.5,27.5 384.5,17.5 412.5,16.5 406.5,36.5 400.5,49.5 394.5,70.5 419.5,71.5 423.5,49.5 424.5,33.5" fill="freeze" begin="1" dur="3s"/>
</polygon>
<!-- SECOND TEST, FILL-RULE-->
<g transform="scale(0.3) translate(-450, 500)">
<path fill-rule="nonzero" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
<animate attributeName="fill-rule" values="nonzero; evenodd; evenodd; evenodd" begin="1" dur="4" fill="freeze"/>
<animate attributeName="fill" from="rgb(204,0,102)" to="#ccc" begin="0" dur="4" calcMode="discrete" fill="freeze"/>
</path>
</g>
<g transform="scale(0.3) translate(-30, 500)">
<path fill-rule="evenodd" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
<animate attributeName="fill-rule" values="evenodd; nonzero; evenodd; evenodd" begin="1" dur="4" fill="freeze"/>
<animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="1" dur="2" calcMode="discrete" fill="remove"/>
</path>
</g>
<g transform="scale(0.3) translate(390, 500)">
<path fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
<animate attributeName="fill-rule" values="evenodd; evenodd; nonzero; evenodd" begin="1" dur="4" fill="freeze"/>
<animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="2" dur="2" calcMode="discrete" fill="remove"/>
</path>
</g>
<g transform="scale(0.3) translate(810, 500)">
<path fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
<animate attributeName="fill-rule" values="evenodd; evenodd; evenodd" begin="1" dur="3"/>
<animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="3" dur="2" calcMode="discrete" fill="freeze"/>
</path>
</g>
</g>
<text x="5" y="225" font-size="28">Animation on: 'points' and 'fill-rule'.</text>
<text x="5" y="255" font-size="18">Digit should match outline at indicated time.</text>
<text x="5" y="275" font-size="18">Filled square should follow morphing digit discretely.</text>
</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>
Tests/W3CTestSuite/svg/animate-elem-35-t.svg 0 → 100644
View file @ d5c659a5
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= 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. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="VH" author="OA" status="issue"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-35-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The purpose of this test is to test animation of attributes stroke-dasharray,
stroke-dashoffset, stroke-miterlimit, stroke-linecap and stroke-linjoin.
</p>
<!-- this test is way too complicated and requires the tester to keep an eye on many things simultaneously. It has no well-defined pass criteria. The test should be split into several subtests.
-->
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
This file contains four tests, testing animation of five attributes.
The first test animates the stroke-dashoffset. There are seven reference polylines, all with
the same stroke-dasharray but with different values on their stroke-dashoffset. A red polyline
with the same stroke-dash array has an animation on its stroke-dasharray. The red polyline is
animated so that it stops by the reference polyline that has the right stroke-dashoffset at
that perticular time.
The second test animates stroke-linecap and stroke-linejoin. There are three reference
polylines. Comparsion is done in the same manner as in the previous test.
The third test animates the stroke-miterlimit. There are two sets offilled reference paths
(black) and two outlined paths (red) with animated stroke-miterlimit. The paths are shaped like
a capital A. In the upper test the animated path is drawn on top of the reference polygons and
in the lower test the reference path is drawn on top of the animated path. As the
stroke-miterlimit is animated to different values, different reference paths are used. To pass
the test, there should never be any part of the underlying geometry visible (black in the upper
or red in the lower).
The fourth test animates the stroke-dasharray. The initial stroke-dasharray gives a
short-dashed line. This pattern is animated into a pattern that on this short path gives a
solid line at 2 seconds.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
[[Describe the pass criteria of the test here. The pass criteria is what
should be displayed when the test is run.]]
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-35-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">
<g transform="translate(0,0) scale(0.9)">
<g>
<g fill="none" stroke="gray" stroke-width="15">
<g stroke="black">
<polyline id="poly" stroke-dasharray="90,20,5,15" points="240,20,300,20,240,80,300,80">
<animate begin="0" dur="10" attributeName="stroke-linecap" values="butt; round; square; square" keyTimes="0; 0.33; 0.66; 1" fill="freeze"/>
<animate begin="0" dur="10" attributeName="stroke-linejoin" values="miter; round; bevel; bevel" keyTimes="0; 0.33; 0.66; 1" fill="freeze"/>
</polyline>
<use x="0" y="0" stroke="red" stroke-width="1" xlink:href="#poly"/>
<animateTransform type="translate" begin="0" dur="10" values="0 0; 0 0; 0 95; 0 95; 0 190; 0 190" keyTimes="0; 0.3; 0.35; 0.65; 0.7; 1" attributeName="transform" fill="freeze"/>
</g>
<polyline id="poly1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="90,20,5,15" points="140,20,200,20,140,80,200,80"/>
<polyline id="poly2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="90,20,5,15" points="140,115,200,115,140,175,200,175"/>
<polyline id="poly3" stroke-linecap="square" stroke-linejoin="bevel" stroke-dasharray="90,20,5,15" points="140,210,200,210,140,270,200,270"/>
<use x="0" y="0" stroke="red" stroke-width="1" xlink:href="#poly1"/>
<use x="0" y="0" stroke="red" stroke-width="1" xlink:href="#poly2"/>
<use x="0" y="0" stroke="red" stroke-width="1" xlink:href="#poly3"/>
</g>
<g>
<polyline fill="none" stroke="gray" stroke-dashoffset="-50" stroke-dasharray="5,5,20" stroke-width="5" points="10,10,50,10,10,40,50,40"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="-30" stroke-dasharray="5,5,20" stroke-width="5" points="10,50,50,50,10,80,50,80"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="-10" stroke-dasharray="5,5,20" stroke-width="5" points="10,90,50,90,10,120,50,120"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="0" stroke-dasharray="5,5,20" stroke-width="5" points="10,130,50,130,10,160,50,160"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="10" stroke-dasharray="5,5,20" stroke-width="5" points="10,170,50,170,10,200,50,200"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="30" stroke-dasharray="5,5,20" stroke-width="5" points="10,210,50,210,10,240,50,240"/>
<polyline fill="none" stroke="gray" stroke-dashoffset="50" stroke-dasharray="5,5,20" stroke-width="5" points="10,250,50,250,10,280,50,280"/>
</g>
<g>
<polyline fill="none" stroke="red" stroke-dasharray="5,5,20" stroke-width="5" points="60,10,100,10,60,40,100,40">
<animate attributeName="stroke-dashoffset" begin="0" dur="10" values="-50; -50; -30; -30; -10; -10; 0; 0; 10; 10; 30; 30; 50; 50" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.45; 0.5; 0.55; 0.6; 1" fill="freeze"/>
</polyline>
<animateTransform type="translate" begin="0" dur="10" values="0 0; 0 0; 0 40; 0 40; 0 80; 0 80; 0 120; 0 120; 0 160; 0 160; 0 200; 0 200; 0 240; 0 240" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.45; 0.5; 0.55; 0.6; 1" attributeName="transform" fill="freeze"/>
</g>
</g>
<g id="miterLimit" visibility="hidden" transform="scale(2.5) translate(130 2)">
<g id="reference">
<g>
<path d="M16,51.1c0.8-2.9,2.5-9.2,3-11c2.1,0,8.9,0,11,0c0.5,1.7,2.5,8.2,3.3,11.1l1.9,1.4H47l1.9-2.6L33.8,1.4L31.9,0H17.5 l-1.9,1.4L0.8,49.9l1.9,2.6h11.4L16,51.1z M15.5,37.5c-0.8,2.9-2.5,9.2-3,11c-1.7,0-4.6,0-7.1,0C6.8,44,18.2,6.5,19,4 c2.1,0,9.3,0,11.4,0c0.8,2.5,12.5,40,13.9,44.5c-2.7,0-5.9,0-7.6,0c-0.5-1.7-2.5-8.2-3.3-11l-1.9-1.4H17.4L15.5,37.5z"/>
<path d="M22.3,9.8l-2.3,9.3l-2.9,10.2l1.9,2.6h10.7l1.9-2.6l-3-10.3c0,0-2.5-9.3-2.5-9.3L22.3,9.8z M23.9,20.1 c0,0,0.2-0.8,0.4-1.8c0.1,0.5,0.5,1.8,0.5,1.8s1.4,4.9,2.3,7.8c-2,0-3.4,0-5.4,0C22.5,25,23.9,20.1,23.9,20.1z"/>
<set attributeName="visibility" begin="0" dur="2" to="visible"/>
</g>
<g>
<path d="M31.9,0H16.1L0.8,49.9l1.9,2.6h12.9c0,0,2.8-10.2,3.4-12.5c2.1,0,8.9,0,11,0c0.7,2.2,3.7,12.5,3.7,12.5H47l1.9-2.6 L33.3,0H31.9z M30.4,4c0.8,2.5,12.5,40,13.9,44.5c-2.7,0-5.9,0-7.6,0c-0.7-2.2-3.7-12.5-3.7-12.5h-17c0,0-2.8,10.2-3.4,12.5 c-1.7,0-4.6,0-7.1,0C6.8,44,18.2,6.5,19,4C21.1,4,28.3,4,30.4,4z"/>
<path d="M22.3,9.8l-2.3,9.3l-2.9,10.2l1.9,2.6h10.7l1.9-2.6l-3-10.3c0,0-2.5-9.3-2.5-9.3L22.3,9.8z M23.9,20.1 c0,0,0.2-0.8,0.4-1.8c0.1,0.5,0.5,1.8,0.5,1.8s1.4,4.9,2.3,7.8c-2,0-3.4,0-5.4,0C22.5,25,23.9,20.1,23.9,20.1z"/>
<set attributeName="visibility" begin="2.5" dur="2" to="visible"/>
</g>
<g>
<path d="M31.9,0H16.1L0,52.5h15.6c0,0,2.8-10.2,3.4-12.5c2.1,0,8.9,0,11,0c0.7,2.2,3.7,12.5,3.7,12.5h16L33.3,0H31.9z M30.4,4 c0.8,2.5,12.5,40,13.9,44.5c-2.7,0-5.9,0-7.6,0c-0.7-2.2-3.7-12.5-3.7-12.5h-17c0,0-2.8,10.2-3.4,12.5c-1.7,0-4.6,0-7.1,0 C6.8,44,18.2,6.5,19,4C21.1,4,28.3,4,30.4,4z"/>
<path d="M22.3,9.8l-2.3,9.3l-3.7,12.8h16.1L28.7,19c0,0-2.5-9.3-2.5-9.3L22.3,9.8z M23.9,20.1c0,0,0.2-0.8,0.4-1.8 c0.1,0.5,0.5,1.8,0.5,1.8s1.4,4.9,2.3,7.8c-2,0-3.4,0-5.4,0C22.5,25,23.9,20.1,23.9,20.1z"/>
<set attributeName="visibility" begin="5" dur="2" to="visible"/>
</g>
<g>
<path d="M31.9,0H16.1L0,52.5h15.6c0,0,2.8-10.2,3.4-12.5c2.1,0,8.9,0,11,0c0.7,2.2,3.7,12.5,3.7,12.5h16L33.3,0H31.9z M30.4,4 c0.8,2.5,12.5,40,13.9,44.5c-2.7,0-5.9,0-7.6,0c-0.7-2.2-3.7-12.5-3.7-12.5h-17c0,0-2.8,10.2-3.4,12.5c-1.7,0-4.6,0-7.1,0 C6.8,44,18.2,6.5,19,4C21.1,4,28.3,4,30.4,4z"/>
<path d="M22.3,9.8l-2.3,9.3l-3.7,12.8h16.1L28.7,19c0,0-2.5-9.3-2.5-9.3l-2-7.6L22.3,9.8z M23.9,20.1c0,0,0.2-0.8,0.4-1.8 c0.1,0.5,0.5,1.8,0.5,1.8s1.4,4.9,2.3,7.8c-2,0-3.4,0-5.4,0C22.5,25,23.9,20.1,23.9,20.1z"/>
<set attributeName="visibility" begin="7.5" to="visible"/>
</g>
</g>
<g id="animated">
<path fill="none" stroke="#FF0000" stroke-width="4" stroke-miterlimit="1" d="M17.5,38.1l-3.4,12.5H2.7L17.5,2h14.3L47,50.5 H35.2l-3.7-12.5H17.5z M29.8,29.9l-3-10.3C26,16.7,25,13,24.3,10.2c-0.6,2.9-1.5,6.6-2.3,9.4l-3,10.3H29.8z">
<animate attributeName="stroke-miterlimit" attributeType="CSS" begin="0" dur="10" keyTimes="0; 0.2; 0.25; 0.45; 0.5; 0.7; 0.75; 1" fill="freeze" values="1; 1; 1.5; 1.5; 2; 2; 5; 5"/>
</path>
<set attributeName="visibility" begin="0" dur="2" to="visible"/>
<set attributeName="visibility" begin="2.5" dur="2" to="visible"/>
<set attributeName="visibility" begin="5" dur="2" to="visible"/>
<set attributeName="visibility" begin="7.5" to="visible"/>
</g>
<use x="0" y="60" xlink:href="#animated"/>
<use x="0" y="60" xlink:href="#reference"/>
</g>
<path fill="none" stroke="blue" stroke-width="10" stroke-dasharray="5" transform="translate(520 20) scale(1 2) rotate(90)" d="M15.2,5.4C5.5,10.1,1.1,18.8,2,31.7c14.8,32.1,138.9-59,127.8-19.7C112.1,75.3,42.2-8.8,15.2,5.4">
<animate begin="1" dur="1" attributeName="stroke-dasharray" values="5; 500" keyTimes="0; 1" fill="freeze"/>
<animate begin="0" dur="10" attributeName="stroke-dashoffset" from="0" to="100"/>
</path>
</g>
<text x="5" y="280" font-size="18">Animation on: 'stroke-dasharray', 'stroke-dashoffset',</text>
<text x="5" y="305" font-size="18">'stroke-miterlimit', 'stroke-linecap' and 'stroke-linejoin'.</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.8 $</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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment