import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View file

@ -0,0 +1,2 @@
@heycam
@Ms2ger

View file

@ -0,0 +1,27 @@
The `import` directory contains tests imported from the [SVG 1.1 Second
Edition test suite](http://www.w3.org/Graphics/SVG/Test/20110816/),
with tests renamed to contain `-manual` in their name. These tests need
review to verify that they are still correct for the latest version of
SVG (which at the time of writing is [SVG 2](https://svgwg.org/svg2-draft/))
and then need to be converted to reftests or testharness.js-based
tests.
The SVG 1.1 test suite came with [reference
PNGs](http://dev.w3.org/SVG/profiles/1.1F2/test/png/) for each test,
which, while not suitable as exact reftest reference files, at least
give a rough indication of what the test should look like. For some
tests, such as those involving filters, the test pass criteria are
written with reference to the PNGs. When converting the tests to
reftests or testharness.js-based tests, you might want to consult the
reference PNG.
Tests should be placed in a directory named after the SVG 2 chapter name
(for example in the `shapes/` directory for Basic Shapes chapter tests).
Scripted tests should be placed under a `scripted/` subdirectory and
reftests under a `reftests/` subdirectory, within the chapter directory.
Filenames for tests of DOM methods and properties should start with
*InterfaceName*.*methodOrPropertyName*, such as
`types/scripted/SVGElement.ownerSVGElement-01.html`.
Direct questions about the imported SVG 1.1 tests to
[Cameron McCormack](mailto:cam@mcc.id.au).

View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<title>Historical SVG features must be removed</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
var removedInterfaces = [
"SVGAnimatedPathData",
"SVGColor",
"SVGDocument",
"SVGElementInstanceList",
"SVGExternalResourcesRequired",
"SVGICCColor",
"SVGLangSpace",
"SVGLocatable",
"SVGPaint",
"SVGPathSeg",
"SVGStylable",
"SVGViewSpec",
"SVGZoomEvent"
]
for (var name of removedInterfaces) {
test(function() {
assert_false(name in window)
}, name + " interface must be removed")
}
var mixinInterfaces = [
"GetSVGDocument",
"SVGAnimatedPoints",
"SVGElementInstance",
"SVGFilterPrimitiveStandardAttributes",
"SVGFitToViewBox",
"SVGTests",
"SVGURIReference",
"SVGUnitTypes",
"SVGZoomAndPan"
]
for (var name of mixinInterfaces) {
test(function() {
assert_false(name in window)
}, name + " mixin interface must not be exposed")
}
var removedMembers = {
"SVGElement": [
"getPresentationAttribute",
"xmlbase",
"xmllang",
"xmlspace"
],
"SVGGraphicsElement": [
"getTransformToElement",
"hasExtension",
"requiredFeatures"
],
"SVGSVGElement": [
"currentView",
"useCurrentView",
"viewport"
]
}
for (var name in removedMembers) {
for (var member of removedMembers[name]) {
test(function() {
assert_false(member in window[name].prototype)
}, name + ".prototype." + member + " must be removed")
}
}
var movedPathMembers = [
"getPointAtLength",
"getTotalLength",
"pathLength"
]
for (var member of movedPathMembers) {
test(function() {
assert_false(SVGPathElement.prototype.hasOwnProperty(member))
assert_true(SVGGeometryElement.prototype.hasOwnProperty(member))
}, "SVGPathElement.prototype." + member + " must be moved to SVGGeometryElement.prototype")
}
</script>

View file

@ -0,0 +1,190 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="DAS" author="CM" status="accepted"
version="$Revision: 1.11 $" testname="$RCSfile: animate-dom-01-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#InterfaceSVGAnimationElement">
<p>
This tests the return value required for the
SVGAnimationElement.getStartTime() method, as described in
section 19.5 DOM Interfaces.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
After the loading the document, some animations that have no
visible effect will run. The text "Test running..." will
appear in the bottom right corner until the test has
completed. (This takes 2.5s.)
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if all seven rectangles are green once the animations
have stopped running (i.e., 2.5s after the document has loaded.)
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-dom-01-f.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 x='30' y='30'>Testing SVGAnimationElement.getStartTime()</text>
<text x='340' y='340' display='none'>Test running...
<set attributeName='display' to='inline' begin='0s' dur='2.5s'/>
</text>
<g id='g' display='none'/>
<animate id='a1' attributeName='display' values='inline; inline'
calcMode='discrete' begin='1s' dur='1s'/>
<animate id='a2' attributeName='display' values='inline; inline'
calcMode='discrete' begin='1s' dur='1s' fill='freeze'/>
<animate id='a3' attributeName='display' values='inline; inline'
calcMode='discrete' begin='indefinite' dur='1s'/>
<animate id='a4' attributeName='display' values='inline; inline'
calcMode='discrete' begin='indefinite; 100s; g.click; 1s; indefinite' dur='1s'/>
<animate id='a5' attributeName='display' values='inline; inline'
calcMode='discrete' begin='100s; 1s' dur='1s'/>
<animate id='a6dep' attributeName='display' values='inline; inline'
calcMode='discrete' begin='5s' dur='1s'/>
<animate id='a6' attributeName='display' values='inline; inline'
calcMode='discrete' begin='a6dep.begin+2s' dur='1s'/>
<animate attributeName='display' values='inline; inline'
calcMode='discrete' begin='0.5s' dur='1s' onbegin='before()'/>
<animate attributeName='display' values='inline; inline'
calcMode='discrete' begin='1.5s' dur='1s' onbegin='during()'/>
<animate attributeName='display' values='inline; inline'
calcMode='discrete' begin='2.5s' dur='1s' onbegin='after()'/>
<g transform='translate(30,-10)'>
<rect id='r1' y='50' width='25' height='25'/>
<rect id='r2' y='80' width='25' height='25'/>
<rect id='r3' y='110' width='25' height='25'/>
<rect id='r4' y='140' width='25' height='25'/>
<rect id='r5' y='170' width='25' height='25'/>
<rect id='r6' y='200' width='25' height='25'/>
<rect id='r7' y='230' width='25' height='25'/>
<rect id='r8' y='260' width='25' height='25'/>
</g>
<g font-size='14' transform='translate(70,-15)'>
<text y='72'>Called before a lone interval starts</text>
<text y='102'>Called on an animation with no intervals</text>
<text y='132'>Called during an interval</text>
<text y='162'>Called after a lone interval ends, fill="remove"</text>
<text y='192'>Called after a lone interval ends, fill="freeze"</text>
<text y='222'>Called with multiple begin values</text>
<text y='252'>Called with multiple begin values including "indefinite"</text>
<text y='282'>Called with syncbase begin value</text>
</g>
<script><![CDATA[
var i, ids = 'a1 a2 a3 a4 a5 a6 r1 r2 r3 r4 r5 r6 r7 r8'.split(' ');
for (i in ids) {
this[ids[i]] = document.getElementById(ids[i]);
}
function before() {
try {
if (a1.getStartTime() == 1) {
r1.setAttributeNS(null, 'fill', 'lime');
}
} catch (e) {
r1.setAttributeNS(null, 'fill', 'red');
}
r2.setAttributeNS(null, 'fill', 'red');
try {
a3.getStartTime();
} catch (e) {
if (e.code == DOMException.INVALID_STATE_ERR) {
r2.setAttributeNS(null, 'fill', 'lime');
}
}
try {
if (a4.getStartTime() == 1) {
r6.setAttributeNS(null, 'fill', 'lime');
}
} catch (e) {
r6.setAttributeNS(null, 'fill', 'red');
}
try {
if (a5.getStartTime() == 1) {
r7.setAttributeNS(null, 'fill', 'lime');
}
} catch (e) {
r7.setAttributeNS(null, 'fill', 'red');
}
try {
if (a6.getStartTime() == 7) {
r8.setAttributeNS(null, 'fill', 'lime');
}
} catch (e) {
r8.setAttributeNS(null, 'fill', 'red');
}
}
function during() {
try {
if (a1.getStartTime() == 1) {
r3.setAttributeNS(null, 'fill', 'lime');
}
} catch (e) {
r3.setAttributeNS(null, 'fill', 'red');
}
}
function after() {
r4.setAttributeNS(null, 'fill', 'red');
try {
a1.getStartTime();
} catch (e) {
if (e.code == DOMException.INVALID_STATE_ERR) {
r4.setAttributeNS(null, 'fill', 'lime');
}
}
r5.setAttributeNS(null, 'fill', 'red');
try {
a2.getStartTime();
} catch (e) {
if (e.code == DOMException.INVALID_STATE_ERR) {
r5.setAttributeNS(null, 'fill', 'lime');
}
}
}
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.11 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 7.5 KiB

View file

@ -0,0 +1,83 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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.3" reviewer="DAS" author="CM" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-dom-02-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#InterfaceSVGAnimationElement">
<p>
This tests that the methods on the ElementTimeControl
interface return the undefined value, since the IDL
operations are declared to return void.
</p>
<p>
After the loading the document, a rectangle is shown
indicating whether all four methods from the ElementTimeControl
interface returned undefined when invoked. The rectangle
is black if the test did not run, red if the test failed
and green if the test succeeded.
</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 the rectangle is green.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-dom-02-f.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 x='10' y='30'>Testing ElementTimeControl method return values</text>
<rect id='r' x='10' y='50' width='50' height='50'/>
<animate id='a' attributeName='display' values='inline; inline' dur='10s'/>
<animate attributeName='display' values='inline; inline' onbegin='f()' dur='10s'/>
<script><![CDATA[
function f() {
var a = document.getElementById('a');
var b = false;
try {
b = typeof a.beginElement() == 'undefined'
&& typeof a.beginElementAt(100) == 'undefined'
&& typeof a.endElement() == 'undefined'
&& typeof a.endElementAt(200) == 'undefined';
} catch (e) {
}
document.getElementById('r').setAttribute('fill', b ? 'green' : 'red');
}
]]></script>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -0,0 +1,122 @@
<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-02-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'additive' and 'accumulate' attributes.
</p>
<p>
The four pictures show the effect with the four possible combinations of
'additive' (either 'replace' or 'sum') and 'accumulate' (either 'none' or 'sum').
Because two animations are animating the height, the effects of 'additive' and
'accumulate' are sometimes different than when there is only a single 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 has passed if the four green rectangles each animate their height according to the following:</p>
<p>The leftmost rect:</p>
<ul>
<li>when the animation starts the height of the green rect should make it align with the bottommost red indicator line</li>
<li>after two seconds the height should jump to be 10% of the height of the gray rect it overlaps</li>
<li>after four seconds the height should jump to make the green rect align with the bottommost red indicator line</li>
<li>after six seconds the height should jump to its final position, 10% of the height of the gray rect</li>
</ul>
<p>The next to leftmost rect:</p>
<ul>
<li>when the animation starts the height of the green rect should be 110% of the height of the gray rect</li>
<li>after two seconds the height should jump to be 20% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 110% of the height of the gray rect</li>
<li>after six seconds the height should jump to its final position, 20% of the height of the gray rect</li>
</ul>
<p>The next to rightmost rect:</p>
<ul>
<li>when the animation starts the height of the green rect should make it align with the bottommost red indicator line</li>
<li>after two seconds the height should jump to be 10% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 110% of the height of the gray rect</li>
<li>after six seconds the height should jump to its final position, 20% of the height of the gray rect</li>
</ul>
<p>The rightmost rect:</p>
<ul>
<li>when the animation starts the height of the green rect should be 110% of the height of the gray rect</li>
<li>after two seconds the height should jump to be 20% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 120% of the height of the gray rect</li>
<li>after six seconds the height should jump to its final position, 30% of the height of the gray rect</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-02-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-family="Arial" font-size="30">
<g transform="translate(0, 0)">
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
<animate id="an5" attributeName="height" calcMode="discrete" additive="replace" accumulate="none" repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
</rect>
<text x="30" y="285" fill="navy">anim.5</text>
</g>
<g transform="translate(110, 0)">
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
<animate id="an6" attributeName="height" calcMode="discrete" additive="sum" accumulate="none" repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
</rect>
<text x="30" y="285" fill="navy">anim.6</text>
</g>
<g transform="translate(220, 0)">
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
<animate id="an7" attributeName="height" calcMode="discrete" additive="replace" accumulate="sum" repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
</rect>
<text x="30" y="285" fill="navy">anim.7</text>
</g>
<g transform="translate(330, 0)">
<rect x="60" y="20" width="50" height="200" fill="#dfdfdf" stroke="#dfdfdf" stroke-width="4"/>
<line x1="40" x2="100" y1="220" y2="220" fill="none" stroke="#880000" stroke-width="4"/>
<line x1="40" x2="100" y1="120" y2="120" fill="none" stroke="#880000" stroke-width="4"/>
<rect x="60" y="20" width="50" height="20" fill="#0f5" stroke="#085" stroke-width="4">
<animate id="an8" attributeName="height" calcMode="discrete" additive="sum" accumulate="sum" repeatCount="2" from="200" to="20" begin="0s" dur="4s" fill="freeze"/>
</rect>
<text x="30" y="285" fill="navy">anim.8</text>
</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.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>

After

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -0,0 +1,99 @@
<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-03-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>
<p>
Three colored text strings appear. All three are inside of the same
'g' element. The 'g' element has its 'font-size' animated from 30 to
40, and its 'fill' from #00f (blue) to #070 (green).
</p>
<p>
The first colored 'text' element has the font-size set, so the
animation of the parent 'g' only affects the fill color. The second
has the fill set and font-size set, so no inherited values are
used. The font-size and fill color stay constant. The third colored
'text' element has neither of these properties specified and thus
inherits both animated values - the fill color changes and the text
grows in size.
</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 has passed if:
</p>
<ul>
<li>the topmost line shows the text "Sample 123" that animates its fill-color smoothly from blue to green over the course of six seconds</li>
<li>the middle line shows the text "Sample 123" in a larger font-size than the first line, in blue fill-color that doesn't animate</li>
<li>the bottommost line shows the text "Sample 123" in the same font-size as the topmost line, then smoothly animating the font-size
to be larger than the middle line over the course of six seconds. At the same time the fill-color is smoothly animated from blue to green</li>
<li>after six seconds the rendered result matches the reference image</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-03-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>
<font id="MyDecFont" horiz-adv-x="466">
<font-face font-family="MyDecFont"/>
<missing-glyph horiz-adv-x="233" d="M 50 0 L50 700 200 700 200 0 z"/>
<glyph unicode=" " glyph-name="space" horiz-adv-x="233"/>
<glyph unicode="1" glyph-name="one" horiz-adv-x="558" d="M458 716L100 534V428L357 552V97H241V380L140 328V0H458V716Z"/>
<glyph unicode="2" glyph-name="two" horiz-adv-x="585" d="M69 509Q82 523 102 541T147 575T203 603T268 614Q311 614 342 599T392 560T421 505T430 443Q430 420 423 398T405 352L343 201H444L492 309Q508 345 519 379T531 448Q531 504 511 552T454 635T369 691T262 711Q231 711 204 704T152 684T106 655T69 623V509ZM535 97H187L309 422Q316 441 315 457T306 483T287 500T265 506Q261 506 254 505T239 499T224 485T211 461L50 0H535V97Z"/>
<glyph unicode="3" glyph-name="three" horiz-adv-x="542" d="M58 553Q109 588 148 601T220 614Q255 614 282 604T328 575T356 535T366 488Q366 475 364 460T355 429T336 397T302 368Q311 363 325 353T352 326T376 286T386 232Q386 203 376 177T345 130T295 98T227 86Q179 86 134 104T50 153V45Q59 38 74 29T111 10T163 -5T231 -11Q296 -11 345 8T426 58T475 131T492 218Q492 251 486 276T469 320T446 354T421 378Q438 396 454 425T470 503Q470 546 454 584T406 650T332 695T233 711Q179 711 137 696T58 655V553ZM156 255Q156
229 173 212T217 194Q243 194 260 211T278 255Q278 281 261 298T217 316Q191 316 174 299T156 255ZM161 467Q161 444 177 428T216 412Q225 412 234 415T252 425T265 442T271 467Q271 491 256 506T216 522Q202 522 192 517T174 503T164 486T161 467Z"/>
<glyph unicode="S" glyph-name="S" horiz-adv-x="629" d="M523 658Q479 681 426 696T317 711Q251 711 200 690T113 634T59 551T40 452Q40 404 59 356T114 270T198 210T304 194Q310 195 319 197T336 204T351 219T357 246Q357 261 351 270T337 285T320 291T305 294Q251 300 220 319T172 363T151 411T146 454Q146 478 154 506T183 558T237 598T322 614Q375 614 426 598T523 548V658ZM96 42Q140 19 193 4T302 -11Q368 -11 419 10T506 66T560 149T579 248Q579 296 560 344T505 431T421 490T315 506Q309 505 300 503T282 496T268 480T262
454Q262 439 268 430T282 415T299 409T314 406Q368 399 399 380T447 336T468 288T473 246Q473 222 465 194T436 142T382 102T297 86Q244 86 193 102T96 152V42Z"/>
<glyph unicode="a" glyph-name="a" horiz-adv-x="578" d="M450 0H548V198Q548 288 522 344T458 433T375 477T292 489Q240 489 194 470T114 418T60 339T40 240Q40 180 63 134T122 55T202 6T291 -11Q311 -11 325 -9T352 -1V96Q341 89 331 86T305 83Q265 83 234 96T182 132T149 183T138 242Q138 275 150 303T183 351T232 383T294 395Q306 395 332 391T384 368T430 311T450 203V0ZM236 239Q236 215 253 198T294 181Q318 181 335 198T352 239Q352 263 335 280T294 297Q270 297 253 280T236 239Z"/>
<glyph unicode="m" glyph-name="m" horiz-adv-x="774" d="M40 0H138V231Q138 280 150 312T181 362T223 388T269 395Q294 395 314 388T349 370T374 346T392 318Q407 353 440 374T515 395Q531 395 553 390T596 368T631 319T646 231V0H744V231Q744 248 743 273T735 327T715 385T678 437T619 474T532 489Q504 489 482 484T443 470T412 451T390 431Q358 464 321 476T252 489Q222 489 185 481T116 445T62 367T40 231V0ZM242 0H542V246Q542 275 526 286T493 297Q473 297 459 283T444 246V94H340V246Q340 269 326 283T291 297Q275
297 259 286T242 246V0Z"/>
<glyph unicode="p" glyph-name="p" horiz-adv-x="552" d="M40 -184H138V192H267Q284 192 300 204T316 239Q316 259 303 272T267 286H40V-184ZM40 384H261Q297 384 325 372T373 340T403 294T414 238Q414 209 403 183T373 137T326 106T264 94H236V0H264Q318 0 363 18T442 69T493 144T512 238Q512 288 494 332T442 408T363 459T263 478H40V384Z"/>
<glyph unicode="l" glyph-name="l" horiz-adv-x="380" d="M340 662H40V0H340V94H138V568H242V192H340V662Z"/>
<glyph unicode="e" glyph-name="e" horiz-adv-x="530" d="M500 192V227Q500 296 480 346T428 427T354 474T271 489Q221 489 178 470T101 418T49 340T30 243Q30 204 43 161T87 83T171 24T303 0H482V94H298Q250 94 217 108T165 144T137 192T128 244Q128 276 139 303T171 351T218 383T275 395Q301 395 322 386T360 362T386 327T402 286H277Q253 286 240 272T226 239Q226 223 237 208T277 192H500Z"/>
</font>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g font-family="MyDecFont" fill="#00f" stroke="none">
<g id="AnimationTarget">
<text x="20" y="80" font-size="40">Sample 123</text>
<text x="20" y="155" font-size="60" fill="#00f">Sample 123</text>
<text x="20" y="250">Sample 123</text>
<animate attributeName="font-size" attributeType="CSS" begin="0s" dur="6s" fill="freeze" from="40" to="80"/>
<animate attributeName="fill" attributeType="CSS" begin="0s" dur="6s" fill="freeze" from="#00f" to="#070"/>
</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.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>

After

Width:  |  Height:  |  Size: 8.4 KiB

View file

@ -0,0 +1,71 @@
<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-04-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test different ways of defining a motion path.
</p>
<p>
An animation moves a triangle along a path. Reference rectangles, lines and text
are provided to help show what the correct behavior is.
</p>
<p>
This animation uses the 'from' and 'to' attributes to define the motion path.
</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 has passed if a triangle is animated smoothly along the path indicated by the black line, starting at the leftmost pink rectangle and stopping after 3 seconds on top of the rightmost pink rectangle.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-04-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="36">
<text x="48" y="48">Test a motion path</text>
<text x="48" y="95">'from'/'to' attribute.</text>
<path d="M90,258 L390,180" fill="none" stroke="black" stroke-width="6"/>
<rect x="60" y="198" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="90" y="300" text-anchor="middle">0 sec.</text>
<rect x="360" y="120" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="390" y="230" text-anchor="middle">3+ sec.</text>
<path d="M-30,0 L0,-60 L30,0 z" fill="blue" stroke="green" stroke-width="6">
<animateMotion from="90,258" to="390,180" begin="0s" dur="3s" fill="freeze"/>
</path>
</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>

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -0,0 +1,77 @@
<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-05-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test different ways of defining a motion path.
</p>
<p>
An animation moves a triangle along a path. Reference rectangles, lines and text
are provided to help show what the correct behavior is.
</p>
<p>
This animation uses the 'values' attribute to define the motion path, with a linear calcMode.
</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 has passed if a triangle is animated smoothly along the path indicated by the black line, and
it passes over the pink rectangles at the indicated times.
When the animation starts the triangle should be positioned on top of the leftmost pink rectangle, after
3 seconds it should reach the middle pink rectangle, and after 6 seconds it should be positioned on top
of the rightmost pink rectangle where it should stop.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-05-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="36">
<text x="48" y="48">Test a motion path</text>
<text x="48" y="95">'values' attribute.</text>
<path d="M90,258 L240,180 L390,180" fill="none" stroke="black" stroke-width="6"/>
<rect x="60" y="198" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="90" y="300" text-anchor="middle">0 sec.</text>
<rect x="210" y="120" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="240" y="222" text-anchor="middle">3+</text>
<rect x="360" y="120" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="390" y="222" text-anchor="middle">6+</text>
<path d="M-30,0 L0,-60 L30,0 z" fill="blue" stroke="green" stroke-width="6">
<animateMotion values="90,258;240,180;390,180" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
</path>
</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>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1,71 @@
<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-06-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test different ways of defining a motion path.
</p>
<p>
An animation moves a triangle along a path. Reference rectangles, lines and text
are provided to help show what the correct behavior is.
</p>
<p>
This animation uses the 'path' attribute to define the motion path.
</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 the triangle is animated along the black curve over the course of 6 seconds.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-06-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="36">
<text x="48" y="48">Test a motion path</text>
<text x="48" y="95">'path' attribute.</text>
<path d="M90,258 C90,258 216,120 390,198" fill="none" stroke="black" stroke-width="6"/>
<rect x="60" y="198" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="90" y="300" text-anchor="middle">0 sec.</text>
<rect x="360" y="138" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="390" y="240" text-anchor="middle">6+ sec.</text>
<path d="M-30,0 L0,-60 L30,0 z" fill="blue" stroke="green" stroke-width="6">
<animateMotion path="M90,258 C90,258 216,120 390,198" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
</path>
</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>

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -0,0 +1,73 @@
<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-07-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test different ways of defining a motion path.
</p>
<p>
An animation moves a triangle along a path. Reference rectangles, lines and text
are provided to help show what the correct behavior is.
</p>
<p>
This animation uses the 'mpath' sub-element to define the motion path.
</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 the triangle is animated along the black curve over the course of 6 seconds.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-07-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="36">
<text x="48" y="48">Test a motion path</text>
<text x="48" y="95">'mpath' element.</text>
<path id="mpathRef" d="M90,258 C90,258 216,120 390,198" fill="none" stroke="black" stroke-width="6"/>
<rect x="60" y="198" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="90" y="300" text-anchor="middle">0 sec.</text>
<rect x="360" y="138" width="60" height="60" fill="#FFCCCC" stroke="black" stroke-width="6"/>
<text x="390" y="240" text-anchor="middle">6+ sec.</text>
<path d="M-30,0 L0,-60 L30,0 z" fill="blue" stroke="green" stroke-width="6">
<animateMotion begin="0s" dur="6s" calcMode="linear" fill="freeze">
<mpath xlink:href="#mpathRef"/>
</animateMotion>
</path>
</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>

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -0,0 +1,83 @@
<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.9 $" testname="$RCSfile: animate-elem-08-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test rotate='auto' and rotate='auto-reverse'.
</p>
<p>
Two animations have been defined that move a triangle along a path. The first animation specifies rotate='auto', which causes
the object to be rotated along the curve of the path. The second animation specifies rotate='auto-reverse', which causes the
object to be flipped and then rotated along the curve of the path.
</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>each of the triangles are animated along the respective black curves over the course of 6 seconds</li>
<li>the leftmost triangle points upwards and the rightmost triangle points downwards</li>
<li>the triangles are rotated during the animation so that they are always perpendicular to the tangential vector at the current position on the respective curve</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-08-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="14" text-anchor="middle" x="225" y="25">Test rotate='auto' and rotate='auto-reverse'</text>
<g font-size="12" text-anchor="middle">
<path d="M25,225 C25,175 125,150 175,200" fill="none" stroke="black" stroke-width="2"/>
<rect x="10" y="195" width="30" height="30" fill="#FFCCCC" stroke="black" stroke-width="4"/>
<text x="25" y="240">0 sec.</text>
<rect x="160" y="170" width="30" height="30" fill="#FFCCCC" stroke="black" stroke-width="4"/>
<text x="175" y="215">6+ sec.</text>
<path d="M-15,0 L0,-30 L15,0 z" fill="blue" stroke="green" stroke-width="2">
<animateMotion path="M25,225 C25,175 125,150 175,200" rotate="auto" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
</path>
<text x="100" y="260" stroke="none" font-size="14">rotate='auto'</text>
<path d="M275,225 C275,175 375,150 425,200" fill="none" stroke="black" stroke-width="2"/>
<rect x="260" y="195" width="30" height="30" fill="#FFCCCC" stroke="black" stroke-width="4"/>
<text x="275" y="240">0 sec.</text>
<rect x="410" y="170" width="30" height="30" fill="#FFCCCC" stroke="black" stroke-width="4"/>
<text x="425" y="215">6+ sec.</text>
<path d="M-15,0 L0,-30 L15,0 z" fill="blue" stroke="green" stroke-width="2">
<animateMotion path="M275,225 C275,175 375,150 425,200" rotate="auto-reverse" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
</path>
<text x="350" y="260" stroke="none" font-size="14">rotate='auto-reverse'</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.9 $</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>

After

Width:  |  Height:  |  Size: 4.9 KiB

View file

@ -0,0 +1,97 @@
<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-09-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test possible values for 'calcMode="discrete"'.
</p>
<p>
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the correct behavior is.
The black text and ruler lines help show the sizes and movement of the rectangles over time.
</p>
<p>
The discrete animations should show stair-stepping animations, with quantum-level jumps every two seconds in these tests. The linear
animations change constantly with each keyframe to keyframe section, with the result that the change is faster when there is a larger
change within a given amount of time. The paced animations change constantly over the entire animation, regardless of the values at
particular keyframes. For calcMode='spline' in this test case, the initial rate of change is defined to be the same as linear, but the
last jump has an ease-in/ease-out effect where the change is slower at the start and end but faster in the middle.
</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 the two orange rects are animated so that the bottom part of each rectangle is at the position
indicated by the ruler lines at the particular time noted next to each ruler line.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-09-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 xml:space="preserve" font-family="Arial" font-size="30">
<g transform="translate(20,50)">
<text x="0" y="203">0-2 sec.</text>
<text x="0" y="170">2-4 sec. </text>
<text x="0" y="114">4-6 sec. </text>
<text x="3" y="3">6+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="210" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" calcMode="discrete" values="210;177;121;10" begin="0s" dur="8s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">0-2 sec.</text>
<text x="0" y="170">2-4 sec. </text>
<text x="0" y="114">4-6 sec. </text>
<text x="3" y="3">6+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="10" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animateMotion calcMode="discrete" values="0,200; 0,167; 0,111; 0,0" 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>

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -0,0 +1,96 @@
<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-10-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test possible values for 'calcMode="linear"'.
</p>
<p>
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the correct behavior is.
The black text and ruler lines help show the sizes and movement of the rectangles over time.
</p>
<p>
The linear animations change constantly with each keyframe to keyframe section, with the result that the change is faster when there is a larger
change within a given amount of time.
</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 the two orange rects are animated so that the bottom part of each rectangle is at the position
indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the
bottom part of each rect must be between the two corresponding ruler lines.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-10-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-family="Arial" font-size="30">
<g transform="translate(20,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>
<text x="0" y="114">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="210" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<!-- Should use default of calcMode="linear" -->
<animate attributeName="height" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>
<text x="0" y="114">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="10" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animateMotion calcMode="linear" values="0,200; 0,167; 0,111; 0,0" 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>

After

Width:  |  Height:  |  Size: 4.9 KiB

View file

@ -0,0 +1,93 @@
<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-11-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test possible values for 'calcMode="paced"'.
</p>
<p>
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the correct behavior is.
The black text and ruler lines help show the sizes and movement of the rectangles over time.
</p>
<p>
The paced animations change constantly over the entire animation, regardless of the values at
particular keyframes.
</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 the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-11-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-family="Arial" font-size="30">
<g transform="translate(20,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="136.33">at 3 sec. </text>
<text x="0" y="69.66">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="133.33" x2="170" y2="133.33"/>
<line x1="120" y1="66.66" x2="170" y2="66.66"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="210" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" calcMode="paced" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="136.33">at 3 sec. </text>
<text x="0" y="69.66">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="133.33" x2="170" y2="133.33"/>
<line x1="120" y1="66.66" x2="170" y2="66.66"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="10" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animateMotion calcMode="paced" values="0,200; 0,167; 0,111; 0,0" 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>

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -0,0 +1,93 @@
<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-12-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test possible values for 'calcMode="spline"'.
</p>
<p>
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the correct behavior is.
The black text and ruler lines help show the sizes and movement of the rectangles over time.
</p>
<p>
For calcMode='spline' in this test case, the initial rate of change is defined to be the same as linear, but the
last jump has an ease-in/ease-out effect where the change is slower at the start and end but faster in the middle.
</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 the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines. The bottom of the left rectangles and the right rectangle must always be the same throughout the animation.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-12-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-family="Arial" font-size="30">
<g transform="translate(20,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>
<text x="0" y="114">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="210" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>
<text x="0" y="114">at 6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#800" stroke-width="4">
<line x1="120" y1="200" x2="170" y2="200"/>
<line x1="120" y1="167" x2="170" y2="167"/>
<line x1="120" y1="111" x2="170" y2="111"/>
<line x1="120" y1="0" x2="170" y2="0"/>
</g>
<rect x="140" y="-10" width="60" height="10" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animateMotion calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="0,200; 0,167; 0,111; 0,0" 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>

After

Width:  |  Height:  |  Size: 5.1 KiB

View file

@ -0,0 +1,105 @@
<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-13-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test 'from', 'by', 'to' and 'values'.
</p>
<p>
Six animations have been defined. All six animations define the same simultaneous behavior, but use different combinations of
attributes 'from', 'by', 'to' and 'values'. In all cases, from time 2 seconds to time 5 seconds, the rectangle should change
from a width of 30 to a width of 300.
</p>
<p>
The text on each line shows the attributes that were used for that particular 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 six orange rectangles should simultaneously animate their widths so that their right edges line up with the ruler lines at the indicated time.
From time 0 - 2 seconds all rectangles should have their right edges lined up with the leftmost ruler line, and at time 2 seconds the animation should
start, changing the widths of all the rectangles from 30 to 300. At time 5 seconds the animation should stop and the rectangles should all line up with
the rightmost ruler line.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-13-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">
<line x1="190" x2="190" y1="45" y2="300" stroke="#880000" stroke-width="4"/>
<line x1="460" x2="460" y1="45" y2="300" stroke="#880000" stroke-width="4"/>
<text x="156" y="32">0-2 sec.</text>
<text x="370" y="32">5+ sec.</text>
<g>
<rect x="160" y="60" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" from="30" to="300" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="85">from to</text>
</g>
<g>
<rect x="160" y="100" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" from="30" by="270" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="125">from by</text>
</g>
<g>
<rect x="160" y="140" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" by="270" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="165">by</text>
</g>
<g>
<rect x="160" y="180" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" to="300" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="205">to</text>
</g>
<g>
<rect x="160" y="220" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" values="30;300" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="245">values</text>
</g>
<g>
<rect x="160" y="260" width="30" height="30" fill="#FFAA44" stroke="#FF00FF" stroke-width="4">
<animate attributeName="width" values="30;120;210;300" begin="2s" dur="3s" fill="freeze"/>
</rect>
<text x="20" y="285">values</text>
</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>

After

Width:  |  Height:  |  Size: 5.4 KiB

View file

@ -0,0 +1,78 @@
<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>

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -0,0 +1,79 @@
<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>

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -0,0 +1,79 @@
<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>

After

Width:  |  Height:  |  Size: 4.6 KiB

View file

@ -0,0 +1,78 @@
<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>

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -0,0 +1,76 @@
<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>

After

Width:  |  Height:  |  Size: 4.4 KiB

View file

@ -0,0 +1,109 @@
<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>

After

Width:  |  Height:  |  Size: 6.8 KiB

View file

@ -0,0 +1,88 @@
<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>

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -0,0 +1,93 @@
<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>

After

Width:  |  Height:  |  Size: 4.5 KiB

View file

@ -0,0 +1,129 @@
<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>

After

Width:  |  Height:  |  Size: 7.7 KiB

View file

@ -0,0 +1,89 @@
<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>

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -0,0 +1,85 @@
<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>

After

Width:  |  Height:  |  Size: 4.6 KiB

View file

@ -0,0 +1,93 @@
<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>

After

Width:  |  Height:  |  Size: 5 KiB

View file

@ -0,0 +1,63 @@
<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>

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -0,0 +1,98 @@
<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>

After

Width:  |  Height:  |  Size: 5.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,139 @@
<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>

After

Width:  |  Height:  |  Size: 7.7 KiB

View file

@ -0,0 +1,146 @@
<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>

After

Width:  |  Height:  |  Size: 8.7 KiB

View file

@ -0,0 +1,149 @@
<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>

After

Width:  |  Height:  |  Size: 8.5 KiB

View file

@ -0,0 +1,123 @@
<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>

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -0,0 +1,150 @@
<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>

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,105 @@
<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-37-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test validates the animation of the transform attribute shape elements.
</p>
<p>
The test applies an &lt;animateTransform&gt; on various element
types: &lt;g&gt;, &lt;use&gt;, &lt;image&gt;, &lt;switch&gt;,
&lt;a&gt; and &lt;text&gt;.
In all cases the animation should run for 3s, starting at the document's load time.
The &lt;circle&gt; has a scale animation, and all the rest of the elements should rotate together about their centers.
</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 of the seven shapes rotates clockwise, then anti-clockwise, then clockwise again,</li>
<li>and the circle is scaled down, then up, then down again</li>
</ul>
<p>over the course of three seconds.</p>
<p>The static reference image shows the final state of the animation.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-37-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 text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt; shape elements</text>
<g transform="translate(0,0)">
<g transform="translate(60,90)">
<path id="pathID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" d="M 0 0 Q 30 0 30 -30 Q 0 -30 0 0 Q 0 -30 -30 -30 Q -30 0 0 0 Q -30 0 -30 30 Q 0 30 0 0 Q 0 30 30 30 Q30 0 0 0 Z"/>
<animateTransform attributeName="transform" xlink:href="#pathID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;path&gt;</text>
</g>
<g transform="translate(180,90)">
<rect id="rectID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" x="-30" y="-20" width="60" height="40"/>
<animateTransform attributeName="transform" xlink:href="#rectID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;rect&gt;</text>
</g>
<g transform="translate(300,90)">
<circle id="circleID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" r="30"/>
<animateTransform attributeName="transform" xlink:href="#circleID" type="scale" values="1;0.2;1.5;1" dur="3s"/>
<text y="60" text-anchor="middle">&lt;circle&gt;</text>
</g>
<g transform="translate(420,90)">
<ellipse id="ellipseID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" rx="40" ry="20"/>
<animateTransform attributeName="transform" xlink:href="#ellipseID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;ellipse&gt;</text>
</g>
<g transform="translate(60,220)">
<line id="lineID" stroke="rgb(255,180,0)" stroke-width="10" stroke-linecap="round" x1="-30" y1="-20" x2="30" y2="20"/>
<animateTransform attributeName="transform" xlink:href="#lineID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;line&gt;</text>
</g>
<g transform="translate(180,220)">
<polyline id="polylineID" stroke="rgb(255,180,0)" stroke-width="10" stroke-linecap="round" fill="none" stroke-linejoin="round" points="-30 20 -30 -20 30 20 30 -20"/>
<animateTransform attributeName="transform" xlink:href="#polylineID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;polyline&gt;</text>
</g>
<g transform="translate(300,220)">
<polygon id="polygonID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" points="-30 20 -30 -20 30 20 30 -20"/>
<animateTransform attributeName="transform" xlink:href="#polygonID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;polygon&gt;</text>
</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>

After

Width:  |  Height:  |  Size: 6 KiB

View file

@ -0,0 +1,90 @@
<svg version="1.1" baseProfile="tiny" preserveAspectRatio="none" 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, ED" author="OA" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-38-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 viewBox attribute.
</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 viewBox changes position and size
several times. At each new setting, a green indicator frame will flash a couple of times.
This frame must only appear at the edges of the SVG element.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-38-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 id="elk" fill="rgb(246,255,129)" stroke="rgb(0,0,0)" transform="translate(40 5) scale(0.9 0.9)">
<path fill="rgb(191,48,0)" d="M39.4 149.4 C31 156.2 21.3 167 29.3 177.9 C39.6 191.8 60.5 190.6 70.3 176.5 C75.8 168.6 70.3 138.5 87.6 140.7 C101.1 142.4 97 174.9 96.6 184.7 C96.3 193.7 95.4 200.4 91.4 208.7 C88.2 215.2 82.2 221.7 81.6 228.7 C79.7 249.7 104.5 239.8 105.6 222.7 C106.7 205.9 101.8 190.2 103.6 173.7 C104.6 164.8 111 154.2 117.4 166.7 C121.5 174.8 117.1 183 115.6 190.7 C113.6 201 109 229.3 120.9 236.5 C134.1 244.5 141.3 215.2 139.7 205.7 C138.4 197.5 133.7 189.6 131.6 181.7 C130.7 178.3 126.2 161.8 128.8 158.9 C135.5 151.7 145.6 168.2 147.4 172.7 C150.5 180.4 150.3 189 147.8 196.7 C144.2 207.8 130.8 231.9 145.4 241.8 C166.7 256.2 164.8 218.6 163.4 208.7 C162.1 199.9 160.3 190.6 159.6 181.7 C158.7 169.5 163.8 167.6 175.4 167.7 C203.6 167.8 180.5 199.7 179.6 214.7 C179 224.2 183.4 236.6 194.7 237.7 C208.4 239 208.6 220.8 208.7 210.9 C208.9 189.8 197 171.5 198.9 150.8 C210.5 146.1 196.6 133.6 191.7 130.4 C182.6 124.5 172.3 122.1 161.7 120.6 C146.9 118.6 132 120.5 117.1 121 C110.5 121.2 104 121.4 97.5 120.1 C92.3 119 86.5 117.7 81.2 119.2 C77.7 120.2 71.6 122.5 68.6 124.6 C65.9 126.6 64.8 130.2 62.6 132.8 C56.4 140.2 46.8 143.3 39.5 149.3 z"/>
<path d="M165.2 86.7 C184 67.3 201.2 47.5 188.2 19.7 C182.1 6.5 153.5 -12.8 154.5 13.9 C154.9 24.4 160.7 29.8 165.5 37.7 C168.8 43.2 172 60.8 158.7 57.6 C150.8 55.7 152.3 40.9 139.5 47.8 C130.2 52.8 133.8 60.1 138.3 66.8 C142.2 72.8 149.3 79.3 141.5 86 C134.6 91.9 126.9 84 127.3 75.9 C111 72.5 123.3 89.9 124.3 95.8 C114.3 103.2 117.2 93.4 111.2 90 C103.8 85.6 97 92.4 97.2 98 C97.4 105.8 105.2 105.2 96.7 113 C94 115.4 90.6 116.8 87.2 117.7 C85.5 118.2 83.8 118.6 82.1 119 C81.6 119.1 77.9 119.7 79.4 120.6 C80.9 121.4 82.8 120.7 84.4 120.7 C86 120.6 87.6 120.5 89.2 120.3 C92.5 120 95.9 119.5 99.2 118.9 C106.1 117.6 113 115.9 119.6 113.6 C126.4 111.3 133 108.5 139.3 105.3 C145.4 102.2 151.3 98.5 156.7 94.3 C159.7 92 162.5 89.5 165.1 86.8 z"/>
<path d="M56.8 120.4 C57 120.6 57.3 120.8 57.5 121 C59.3 122.4 61.8 122.9 64.1 123.1 C65.3 123.3 66.6 123.3 67.8 123.4 C68.3 123.4 68.9 123.5 69.4 123.5 C69.7 123.5 70.5 123.3 70.8 123.6 C71.2 124.1 70.4 124.4 70.1 124.5 C68.8 125.1 67.3 124.7 66 124.9 C65.1 125 64.1 125.1 63.2 125.2 C59.5 125.5 55.8 125.8 52.1 126 C48.2 126.2 44.2 126.3 40.3 126.2 C36.4 126.1 32.5 125.8 28.6 125.3 C25 124.8 21.4 123.9 18 122.7 C14.9 121.5 11.8 120 9.2 117.9 C6.7 115.9 4.6 113.3 3.1 110.4 C1.5 107.1 0.7 103.3 0.6 99.6 C-0.1 81.8 22.3 81 17.9 99.6 C16.6 105.2 10.2 115 18.6 117.6 C28.6 120.7 26.5 109.2 24.8 104.7 C27.7 104.2 31.6 104.2 34.5 104.7 C34.3 109.3 33.6 117.7 40.6 117.6 C47.8 117.5 41.5 109.7 49.6 109.6 C57.6 109.5 53.3 116.4 56.9 120.3 z"/>
<path fill="rgb(255,255,255)" d="M71.5 129.8 C72.3 131.6 75.3 131.5 75.4 129.3 C75.5 126.5 70.2 126.8 71.5 129.8"/>
<path fill="rgb(255,255,255)" d="M80.1 130 C82.9 127.7 78.6 125 77.6 126.4 C76.6 127.9 77.6 132.1 80.1 130"/>
</g>
<g stroke-width="5" fill="none" stroke="none">
<rect fill="none" x="0" y="0" width="300" height="300">
<animateColor attributeName="stroke" values="green; white" begin="1" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="100" y="100" width="100" height="100">
<animateColor attributeName="stroke" values="green; white" begin="3" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="0" y="100" width="100" height="100">
<animateColor attributeName="stroke" values="green; white" begin="5" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="200" y="0" width="100" height="100">
<animateColor attributeName="stroke" values="green; white" begin="7" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="100" y="0" width="200" height="200">
<animateColor attributeName="stroke" values="green; white" begin="9" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="0" y="100" width="200" height="200">
<animateColor attributeName="stroke" values="green; white" begin="11" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="0" y="100" width="300" height="200">
<animateColor attributeName="stroke" values="green; white" begin="13" dur="0.2" repeatCount="5"/>
</rect>
<rect fill="none" x="0" y="0" width="300" height="300">
<animateColor attributeName="stroke" values="green; white" begin="15" dur="0.2" repeatCount="5"/>
</rect>
</g>
<animate attributeName="viewBox" xlink:href="#svg-root" values="0 0 300 300; 0 0 300 300; 100 100 100 100; 100 100 100 100; 0 100 100 100; 0 100 100 100; 200 0 100 100; 200 0 100 100; 100 0 200 200; 100 0 200 200; 0 100 200 200; 0 100 200 200; 0 100 300 200; 0 100 300 200; 0 0 300 300; 0 0 300 300" keyTimes="0; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.45; 0.5; 0.55; 0.6; 0.65; 0.7; 0.75; 1" begin="0" dur="20" fill="freeze"/>
<text x="5" y="240" font-size="14">Animation on: 'viewBox'. Flashing frame should</text>
<text x="5" y="260" font-size="14">only appear at the edges of the SVG element.</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="298" height="298" fill="none" stroke="#000000"/>
<!-- comment out this watermark once the test is approved -->
<!--
<g id="draft-watermark">
<rect x="1" y="1" width="298" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="'Arial Black', Arial, sans-serif" font-weight="bold" font-size="20" x="150" text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 57 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

View file

@ -0,0 +1,445 @@
<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, CM" author="VH" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-41-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test validates the operation of the animate element on the various graphics
properties. This test is very similar to animate-elem-78-t which uses the set element
instead of the animate element to modify graphics properties.
</p>
<p>
For each of the graphics properties, there are three tests. One animates the graphics
property directly on an element (such as a rect or a line) which uses the
property. The other two tests apply the animation on a container element (g and
a), and validate that the animated property is inherited by elements which
are child of the container.
</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>
There are 11 graphics properties that are animated, and for each of these,
they are animated in one of three different ways (the three columns). The
three animations in each row must be the same.
</p>
<p>
For each animation test, the element on which the animation is applied is also
translated by an animation so that the various states of the animation can
be checked more easily:
</p>
<ul>
<li>For those tests that have two light gray silhouettes
(fill-rule, stroke-linecap, stroke-linejoin, stroke-miterlimit and stroke-dashoffset),
the animated element's shape must be the same as the left silouhette at the
start of the animation and the same as the right silhouette at the end of
the animation.</li>
<li>For the continous paint animations (fill, stroke and color),
three references shapes show the color that the animated element must be
at the start, middle and end of the animation.</li>
<li>For the stroke-width test, the two dark gray reference shapes show the
width of the short, animated horizontal line must be at the start and the end
of the animation.</li>
<li>For the display and visibility tests, the single light gray silhouette
shows the position the animated element must be at at the start of the animation.
At the end of the animation, these animated elements must not be visible.</li>
</ul>
<p>
The following animations must show continuous changes: fill, stroke,
stroke-width, stroke-dashoffset and color.
</p>
<p>
The following animations must show discrete animation changes: fill-rule, stroke-linecap,
stroke-linejoin, stroke-miterlimit, display and visibility. The point at which
the change takes place must be half way through the animation, except for the
stroke-miter animation, which must change a quarter of the way through.
(Note that visually, stroke-miterlimit shows a sharp transition even though its value
is animated continuously, but that is because the miter is cut off when
the animated miter limit reaches the test sharp angle's miter value.)
</p>
<p>The test passes if all of the above criteria are met.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-41-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 text-anchor="middle" x="240" y="25" font-size="20">graphics</text>
<g transform="translate(80, 75)">
<g transform="translate(30,10)" text-anchor="end" font-size="12">
<text>fill</text>
<text y="20">fill-rule</text>
<text y="40">stroke</text>
<text y="60">stroke-width</text>
<text y="80">stroke-linecap</text>
<text y="100">stroke-linejoin</text>
<text y="120">stroke-miterlimit</text>
<text y="140">stroke-dashoffset</text>
<text y="160">display</text>
<text y="180">visibility</text>
<text y="200">color</text>
</g>
<g id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14">
<text x="20" y="3">element</text>
<text x="130" y="3">&lt;g&gt;</text>
<text x="235" y="3">&lt;a&gt;</text>
</g>
<g transform="translate(80,0)" fill="rgb(204,0,102)">
<g id="setZero">
<defs>
<g id="animateZeroRef">
<rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/>
<rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/>
<rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#animateZeroRef"/>
<use xlink:href="#animateZeroRef" x="110"/>
<use xlink:href="#animateZeroRef" x="220"/>
<rect x="10" width="8" height="8" fill="rgb(204,0,102)">
<animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animate attributeName="x" to="40" dur="3s" fill="freeze"/>
</rect>
<g transform="translate(110, 0)">
<rect x="10" width="8" height="8"/>
<animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<rect x="10" width="8" height="8"/>
<animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</a>
</g>
<g id="setOne" transform="translate(5,15)" stroke="rgb(204,0,102)">
<defs>
<g id="setOneRef" fill="#ccc" stroke="none">
<polyline stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10"/>
<polyline fill-rule="evenodd" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setOneRef"/>
<use xlink:href="#setOneRef" x="110"/>
<use xlink:href="#setOneRef" x="220"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
<animate attributeName="fill-rule" from="nonzero" to="evenodd" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</polyline>
<g transform="translate(110, 0)">
<animate attributeName="fill-rule" from="nonzero" to="evenodd" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="fill-rule" from="nonzero" to="evenodd" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/>
</a>
</g>
<g id="setTwo" transform="translate(0,45)" fill="none">
<defs>
<g id="setTwoRef" fill="none" stroke-width="4">
<rect x="10" width="8" height="8" stroke="rgb(204,0,102)"/>
<rect x="10" width="8" height="8" transform="translate(15,0)" stroke="rgb(230,82,51)"/>
<rect x="10" width="8" height="8" transform="translate(30,0)" stroke="rgb(255,165,0)"/>
</g>
</defs>
<use xlink:href="#setTwoRef"/>
<use xlink:href="#setTwoRef" x="110"/>
<use xlink:href="#setTwoRef" x="220"/>
<rect x="10" width="8" height="8" stroke-width="3">
<animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</rect>
<g transform="translate(110, 0)">
<animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8" stroke-width="3"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8" stroke-width="3"/>
</a>
</g>
<g id="setThree" transform="translate(0,60)">
<defs>
<g id="setThreeRef">
<line x1="10" y1="3" x2="20" y2="3" stroke-width="1" stroke="gray"/>
<line x1="10" y1="3" x2="20" y2="3" stroke-width="5" stroke="gray" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setThreeRef"/>
<use xlink:href="#setThreeRef" x="110"/>
<use xlink:href="#setThreeRef" x="220"/>
<line x1="10" y1="8" x2="20" y2="8" stroke="gray">
<animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</line>
<g transform="translate(110, 0)">
<animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<line x1="10" y1="8" x2="20" y2="8" stroke="gray"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<line x1="10" y1="8" x2="20" y2="8" stroke="gray"/>
</a>
</g>
<g id="setFour" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)">
<defs>
<g id="setFourRef" stroke-width="12">
<line x1="10" y1="8" x2="12" y2="8" stroke="#ccc"/>
<line x1="10" y1="8" x2="12" y2="8" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setFourRef"/>
<use xlink:href="#setFourRef" x="110"/>
<use xlink:href="#setFourRef" x="220"/>
<line x1="10" y1="8" x2="12" y2="8" stroke-width="12">
<animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</line>
<g transform="translate(110, 0)">
<animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/>
</a>
</g>
<g id="setFive" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setFiveRef">
<polyline stroke="#ccc" points="5,2,20,5,5,8"/>
<polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setFiveRef"/>
<use xlink:href="#setFiveRef" x="110"/>
<use xlink:href="#setFiveRef" x="220"/>
<polyline points="5,2,20,5,5,8">
<animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</polyline>
<g transform="translate(110, 0)">
<animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="5,2,20,5,5,8"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="5,2,20,5,5,8"/>
</a>
</g>
<g id="setSix" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setSixRef">
<polyline points="5,0,20,5,5,10" stroke="#ccc"/>
<polyline points="5,0,20,5,5,10" stroke="#ccc" stroke-miterlimit="10" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setSixRef"/>
<use xlink:href="#setSixRef" x="110"/>
<use xlink:href="#setSixRef" x="220"/>
<polyline points="5,0,20,5,5,10">
<animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</polyline>
<g transform="translate(110, 0)">
<animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="5,0,20,5,5,10"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<polyline points="5,0,20,5,5,10"/>
</a>
</g>
<g id="setSeven" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setSevenRef">
<line x1="0" y1="0" x2="25" y2="0" stroke="#ccc"/>
<line x1="0" y1="0" x2="25" y2="0" stroke="#ccc" stroke-dashoffset="5.5" transform="translate(40,0)"/>
</g>
</defs>
<use xlink:href="#setSevenRef"/>
<use xlink:href="#setSevenRef" x="110"/>
<use xlink:href="#setSevenRef" x="220"/>
<line x1="0" y1="0" x2="25" y2="0">
<animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
</line>
<g transform="translate(110, 0)">
<animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
<line x1="0" y1="0" x2="25" y2="0"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
<line x1="0" y1="0" x2="25" y2="0"/>
</a>
</g>
<g id="setEight" transform="translate(0,160)">
<defs>
<g id="setEightRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" display="none"/>
</g>
</defs>
<use xlink:href="#setEightRef"/>
<use xlink:href="#setEightRef" x="110"/>
<use xlink:href="#setEightRef" x="220"/>
<rect x="10" width="8" height="8">
<animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</rect>
<g transform="translate(110, 0)">
<animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</a>
</g>
<g id="setNine" transform="translate(0,180)">
<defs>
<g id="setNineRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
</g>
</defs>
<use xlink:href="#setNineRef"/>
<use xlink:href="#setNineRef" x="110"/>
<use xlink:href="#setNineRef" x="220"/>
<rect x="10" width="8" height="8">
<animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</rect>
<g transform="translate(110, 0)">
<animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</a>
</g>
<g id="setTen" color="rgb(204,0,102)" transform="translate(0,200)">
<defs>
<g id="animateTenRef">
<rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/>
<rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/>
<rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#animateTenRef"/>
<use xlink:href="#animateTenRef" x="110"/>
<use xlink:href="#animateTenRef" x="220"/>
<rect x="10" width="8" height="8" fill="currentColor">
<animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
</rect>
<g transform="translate(110, 0)" fill="currentColor">
<animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</g>
<a xlink:href="" transform="translate(220, 0)" fill="currentColor">
<animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
<animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
<rect x="10" width="8" height="8"/>
</a>
</g>
</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.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>

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,94 @@
<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="OA" author="SH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-44-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 d
attribute of the path element.
</p>
<p>
This test consists of a path, specified as a series of
lineto commands, whose d attribute is animated.
The path morphs 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 test contains an animated circle that indicates where
the path should be at a given time.
</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>From 0s to 2s, the circle below the "1" digit is red and the others are gray.</li>
<li>From 2s to 3s, the circle below the "2" digit is red and the others are gray.</li>
<li>From 3s to 4s, the circle below the "3" digit is red and the others are gray.</li>
<li>From 4s onwards, the circle below the "4" digit is red and the others are gray.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-44-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-->
<path id="Number1" d="M 26.5,32.5 L 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 Z" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<path id="Number2" d="M 108.5,38.5 L 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 Z" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<path id="Number3" d="M 248.5,38.5 L 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 Z" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<path id="Number4" d="M 427.5,17.5 L 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 Z" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
<!-- Gray silhouettes indicating the positions of the marker circle -->
<circle r="30" cx="50" cy="200" fill="#ccc"/>
<circle r="30" cx="173" cy="200" fill="#ccc"/>
<circle r="30" cx="297" cy="200" fill="#ccc"/>
<circle r="30" cx="420" cy="200" fill="#ccc"/>
<!-- Test the animation of the d attribute -->
<path id="animatedNumber" d="M 26.5,32.5 L 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 Z" fill="rgb(204,0,102)" stroke="rgb(0,0,0)" stroke-width="4">
<animate attributeName="d" values="M 26.5,32.5 L 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 Z; M 108.5,38.5 L 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 Z; M 248.5,38.5 L 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 Z; M 427.5,17.5 L 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 Z" fill="freeze" begin="1" dur="3s"/>
</path>
<!-- the "bouncing ball" circle that shows where the path should be -->
<circle r="30" cx="50" cy="200" fill="rgb(204,0,102)">
<animate attributeName="cx" values="50; 173; 297; 420" begin="1" dur="4" calcMode="discrete" fill="freeze"/>
</circle>
</g>
<text x="5" y="225" font-size="28">
Animation on the 'd'
attribute of path.
</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 circle 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>

After

Width:  |  Height:  |  Size: 9 KiB

View file

@ -0,0 +1,279 @@
<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="VH" status="accepted"
version="$Revision: 1.9 $" testname="$RCSfile: animate-elem-46-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test validates the operation of the animate element on the various
text and font properties. This test is very similar to animate-elem-77-t.svg
which uses the set element instead of the animate element to modify graphics
properties.
</p>
<p>
For each text or font properties, there are three tests. One animates the text or font
property directly on a text element which uses the
property. The other two tests apply the animation on a container element (g and
a), and validate that the animated property is inherited by children text elements.
</p>
<p>
For each animation test, the element on which the animation is applied is also
translated by an animation so that the various states of the animation can
be checked more easily. There is a gray reference marker which shows
the expected animation state at the begining of the animation, mid-way, or 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>
There are 5 text properties that are animated, and for each of these,
they are animated in one of three different ways (the three columns). The
three animations in each row must be the same.
</p>
<p>
For each animation test, the element on which the animation is applied is also
translated by an animation so that the various states of the animation can
be checked more easily. Each test has three gray silhouettes, showing the size
and shape that the "A" must have at the start, middle and end of the animation.
</p>
<p>
The animation of font-size must show a continuous change of the font size.
</p>
<p>
The following animations must animate discretely: text-anchor, font-family,
font-style, font-weight.
</p>
<p>
The test passes if all of the above conditions are met.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-46-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">
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F" font-weight="700">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSansBold.svg#ascii"/>
</font-face-src>
</font-face>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F" font-style="italic">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSansItalic.svg#ascii"/>
</font-face-src>
</font-face>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F" font-weight="700" font-style="italic">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSansBoldItalic.svg#ascii"/>
</font-face-src>
</font-face>
<font-face font-family="FreeSerif" unicode-range="U+0-7F" font-weight="bold">
<font-face-src>
<font-face-uri xlink:href="../resources/FreeSerifBold.svg#FreeSerifBold"/>
</font-face-src>
</font-face>
</defs>
<g transform="translate(80, 80)">
<g transform="translate(20,10)" text-anchor="end" font-size="14">
<text x="5" y="15">text-anchor</text>
<text x="5" y="50">font-size</text>
<text x="5" y="85">font-family</text>
<text x="5" y="120">font-style</text>
<text x="5" y="155">font-weight</text>
</g>
<g id="type" transform="translate(90, -10)" text-anchor="middle" font-size="14">
<text x="20" y="3">&lt;text&gt;</text>
<text x="135" y="3">&lt;g&gt;</text>
<text x="250" y="3">&lt;a&gt;</text>
</g>
<g transform="translate(80,5)" text-anchor="start" font-size="20" fill="rgb(204,0,102)">
<g id="animateZero">
<defs>
<g id="animateZeroRef" font-size="30" font-weight="bold">
<text x="0" y="20" fill="#aaa" text-anchor="end">A</text>
<rect x="-2" y="18" width="4" height="4" fill="#aaa"/>
<text x="0" y="20" fill="#aaa" text-anchor="middle" transform="translate(30,0)">A</text>
<rect x="-2" y="18" width="4" height="4" fill="#aaa" transform="translate(30,0)"/>
<text x="0" y="20" fill="#aaa" text-anchor="start" transform="translate(60,0)">A</text>
<rect x="-2" y="18" width="4" height="4" fill="#aaa" transform="translate(60,0)"/>
<rect x="-2" y="18" width="4" height="4">
<animateTransform attributeName="transform" type="translate" values="0;30;60" dur="3s" fill="freeze" calcMode="discrete"/>
</rect>
</g>
</defs>
<use xlink:href="#animateZeroRef"/>
<use xlink:href="#animateZeroRef" x="110"/>
<use xlink:href="#animateZeroRef" x="220"/>
<text id="textID_0" x="0" y="20" text-anchor="end" font-size="30" font-weight="bold">A</text>
<animate xlink:href="#textID_0" attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_0" attributeName="transform" type="translate" values="0;30;60" dur="3s" fill="freeze" calcMode="discrete"/>
<g transform="translate(110, 0)" text-anchor="end" font-size="30" font-weight="bold">
<animate attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</g>
<a xlink:href="" transform="translate(220, 0)" text-anchor="end" font-size="30" font-weight="bold">
<animate attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</a>
</g>
<g id="animateOne" transform="translate(0,35)">
<defs>
<g id="animateOneRef" font-weight="bold" text-anchor="start">
<text x="0" y="20" fill="#aaa" font-size="30">A</text>
<text x="0" y="20" fill="#aaa" font-size="12" transform="translate(30,0)">A</text>
<text x="0" y="20" fill="#aaa" font-size="30" transform="translate(60,0)">A</text>
</g>
</defs>
<use xlink:href="#animateOneRef"/>
<use xlink:href="#animateOneRef" x="110"/>
<use xlink:href="#animateOneRef" x="220"/>
<text id="textID_1" x="0" y="20" font-size="12" font-weight="bold">A</text>
<animate xlink:href="#textID_1" attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_1" attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze"/>
<g transform="translate(110, 0)" font-size="12" font-weight="bold">
<animate attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</g>
<a xlink:href="" transform="translate(220,0)" font-size="12" font-weight="bold">
<animate attributeName="font-size" values="30;12;30" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" from="0" to="60" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</a>
</g>
<g id="animateTwo" transform="translate(0,70)">
<defs>
<g id="animateTwoRef" font-weight="bold" font-size="30">
<text x="0" y="20" fill="#aaa" font-family="SVGFreeSansASCII,sans-serif">A </text>
<text x="30" y="20" fill="#aaa" font-family="FreeSerif,serif">A</text>
<text x="60" y="20" font-size="30" fill="#aaa" font-family="SVGFreeSansASCII,sans-serif">A</text>
</g>
</defs>
<use xlink:href="#animateTwoRef"/>
<use xlink:href="#animateTwoRef" x="110"/>
<use xlink:href="#animateTwoRef" x="220"/>
<text id="textID_2" x="0" y="20" font-weight="bold" font-size="30">A</text>
<animate xlink:href="#textID_2" attributeName="font-family" values="SVGFreeSansASCII,sans-serif;FreeSerif,serif;SVGFreeSansASCII,sans-serif" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_2" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/>
<g font-weight="bold" font-size="30" transform="translate(110,0)">
<animate attributeName="font-family" values="SVGFreeSansASCII,sans-serif;FreeSerif,serif;SVGFreeSansASCII,sans-serif" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</g>
<a xlink:href="" font-weight="bold" font-size="30" transform="translate(220,0)">
<animate attributeName="font-family" values="SVGFreeSansASCII,sans-serif;FreeSerif,serif;SVGFreeSansASCII,sans-serif" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</a>
</g>
<g id="animateThree" transform="translate(0,105)">
<defs>
<g id="animateThreeRef" font-size="30" font-weight="bold">
<text x="0" y="20" font-size="30" fill="#aaa" font-style="normal">A</text>
<text x="30" y="20" font-size="30" fill="#aaa" font-style="italic">A</text>
<text x="60" y="20" font-size="30" fill="#aaa" font-style="normal">A</text>
</g>
</defs>
<use xlink:href="#animateThreeRef"/>
<use xlink:href="#animateThreeRef" x="110"/>
<use xlink:href="#animateThreeRef" x="220"/>
<text id="textID_3" x="0" y="20" font-size="30" font-weight="bold">A</text>
<animate xlink:href="#textID_3" attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_3" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/>
<g transform="translate(110,0)" font-size="30" font-weight="bold">
<animate attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20" font-size="30">A</text>
</g>
<a xlink:href="" transform="translate(220,0)" font-size="30" font-weight="bold">
<animate attributeName="font-style" values="normal;italic;normal" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20" font-size="30">A</text>
</a>
</g>
<g id="animateFour" transform="translate(0,140)">
<defs>
<g id="animateFourRef" font-size="30">
<text x="0" y="20" fill="#aaa" font-weight="bold">A</text>
<text x="30" y="20" fill="#aaa" font-weight="normal">A</text>
<text x="60" y="20" fill="#aaa" font-weight="bold">A</text>
</g>
</defs>
<use xlink:href="#animateFourRef"/>
<use xlink:href="#animateFourRef" x="110"/>
<use xlink:href="#animateFourRef" x="220"/>
<text id="textID_4" x="0" y="20" font-size="30">A</text>
<animate xlink:href="#textID_4" attributeName="font-weight" values="bold;normal;bold" calcMode="discrete" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_4" attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze"/>
<g transform="translate(110,0)" font-size="30">
<animate attributeName="font-weight" values="bold;normal;bold" calcMode="discrete" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</g>
<a xlink:href="" transform="translate(220,0)" font-size="30">
<animate attributeName="font-weight" values="bold;normal;bold" calcMode="discrete" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>
<text x="0" y="20">A</text>
</a>
</g>
</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.9 $</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>

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,112 @@
<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-52-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 eventbase targets.
</p>
<p>
The test consists of 4 rectangles named A, B, C, D. The D rectangle contains
three animations changing the color of the animation target.
Each animation applies to one of the other rectangles
by using xlink:href. Clicking on rect A should change it's
color immediately, clicking B changes its color after 2 seconds,
clicking C changes its color after 4 seconds and clicking D shows no visible change
(although D contains the animations the event target for each
animation is the referenced rectangle, this rectangle is also the
animation target.)
</p>
<p>
The following sections in the SMIL Animation spec (http://www.w3.org/TR/smil-animation/)
are relevant as confirmation of this test:
The SMIL spec(3.6.7 subsection "Event Values") states that "If the
Eventbase-element term is missing, the event-base element is defined to
be the target element of the animation"
The SMIL spec (3.1 subsection "The target element") says that the
animation target may be defined explicitly thru the targetElement IDREF
or href URI.
So in this test, the animation target is defined through
xlink:href and the event base per definition is then also this
referenced element.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. Click on each of the four blue rectangles from left to right.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if all of the following conditions are met:</p>
<ul>
<li>the A rectangle turns yellow immediately when clicked</li>
<li>the B rectangle turns yellow two seconds after being clicked</li>
<li>the C rectangle turns yellow four seconds after being clicked</li>
<li>at the time the C rectangle turns yellow, the D rectangle is still blue</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-52-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 x="65" y="50" font-size="30" stroke="none" fill="black">A</text>
<text x="165" y="50" font-size="30" stroke="none" fill="black">B</text>
<text x="265" y="50" font-size="30" stroke="none" fill="black">C</text>
<text x="365" y="50" font-size="30" stroke="none" fill="black">D</text>
<g transform="translate(0,45)">
<g id="A" fill="rgb(126,143,250)">
<rect x="30" y="15" rx="5" ry="5" width="90" height="40" stroke="#000000" fill="inherit" stroke-width="2"/>
<text x="50" y="40" font-size="20" stroke="none" fill="black">click A</text>
</g>
<g id="B" fill="rgb(126,143,250)">
<rect x="130" y="15" rx="5" ry="5" width="90" height="40" stroke="#000000" fill="inherit" stroke-width="2"/>
<text x="135" y="40" font-size="20" stroke="none" fill="black">click B+2</text>
</g>
<g id="C" fill="rgb(126,143,250)">
<rect x="230" y="15" rx="5" ry="5" width="90" height="40" stroke="#000000" fill="inherit" stroke-width="2"/>
<text x="235" y="40" font-size="20" stroke="none" fill="black">click C+4</text>
</g>
<g fill="rgb(126,143,250)">
<rect x="330" y="15" rx="5" ry="5" width="90" height="40" stroke="#000000" fill="inherit" stroke-width="2"/>
<text x="350" y="40" font-size="20" stroke="none" fill="black">never</text>
<set begin="click" fill="freeze" xlink:href="#A" attributeName="fill" to="yellow"/>
<set begin="click+2" fill="freeze" xlink:href="#B" attributeName="fill" to="yellow"/>
<set begin="click+4" fill="freeze" xlink:href="#C" attributeName="fill" to="yellow"/>
</g>
</g>
<text x="15" y="175" font-size="28">Test of Eventbase targets.</text>
<text x="15" y="245" font-size="18">Note that clicking rect D should give no result.</text>
<text x="15" y="205" font-size="18">Clicking a rectangle should change its color at the </text>
<text x="15" y="225" font-size="18">time for the click + delay as indicated in each rect.</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>

After

Width:  |  Height:  |  Size: 6.3 KiB

View file

@ -0,0 +1,134 @@
<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.7 $" testname="$RCSfile: animate-elem-53-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 points and calcmode.
</p>
<!-- The test has no well defined pass criteria and its not clear also which of the several results produced by different implementations is correct. Think Opera 10.6 is correct; test needs to be discussed by wg. -->
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
1. The green squares should animate together side by side. This applies
to the blue ones as well.
2. The time values indicate when the squares should reach the
corresponding reference square.
3. The total distance is 0+40+80+24.14=144.14
a. The "green animation" is 9 sec and linear so each interval
should get 3 sec.
b. The "blue animation" is 8 sec and paced so the intervals
should get 2.22, 4.44 and 1.34 sec each.
</p>
<p>
Here comes a more detailed description of the animation.
The left green square (LG) is animated by animating the points with
a value array, consisting of 4 lists of points. This is an animation
with calc-mode=linear so an equal amount of time should be spent on
all 4 intervals. The right green square (RG) is animated by a simple
linear motion followed by a scale to follow LG.
The last scale by 1.9428 correspond to a movement of the lover right
corner of the square by sqrt((30*0.9428)^2 + (30*0.9428)^2) which is
approximately 40 distance units. This is the same distance as the first
interval in the values array (and half the second interval).
The length (in terms of distance) is not really important for the
green squares but for the blue squares which are animated with
calc-mode=paced the length is used to calculate the time for each
interval.
Since the first and last interval are of the same length which
totals to the length of the middle interval, the interval should
be given time according to [27.75%(2.22sec);55.5%(4.44sec);16.75%(1.34sec)].
So the left blue square (LR) is animated just as the LG square but
with calc-mode=paced. The same applies to the right blue square (RR)
that has default calc-mode (paced for animateMotion) compablue to the
RG square that has calc-mode=linear.
The calc-mode for the scale of RR (and RG) is not important since
it's not a value list type of animation.
</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-53-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">
<defs>
<polygon id="p" points="0,0 30,0 30,30 0,30" fill="none" stroke="black"/>
</defs>
<g transform="translate(0,0)">
<use xlink:href="#p" x="10" y="10"/>
<text x="15" y="35" font-size="20">0s</text>
<use xlink:href="#p" x="10" y="50"/>
<text x="15" y="75" font-size="20">3s</text>
<use xlink:href="#p" x="10" y="130"/>
<text x="15" y="155" font-size="20">6s</text>
<rect x="10" y="130" width="58.28" height="58.28" fill="none" stroke="black"/>
<text x="45" y="185" font-size="20">9s</text>
<polygon id="LG" points="0,0 30,0 30,30 0,30" fill="none" stroke="green">
<animate attributeName="points" begin="0" dur="9" fill="freeze" values="10,10 40,10 40,40 10,40; 10,50 40,50 40,80 10,80; 10,130 40,130 40,160 10,160; 10,130 68.28,130 68.28,188.28 10,188.28"/>
</polygon>
<g transform="translate(70,10)">
<polygon id="RG" points="0,0 30,0 30,30 0,30" fill="none" stroke="green">
<animateMotion values="0,0;0,40;0,120" begin="0" dur="6" calcMode="linear" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1" to="1.9428" begin="6" dur="3" fill="freeze"/>
</polygon>
</g>
</g>
<g transform="translate(120,0)">
<use xlink:href="#p" x="10" y="10"/>
<text x="15" y="35" font-size="20">0s</text>
<use xlink:href="#p" x="10" y="50"/>
<text x="15" y="75" font-size="20">2.22s</text>
<use xlink:href="#p" x="10" y="130"/>
<text x="15" y="155" font-size="20">6.66s</text>
<rect x="10" y="130" width="58.28" height="58.28" fill="none" stroke="black"/>
<text x="45" y="185" font-size="20">8s</text>
<polygon id="LR" points="10,10 40,10 40,40 10,40" fill="none" stroke="blue">
<animate attributeName="points" begin="0" dur="8" calcMode="paced" fill="freeze" values="10,10 40,10 40,40 10,40; 10,50 40,50 40,80 10,80; 10,130 40,130 40,160 10,160; 10,130 68.28,130 68.28,188.28 10,188.28"/>
</polygon>
<g transform="translate(70,10)">
<polygon id="RR" points="0,0 30,0 30,30 0,30" fill="none" stroke="blue">
<animateMotion values="0,0;0,40;0,120" begin="0" dur="6.66" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" from="1" to="1.9428" begin="6.66" dur="1.34" fill="freeze"/>
</polygon>
</g>
</g>
<text x="5" y="225" font-size="26">Animation on: 'points' with 'calc-mode'.</text>
<text x="5" y="255" font-size="16">Coloblue and black squares should match at indicated time.</text>
<text x="5" y="275" font-size="16">Same coloblue squares (green and blue) should match at all times</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>

After

Width:  |  Height:  |  Size: 7.8 KiB

View file

@ -0,0 +1,254 @@
<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="VH" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-60-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test performs basic test on the begin attribute,
assuming support for the &lt;set&gt; element and setting the
fill attribute on a &lt;rect&gt; element.
</p>
<p>
The test validates the various possibilities for the begin attribute
value: no specified value, offset value, event base value, sync base
value, indefinite value, repeat value, accessKey value and wallclock.
</p>
<p>
There is one or several &lt;set&gt; elements for each of the possible begin
values. For each test, the &lt;set&gt; element(s) has (or have) an indefinite
duration and no other timing attribute specified other than begin
and dur.
</p>
<p>
There are two sets of vertical markers which help check that the test
is handled properly by the user agent. The first set, on the left, shows
markers from 0s to 8s, where the times are offset from the document's load time.
The rectangles in that area should turn green at the time corresponding
to the column they are in. From example, the first rectangle (going left to right)
on the "sync base" line should turn green 2 seconds after the document's load.
The second set of time vertical markers shows offset from a particular event.
For example, for the event base, the markers show an offset to the time
the first event base rectangle (the left-most one) is clicked on. For the
accessKey line, the times show offsets from the time the 'a' key is pressed
and the document has focus.
</p>
<p>
The first &lt;set&gt; has an unspecified begin attribute. That value
defaults to an offset of 0s so the animation should apply as soon as
the document is loaded.
</p>
<p>
The second &lt;set&gt; has its begin attribute set to '2s'. So its
target rectangle should turn green two seconds after the document is
loaded.
</p>
<p>
The third &lt;set&gt; has its begin attribute set to an event base
value 'click'. The user has to click on the left-most target red rectangle
to make the &lt;set&gt; target turn green. There are two rectangles
with associated &lt;set&gt; elements. The left most ones has a simple
value (no offset) and the second one is offset from the event time by 2 seconds.
</p>
<p>
The fourth &lt;set&gt; elements have their begin attributes set to a sync base
value. The first two rectangles have &lt;set&gt; elements synchronized on their sync base
begin. The left-most one has no offset and the following one has a 2 seconds offset.
The last two rectangles have &lt;set&gt; elements synchronized on their sync base end.
The first one (i.e., the third from left to right on that line), has a 2 seconds
negative offset. The second one (i.e., the last one on the line) has no offset and should
begin at the time its sync base ends.
</p>
<p>
The fifth &lt;set&gt; has its begin attribute set to indefinite and
should not turn red and stay green.
</p>
<p>
The sixth &lt;set&gt;s have their begin attributes have their begin attributes
based on the repeat() function. The repeat they are synchronized on happens
at 3s. The first &lt;set&gt;, which has no offset, should begin at 3s. The
second &lt;set&gt;, which has a 2 seconds offset, should start at 5s.
</p>
<p>
The seventh &lt;set&gt;s have their begin attributes set to 'accessKey(a)'.
The first one has no offset and should become active (and turn the rectangle
green), as soon as the key 'a' is pressed in the user agent. The second &lt;set&gt;
has a 2s offset and should become active 2 seconds after the 'a' key is pressed in
the user agent.
</p>
<p>
The eight's &lt;set&gt; target has its begin attribute set to
'wallclock()'. Therefore, the target should turn red because the
target wallclock time is in the past. The SMIL specification states the following about wallclock values in the past:
"When a begin time is resolved to be in the past (i.e., before the current presentation time), the element begins immediately,
but acts as though it had begun at the specified time (playing from an offset into the media)." (http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncTiming).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. Observe the document for at least eight seconds.
Then, click on the first red square in the "event base" row,
and observe the document for two seconds. Then, press "a"
on the keyboard, and observe the document for another two seconds.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if the following conditions are met:</p>
<ul>
<li>In the first eight seconds of the document, the 10 squares
in the left section of the test must become green at the time
at the top of the column they are in. For example, the square in
the "offset" row must become green at 2s after the document has
been loaded.</li>
<li>Immediately once the red square in the "event base" row has been clicked,
it must become green. Two seconds after the click, the second square
must become green.</li>
<li>Immediately once "a" has been pressed on the keyboard,
the first square in the "accessKey()" row must become green.
Two seconds after the keypress, the second square must become green.</li>
<li>No other changes occur in the document.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-60-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 text-anchor="middle" x="240" y="30" font-size="20">begin</text>
<g transform="translate(100, 80)">
<g transform="translate(80,5)" text-anchor="end" font-size="14">
<text>unspecified</text>
<text y="25">offset</text>
<text y="50">event base</text>
<text y="75">sync base</text>
<text y="100">indefinite</text>
<text y="125">repeat()</text>
<text y="150">accessKey()</text>
<text y="175">wallclock()</text>
</g>
<g id="timeMarkersText" transform="translate(100, -15)" text-anchor="middle" font-size="8">
<text>0s</text>
<text x="12">1s</text>
<text x="24">2s</text>
<text x="36">3s</text>
<text x="48">4s</text>
<text x="60">5s</text>
<text x="72">6s</text>
<text x="84">7s</text>
<text x="96">8s</text>
<text x="120">0s</text>
<text x="132">1s</text>
<text x="144">2s</text>
</g>
<g id="timeMarkers" transform="translate(94, -10) scale(1, 8)">
<rect width="12" height="25" fill="#eee"/>
<rect x="12" width="12" height="25" fill="#ddd"/>
<rect x="24" width="12" height="25" fill="#eee"/>
<rect x="36" width="12" height="25" fill="#ddd"/>
<rect x="48" width="12" height="25" fill="#eee"/>
<rect x="60" width="12" height="25" fill="#ddd"/>
<rect x="72" width="12" height="25" fill="#eee"/>
<rect x="84" width="12" height="25" fill="#ddd"/>
<rect x="96" width="12" height="25" fill="#eee"/>
<rect x="120" width="12" height="25" fill="#eee"/>
<rect x="132" width="12" height="25" fill="#ddd"/>
<rect x="144" width="12" height="25" fill="#eee"/>
</g>
<g transform="translate(100,0)">
<g id="setOne">
<rect x="-6" y="-6" width="12" height="12" fill="#F33">
<set attributeName="fill" to="#3F3" dur="indefinite"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(24,0)">
<set id="secondSet" attributeName="fill" to="#3F3" begin="2s" dur="indefinite"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<rect id="setThreeTarget" x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(120,0)">
<set attributeName="fill" id="thirdSet" to="#3F3" begin="setThreeTarget.click" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
<set attributeName="fill" id="thirdSetOffset" to="#3F3" begin="setThreeTarget.click + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<set id="endBase" attributeName="display" to="inline" begin="7s" dur="1s"/>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(24,0)">
<set attributeName="fill" to="#3F3" begin="secondSet.begin" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(48,0)">
<set attributeName="fill" to="#3F3" begin="secondSet.begin + 2s" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(72,0)">
<set attributeName="fill" to="#3F3" begin="endBase.end - 2s" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(96,0)">
<set attributeName="fill" to="#3F3" begin="endBase.end" dur="indefinite"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 100)">
<rect x="-6" y="-6" width="12" height="12" fill="#3F3">
<set attributeName="fill" to="#F33" begin="indefinite" dur="indefinite"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 125)">
<set id="repeatingSet" attributeName="display" to="inline" begin="0s" dur="1s" repeatCount="4"/>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(36,0)">
<set attributeName="fill" to="#3F3" begin="repeatingSet.repeat(3)" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(60,0)">
<set attributeName="fill" to="#3F3" begin="repeatingSet.repeat(3) + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setSeven" transform="translate(0, 150)">
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(120,0)">
<set attributeName="fill" to="#3F3" begin="accessKey(a)" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
<set attributeName="fill" to="#3F3" begin="accessKey(a) + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setEight" transform="translate(0, 175)">
<rect x="-6" y="-6" width="12" height="12" fill="#3F3">
<set attributeName="fill" to="#F33" begin="wallclock(2000-06-10T12:34:56Z)" dur="indefinite"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,191 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-61-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests validates multiple begin conditions in the begin attribute,
assuming support for the &lt;set&gt; element and setting the
fill attribute on a &lt;rect&gt; element.
</p>
<p>
The test validates the various possibilities for the begin attribute
value: multiple offset values, multiple event base values, multiple sync base
values, multiple repeat values, and multiple accessKey values. Finally,
the test validates that begin values of different kinds can be mixed.
</p>
<p>
The test shows 6 rows where a red rectangle' s x attribute is animated
with &lt;set&gt; elements.
</p>
<p>
On the first three rows, the red rectangles should show on the left from
0 to 1s. From 1 to 2s, the rectangles should show on the right. Then
the rectangles should show on the left from 2 to 4s, then on the right
again from 4 to 5s and come back to the left position and stay there
after 5s.
</p>
<p>
On the fourth row, the rectangle's begin condition is event based
and requires a user click. After the user clicks on the rectangle,
the rectangle should move to the right position for 1s, then move
back to the left position for 3 seconds, move again to the right
position for 1 second before going back to the left position.
</p>
<p>
On the fifth row, the rectangle's begin condition is accessKey based
and requires a user to press the 'a' key. After the user presses that key
the rectangle should move to the right position for 1s, then move
back to the left position for 3 seconds, move again to the right
position for 1 second before going back to the left position.
</p>
<p>
The last row's rectangle has a begin condition with two offset values
(1s;4s) and should behave like the rectangles of the first three
rows for the first 5 seconds of the document's timeline. In addition,
the begin condition has a click event base and thus, the rectangle
should move to the right position for one second every time the user
clicks on it. Finally, the begin condition also has an accessKey condition
for the 'b' character. Thus, the rectangle should move to the right
position every time the user presses the 'b' key.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. Observe the document for a least six seconds.
Then, click on the left square in the "2 event base" row and
wait for another six seconds while observing. Then, press "a"
on the keyboard and wait for another six seconds while observing.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if all of the following conditions are met:</p>
<ul>
<li>The red squares in the top three rows and the bottom row are
in the relevant column according to the times written above the columns:
in left column for the first second of the document, in the
right column between 1s and 2s, in the left column again between
2s and 4s, in the right column again between 4s and 5s, and finally
revert to the left column at 5s.</li>
<li>Once the red square in the "2 event base" row is clicked, it must
follow the same movements as the earlier animated squares, except that
the times above the columns indicate offsets from the time of the click,
rather than from the start of the document. Thus, the red square must
be in the left column in the first second after being clicked,
in the right column between 1s and 2s after being clicked,
in the left column again between 2s and 4s after being clicked,
in the right column again between 4s and 5s after being clicked,
and finally must revert to the left column 5s after being clicked.</li>
<li>Once the "a" key is pressed, the red square in the "2 accessKeys"
row must follow the same movements as the first set of animated squares, except that
the times above the columns indicate offsets from the time of the keypress,
rather than from the start of the document. Thus, the red square must
be in the left column in the first second after the keypress,
in the right column between 1s and 2s after the keypress,
in the left column again between 2s and 4s after the keypress,
in the right column again between 4s and 5s after the keypress,
and finally must revert to the left column 5s after the keypress.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-61-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 text-anchor="middle" x="240" y="30" font-size="20">multiple begin</text>
<g transform="translate(100, 100)">
<g transform="translate(80,25)" text-anchor="end" font-size="14">
<text>2 offsets</text>
<text y="25">2 sync bases</text>
<text y="50">2 repeat</text>
<text y="100">2 event base</text>
<text y="125">2 accessKeys</text>
<text y="150">misc</text>
</g>
<g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
<text>0-1s</text>
<text y="-20">2s-4s</text>
<text y="-40">&gt; 5s</text>
<g transform="translate(40,0)">
<text>1-2s</text>
<text y="-20">4-5s</text>
</g>
</g>
<g transform="translate(150,20)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="34" begin="1s; 4s" dur="1s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<set id="syncBase" attributeName="display" to="inline" begin="0s" dur="indefinite"/>
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="syncBase.begin + 1s; syncBase.begin + 4s" dur="1s"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<set id="repeatBase" attributeName="display" to="inline" begin="0s" dur="1s" repeatDur="indefinite"/>
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="repeatBase.repeat(1);repeatBase.repeat(4)" dur="1s"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 100)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setFourTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="setFourTarget.click + 0s; setFourTarget.click+4s" dur="1s"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setFiveTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="accessKey(a) + 0s;accessKey(a)+4s" dur="1s"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 150)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setSixTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="1s;4s;setSixTarget.click;accessKey(b)" dur="1s"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,260 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-62-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test performs basic test on the end attribute,
assuming support for the &lt;set&gt; element and setting the
fill attribute on a &lt;rect&gt; element.
</p>
<p>
The test validates the various possibilities for the end attribute
value: no specified value, offset value, event base value, sync base
value, indefinite value, repeat value, accessKey value and wallclock.
</p>
<p>
There are one or several &lt;set&gt; elements for each of the possible end
values. For each test, the &lt;set&gt; element(s) has (or have) an indefinite
duration and no other timing attribute specified other than end
and dur.
</p>
<p>
There are two sets of vertical markers which help check that the test
is handled properly by the user agent. The first set, on the left, shows
markers from 0s to 8s, where the times are offset from the document's load time.
The rectangles in that area should turn green at the time corresponding
to the column they are in. From example, the first rectangle (going left to right)
on the "sync base" line should turn green 2 seconds after the document's load.
The second set of time vertical markers shows offset from a particular event.
For example, for the event base, the markers show an offset to the time
the first event base rectangle (the left-most one) is clicked on. For the
accessKey line, the times show offsets from the time the 'a' key is pressed
and the document has focus.
</p>
<p>
The first &lt;set&gt; has no end attribute and an indefinite duration.
Since there are no constraints on the active duration (no end attribute) the
active duration is the same as the simple duration (indefinite). This
means that the animation begins at 0s and has an indefinite end time.
</p>
<p>
The second &lt;set&gt; has its end attribute set to '2s'. So its
target rectangle should turn green two seconds after the document is
loaded.
</p>
<p>
The third &lt;set&gt; has its end attribute set to an event base
value 'click'. The user has to click on the left-most target red rectangle
to make the &lt;set&gt; target turn green. There are two rectangles
with associated &lt;set&gt; elements. The left most ones has a simple
value (no offset) and the second one is offset from the event time by 2 seconds.
</p>
<p>
The fourth &lt;set&gt; elements have their end attributes set to a sync base
value. The first two rectangles have &lt;set&gt; elements synchronized on their sync base
end. The left-most one has no offset and the following one has a 2 seconds offset.
The last two rectangles have &lt;set&gt; elements synchronized on their sync base end.
The first one (i.e., the third from left to right on that line), has a 2 seconds
negative offset. The second one (i.e., the last one on the line) has no offset and should
end at the time its sync base ends.
</p>
<p>
The fifth &lt;set&gt; has its end attribute set to indefinite and
should not turn red and stay green.
</p>
<p>
The sixth &lt;set&gt;s have their end attributes have their end attributes
based on the repeat() function. The repeat they are synchronized on happens
at 3s. The first &lt;set&gt;, which has no offset, should end at 3s. The
second &lt;set&gt;, which has a 2 seconds offset, should start at 5s.
</p>
<p>
The seventh &lt;set&gt;s have their end attributes set to 'accessKey(a)'.
The first one has no offset and should become active (and turn the rectangle
green), as soon as the key 'a' is pressed in the user agent. The second &lt;set&gt;
has a 2s offset and should become active 2 seconds after the 'a' key is pressed in
the user agent.
</p>
<p>
The eight's &lt;set&gt; target has its end attribute set to
'wallclock()'. The result depends on the presentation time.
If the document is viewed completely before 2200-06-10T12:34:56Z,
the rectangle has to be always green. begin is not explicitely set, therefore
it is zero, dur is indefinite and end is in the future.
If the document is viewed completely after 2200-06-10T12:34:56Z, the only end
value is before the implicitely given only begin value and therefore the set
does not start, the rectangle remains red. If the document is viewed in a time interval started before
2200-06-10T12:34:56Z and ended after this date, the rectangle will start green at the beginning, change to red at
2200-06-10T12:34:56Z and will remain red until the end of presentation.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. Observe the document for at least eight seconds.
Then, click on the first red square in the "event base" row,
and observe the document for two seconds. Then, press "a"
on the keyboard, and observe the document for another two seconds.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if the following conditions are met:</p>
<ul>
<li>In the first eight seconds of the document, the 10 squares
in the left section of the test must become green at the time
at the top of the column they are in. For example, the square in
the "offset" row must become green at 2s after the document has
been loaded.</li>
<li>Immediately once the red square in the "event base" row has been clicked,
it must become green. Two seconds after the click, the second square
must become green.</li>
<li>Immediately once "a" has been pressed on the keyboard,
the first square in the "accessKey()" row must become green.
Two seconds after the keypress, the second square must become green.</li>
<li>No other changes occur in the document.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-62-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 text-anchor="middle" x="240" y="30" font-size="20">end</text>
<g transform="translate(100, 80)">
<g transform="translate(80,5)" text-anchor="end" font-size="14">
<text>unspecified</text>
<text y="25">offset</text>
<text y="50">event base</text>
<text y="75">sync base</text>
<text y="100">indefinite</text>
<text y="125">repeat()</text>
<text y="150">accessKey()</text>
<text y="175">wallclock()</text>
</g>
<g id="timeMarkersText" transform="translate(100, -15)" text-anchor="middle" font-size="8">
<text>0s</text>
<text x="12">1s</text>
<text x="24">2s</text>
<text x="36">3s</text>
<text x="48">4s</text>
<text x="60">5s</text>
<text x="72">6s</text>
<text x="84">7s</text>
<text x="96">8s</text>
<text x="120">0s</text>
<text x="132">1s</text>
<text x="144">2s</text>
</g>
<g id="timeMarkers" transform="translate(94, -10) scale(1, 8)">
<rect width="12" height="25" fill="#eee"/>
<rect x="12" width="12" height="25" fill="#ddd"/>
<rect x="24" width="12" height="25" fill="#eee"/>
<rect x="36" width="12" height="25" fill="#ddd"/>
<rect x="48" width="12" height="25" fill="#eee"/>
<rect x="60" width="12" height="25" fill="#ddd"/>
<rect x="72" width="12" height="25" fill="#eee"/>
<rect x="84" width="12" height="25" fill="#ddd"/>
<rect x="96" width="12" height="25" fill="#eee"/>
<rect x="120" width="12" height="25" fill="#eee"/>
<rect x="132" width="12" height="25" fill="#ddd"/>
<rect x="144" width="12" height="25" fill="#eee"/>
</g>
<g transform="translate(100,0)">
<g id="setOne">
<rect x="-6" y="-6" width="12" height="12" fill="#F33">
<set attributeName="fill" to="#3F3" begin="0s" dur="indefinite"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(24,0)">
<set id="secondSet" attributeName="fill" to="#F33" begin="0s" end="2s" dur="indefinite"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<rect id="setThreeTarget" x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(120,0)">
<set attributeName="fill" id="thirdSet" to="#F33" end="setThreeTarget.click" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
<set attributeName="fill" id="thirdSetOffset" to="#3F3" begin="setThreeTarget.click + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<set id="endBase" attributeName="display" to="inline" begin="7s" dur="1s"/>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(24,0)">
<set attributeName="fill" to="#F33" end="secondSet.begin + 2s" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(48,0)">
<set attributeName="fill" to="#F33" end="secondSet.begin + 4s" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(72,0)">
<set attributeName="fill" to="#F33" end="endBase.end - 2s" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(96,0)">
<set attributeName="fill" to="#F33" end="endBase.end" dur="indefinite"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 100)">
<rect x="-6" y="-6" width="12" height="12" fill="#F33">
<set attributeName="fill" to="#3F3" end="indefinite" dur="indefinite"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 125)">
<set id="repeatingSet" attributeName="display" to="inline" begin="0s" dur="1s" repeatCount="4"/>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(36,0)">
<set attributeName="fill" to="#F33" end="repeatingSet.repeat(3)" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(60,0)">
<set attributeName="fill" to="#F33" end="repeatingSet.repeat(3) + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setSeven" transform="translate(0, 150)">
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(120,0)">
<set attributeName="fill" to="#F33" end="accessKey(a)" dur="indefinite"/>
</rect>
<rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(144,0)">
<set attributeName="fill" to="#F33" end="accessKey(a) + 2s" dur="indefinite"/>
</rect>
</g>
<g id="setEight" transform="translate(0, 175)">
<rect x="-6" y="-6" width="12" height="12" fill="#F33">
<set attributeName="fill" to="#3F3" end="wallclock(2200-06-10T12:34:56Z)" dur="indefinite"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -0,0 +1,200 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-63-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests validates multiple end conditions in the end attribute,
assuming support for the &lt;set&gt; element and setting the
dur attribute to 'indefinite'.
</p>
<p>
The test validates the various possibilities for the end attribute
value: multiple offset values, multiple event base values, multiple sync base
values, multiple repeat values, and multiple accessKey values. Finally,
the test validates that end values of different kinds can be mixed.
</p>
<p>
The test shows 6 rows where a red rectangle's x attribute is animated
with &lt;set&gt; elements.
</p>
<p>
On the first three rows, the red rectangles should show on the left from
0 to 1s. From 1 to 2s, the rectangles should show on the right. Then
the rectangles should show on the left from 2 to 4s, then on the right
again from 4 to 5s and come back to the left position and stay there
after 5s.
</p>
<p>
On the fourth row, the rectangle's end condition is event based
and requires a user click. One of the end condition is defined
to be 5 seconds prior to the click and one is defined to be 5
seconds after the click. If the user clicks on the rectangle
before 5 seconds (in document time), the red rectangle we move
to the left position 5 seconds after the click (because the
'click - 5s' end time resolves to a time prior to the begin
time). If the user clicks after 5 seconds (in document time),
then the red rectangle moves to the left position immediately because
the 'click - 5s' time resolves to a time after the begin time.
</p>
<p>
On the fifth row, the rectangle's end condition is accessKey based
and requires a user to press the 'a' key. The behavior is exactly the
same as for the previous row, except that the triggering event
is the 'a' key press.
</p>
<p>
The last row's rectangle has a end condition with two offset values
(1s;4s) and should behave like the rectangles of the first three
rows for the first 5 seconds of the document's timeline. In addition,
the end condition has a click event base and thus, the rectangle
should immediately move to the left position if the user everytime the user
clicks clicks on the rectangle when it is on the right position.
Finally, the end condition also has an accessKey condition
for the 'b' character. Thus, the rectangle should move to the left
position every time the user presses the 'b' key and the rectangle is
on the right position.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. Observe the document for six seconds.
Then, click the red square in the "2 event base" row
and then press "a" on the keyboard.</p>
<p>Next, reload the test. Before five seconds have elapsed,
click the red square in the "2 event base" row and then
press "a" on the keyboard. Observe the document for another six seconds.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if the following conditions are met:</p>
<ul>
<li>In the first load of the document, the red squares in the top three
rows and the bottom row are in the relevant column according to the
times written above the columns: in left column for the first second
of the document, in the right column between 1s and 2s, in the left
column again between 2s and 4s, in the right column again between 4s
and 5s, and finally revert to the left column at 5s. During this
whole time, the red squares on the "2 event base" and "2 accessKeys"
rows must be in the right column.</li>
<li>In the first load of the document, immediately once the red
square is clicked, it must move to the left column.</li>
<li>In the first load of the document, immediately once "a" is pressed
on the keyboard, the red square in the "2 accessKeys" row must move
to the left column.</li>
<li>In the second load of the document, five seconds after the red
square is clicked, it must move to the left column.</li>
<li>In the second load of the document, five seconds after "a" is pressed
on the keyboard, the red square in the "2 accessKeys" row must move
to the left column.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-63-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 text-anchor="middle" x="240" y="30" font-size="20">multiple end</text>
<g transform="translate(100, 100)">
<g transform="translate(80,25)" text-anchor="end" font-size="14">
<text>2 offsets</text>
<text y="25">2 sync bases</text>
<text y="50">2 repeat</text>
<text y="100">2 event base</text>
<text y="125">2 accessKeys</text>
<text y="150">misc</text>
</g>
<g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
<text>0-1s</text>
<text y="-20">2s-4s</text>
<text y="-40">&gt; 5s</text>
<g transform="translate(40,0)">
<text>1-2s</text>
<text y="-20">4-5s</text>
</g>
</g>
<g transform="translate(150,20)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="34" begin="1s; 4s" end="2s; 5s" dur="indefinite"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<set id="syncBase" attributeName="display" to="inline" begin="0s" dur="indefinite"/>
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="1s; 4s" end="syncBase.begin+2s;syncBase.begin + 5s" dur="indefinite"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<set id="repeatBase" attributeName="display" to="inline" begin="0s" dur="1s" repeatDur="indefinite"/>
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="1s; 4s" end="repeatBase.repeat(2);repeatBase.repeat(5)" dur="indefinite"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 100)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setFourTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="0s" end="setFourTarget.click -5s; setFourTarget.click + 5s" dur="indefinite"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setFiveTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="0s" end="accessKey(a) - 5s;accessKey(a)+5s" dur="indefinite"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 150)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="40"/>
<rect id="setSixTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="34" begin="1s;4s" end="2s;5s;setSixTarget.click;accessKey(b)" dur="indefinite"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,132 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-64-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on the dur attribute.
</p>
<p>
The first row shows a red rectangle subject to a &lt;set&gt; animation
with no begin attribute, no end attribute and a dur attribute set to
'2s'. Therefore, the animation should be active from 0 to 2 seconds and
then terminate. Consequently, the rectangle should show on the right
for the first two seconds, and then move to the left position.
</p>
<p>
The second row shows a red rectangle subject to a &lt;set&gt; animation
with no begin attribute, no end attribute and a dur attribute set to
'indefinite'. Therefore, the animation should stay active indefinitely
and the rectangle should always be on the right position, never on the
left position.
</p>
<p>
Finally, the third row shows red rectangle subject to a &lt;set&gt; animation
with no begin attribute, no end attribute and a dur attribute set to
'media'. In the context of SVG 1.1, this is equivalent to an 'indefinite'
value. Therefore, the animation should stay active indefinitely
and the rectangle should always be on the right position, never on the
left position.
</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 after three seconds, in each of the three rows,
the red rectangle is in the column at the times indicated.
Thus, from the document load until 2s afterwards, the red
square in the first row must be in the right column,
and after the 2s it must be in the left column. In the
other two rows, the red square must remain in the
right column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-64-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 text-anchor="middle" x="240" y="30" font-size="20">dur</text>
<g transform="translate(100, 100)">
<g transform="translate(80,25)" text-anchor="end" font-size="14">
<text>clock value</text>
<text y="65">indefinite</text>
<text y="130">media</text>
</g>
<g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
<text>&gt; 2s</text>
<text x="80">0s-2s</text>
<g transform="translate(0, 65)">
<text>never</text>
<text x="80">&gt; 0s</text>
</g>
<g transform="translate(0, 130)">
<text>never</text>
<text x="80">&gt; 0s</text>
</g>
</g>
<g transform="translate(150,20)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" dur="2s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 65)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="indefinite"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 130)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="media"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 5.9 KiB

View file

@ -0,0 +1,223 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-65-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on the min attribute. The test is based
on the SMIL specification at:
http://www.w3.org/TR/smil20/smil-timing.html#Timing-MinMax.
</p>
<p>
Each row in the test shows different rectangles subject to &lt;set&gt;
animations with different configurations with regards to the min
attribute. For each row but the last one, the animation should be active
during the first 5 seconds of the animations where the red rectangle
should show in the right column. At five seconds into the animation,
all the rectangles should move to their left position.
</p>
<p>
On the first row, the first &lt;set&gt; animation (left rectangle) has an end value of 5s,
and no min attribute. The active duration resulting from the end attribute is 5s.
The first row shows a second rectangle with a &lt;set&gt; animation with
the same configuration except that the min attribute value is set to
'media'. Because the &lt;set&gt; element does not define a media, the
behavior should be as if the attribute was not specified. The active duration (5s)
of the second &lt;set&gt; animation is therefore not constrained.
</p>
<p>
On the second row, the &lt;set&gt; animation has an end value of 5s,
and a -6s min attribute. The active duration resulting from the end attribute is 5s.
The negative min value is invalid and, as per the specification, the behavior should be
as if the attribute was not specified. The active duration (5s) is therefore not constrained.
</p>
<p>
On the third row, the &lt;set&gt; animation has an end value of 5s,
and a 3s min attribute. The active duration resulting from the end attribute is 5s.
The min value is less than the active duration, so the min attribute does not actually
constrain the active duration.
</p>
<p>
On the fourth row, the &lt;set&gt; animation has a dur value of indefinite, an end value of 2s,
and a 5s min attribute. The active duration resulting from the end attribute would be 2s.
Because this is less than the min value (2s &lt; 5s) the (min constrained) active duration
has to be corrected to 5s, despite a simple duration (indefinite) that is greater than the min value.
</p>
<p>
On the fifth row, the &lt;set&gt; animation has a dur value of 1s, an end value of 2s,
a repeatCount of 7 and a 5s min attribute. The active duration resulting from dur, end and repeatCount
would be 2s. Because this is less than the min value (2s &lt; 5s)
the (min constrained) active duration has to be corrected to 5s.
</p>
<p>
On the sixth row, the &lt;set&gt; animation has a dur value of 1s, an end
value of 2s, a repeatCount of 5 and a 8s min attribute value.
The active duration resulting from dur, end and repeatCount
would be 2s, because this is less than the min value (2s &lt; 8s)
the active duration has to be corrected to 8s. As the
fill attribute is set to 'remove' on the &lt;set&gt; animation, this
remove is applied at 5s, the end of the repeatCount.
Note, that if the end of active duration would have been used as a
syncbase-value for another animation, the corrected end event at
(begin + min) = 8s has to be used.
</p>
<p>
On the seventh row, the &lt;set&gt; animation has a dur value of 1s, an end
value of 2s, a repeatCount of 5 and a 8s min attribute value.
The active duration resulting from dur, end and repeatCount
would be 2s, because this is less than the min value (2s &lt; 8s)
the active duration has to be corrected to 8s. As the fill attribute
is set to 'freeze' on the &lt;set&gt; animation, the animation is frozen at
5s, the end of the repeatCount, the &lt;set&gt; applies indefinitely.
Note, that if the end of active duration would have been used as a
syncbase-value for another animation, the corrected end event at
(begin + min) = 8s has to be used.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least six seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if the following conditions are met:</p>
<ul>
<li>For the first five seconds after the document loads,
all of the red squares in the top six rows are in the right column, and
after five seconds, they all move to the left column.</li>
<li>The red square in the last row is always in the right column.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-65-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 text-anchor="middle" x="240" y="30" font-size="20">min</text>
<g transform="translate(100, 50)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>no min / media</text>
<text y="25">invalid min</text>
<text y="50">min &lt; active dur</text>
<text y="75">min &gt; active dur</text>
<text y="100">min &lt; repeat dur</text>
<text y="125">min &gt; repeat dur, remove</text>
<text y="180">min &gt; repeat dur, freeze</text>
</g>
<g id="timeMarkersText" transform="translate(150, 25)" text-anchor="middle" font-size="14">
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
<g transform="translate(0, 180)">
<text>never</text>
<text x="80">&gt; 0s</text>
</g>
</g>
<g transform="translate(150,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" end="5s"/>
</rect>
<g transform="translate(20, 0)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" end="5s" min="media"/>
</rect>
</g>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="-6s" end="5s"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="3s" end="5s"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="5s" dur="indefinite" end="2s"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 100)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="5s" end="2s" dur="1s" repeatCount="7"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="8s" end="2s" dur="1s" repeatCount="5" fill="remove"/>
</rect>
</g>
<g id="setSeven" transform="translate(0, 180)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="8s" end="2s" dur="1s" repeatCount="5" fill="freeze"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -0,0 +1,199 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-66-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on the max attribute and on
combinations of the min and max attributes. The test is based
on the SMIL specification at:
http://www.w3.org/TR/smil20/smil-timing.html#Timing-MinMax.
</p>
<p>
Each row in the test shows different rectangles subject to &lt;set&gt;
animations with different configurations with regards to the max and min
attributes. For each row, the animation should be active
during the first 5 seconds of the animations where the red rectangle
should show in the right column. At five seconds into the animation,
all the rectangles should move to their left position.
</p>
<p>
On the first row, the &lt;set&gt; animation has a (0s &lt;= t &lt; 5s) active duration
and no max attribute so the actual active duration is (0s &lt;= t &lt; 5s).
The first row shows a second rectangle with a &lt;set&gt; animation with
the same configuration except that the max attribute value is set to
'media'. Because the &lt;set&gt; element does not define a media, the
behavior should be as if the attribute was not specified.
</p>
<p>
On the second row, the &lt;set&gt; animation has a (0s &lt;= t &lt; 5s) active duration
and a min attribute set to '-6s' for the first rectangle and to 'foo' for the
second one. These values are invalid for max and, as
per the specification, the behavior should be as if the attribute was not
specified. Consequently, the behavior is as for the previous row and
the actual active duration is (0s &lt;= t &lt; 5s).
</p>
<p>
On the third row, the &lt;set&gt; animation has a (0s &lt;= t &lt; 8s) initial active duration
and a max attribute set to '5s'. The max value is less than the active
duration, so the max attribute constrains the active duration to (0s &lt;= t &lt; 5s).
</p>
<p>
On the fourth row, the &lt;set&gt; animation has a (0s &lt;= t &lt; 5s) initial active duration,
an indefinite simple duration (dur is set to indefinite) and a max attribute set to '8s'.
Because the initial active duration is less than the max attribute the active
duration is not constrained and is unchanged at (0s &lt;= t &lt; 5s).
</p>
<p>
On the fifth row, the &lt;set&gt; animation has a (0s &lt;= t &lt; indefinite) initial active duration,
a min of 2s and a max of 5s. Because the min value is less than the max value, both apply
and the computed active duration is (0s &lt;= t &lt; 5s).
</p>
<p>
On the sixth row, the &lt;set&gt; animation has a (0s &lt;= t &lt; indefinite) initial active duration,
a min of 5s and a max of 5s. Because the min value is equal to the max value, both apply
and the computed active duration is (0s &lt;= t &lt; 5s).
</p>
<p>
On the seventh row, the &lt;set&gt; animation has a [0s, 5s[[ initial active duration,
a min of 8s and a max of 2s. Because the min value is greater than the max value, both are
ignored and the computed active duration is [0s, 5s[.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least six seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if for the first five seconds after the document loads,
the red squares in each row (two in the first two rows, and one each in the
remaining rows) are in the right column, and after the five seconds,
they all move to the left column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-66-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 text-anchor="middle" x="240" y="30" font-size="20">max</text>
<text text-anchor="middle" x="240" y="190" font-size="20">min &amp; max</text>
<g transform="translate(100, 30)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>no max / media</text>
<text y="25">invalid max values</text>
<text y="50">max &lt; active dur</text>
<text y="75">max &gt; active dur</text>
<text y="150">min &lt; max</text>
<text y="175">min = max</text>
<text y="200">min &gt; max (both ignored)</text>
</g>
<g id="timeMarkersText" transform="translate(150, 25)" text-anchor="middle" font-size="14">
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
</g>
<g transform="translate(150,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" end="5s"/>
</rect>
<g transform="translate(20, 0)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" end="5s" max="media"/>
</rect>
</g>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" max="-6s" end="5s"/>
</rect>
<g transform="translate(20, 0)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" end="5s" max="foo"/>
</rect>
</g>
</g>
<g id="setThree" transform="translate(0, 50)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" max="5s" end="8s"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" max="8s" dur="indefinite" end="5s"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 150)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="2s" max="5s" dur="indefinite"/>
</rect>
</g>
<g id="setSix" transform="translate(0, 175)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="5s" max="5s" dur="indefinite"/>
</rect>
</g>
<g id="setSeven" transform="translate(0, 200)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" min="8s" max="2s" end="5s"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 9.8 KiB

View file

@ -0,0 +1,176 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-67-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on restart attribute.
</p>
<p>
Each row in the test shows different rectangles subject to &lt;set&gt;
animations with different configurations with regards to the restart
attribute. For each row, the animation should be active
during the first 5 seconds of the animations where the red rectangle
should show in the right column. At five seconds into the animation,
all the rectangles should move to their left position.
</p>
<p>
On the first row, the &lt;set&gt; animation has a begin attribute set to
'0s;1s' and a dur attribute set to 4s. This should result in a first
interval of (0s &lt;= t &lt; 4s) which should be superceeded, at 1s, by a new interval
of (1s &lt;= t &lt; 5s) because the default restart behavior is 'always'.
Consequently, the rectangle should be in the right position during the
(0s &lt;= t &lt; 5s) interval and move to the left position at 5s.
</p>
<p>
On the second row, the &lt;set&gt; animation has a begin attribute set to
'0s;1s', a dur attribute set to 4s and a restart attribute set to always.
The behavior should be the same as for the first row.
</p>
<p>
On the third row, the first (left most) rectangle's &lt;set&gt; animation
has a begin attribute set to '0s;1s', a dur set to 5s and a restart attribute
set to whenNotActive. Because of the rules for computing intervals, the
animation's interval is (0s &lt;= t &lt; 5s) and is not superseded by a (1s &lt;= t &lt; 6s) interval
because of the restart value.
The second (right most) red rectangle's &lt;set&gt; animation has a begin
attribute set to '0s;2.5s' and a dur attribute set to 2.5s. This results in
a first interval (0s &lt;= t &lt; 2.5s) which is followed by a (2.5s &lt;= t &lt; 5s) interval. Consequently,
the rectangle stays on its right position for the first five seconds before it definitively
moves to the left position.
</p>
<p>
On the fourth row, the &lt;set&gt; animation has a begin attribute set to
'0s;5s' and a dur attribute set to 5s. This results in a first interval of (0s &lt;= t &lt; 5s).
Because the restart attribute is set to 'never', the following possible interval,
(5s &lt;= t &lt; 10s) does not apply and the animation is only active for the first 5 seconds.
</p>
<p>
The fifth row shows a simple animated red rectangle which lasts for 5 seconds. It shows
a reference of how the other animations should behave visually: all red rectangles should
have the same horizontal position as the one on the reference row, at any time during the
animation.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least six seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if for the first five seconds after the document loads,
the red squares in each row (two in the third row, and one each in the
remaining rows) are in the right column, and after the five seconds,
they all move to the left column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-67-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 text-anchor="middle" x="240" y="30" font-size="20">restart</text>
<g transform="translate(130, 80)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>no restart (defaults to always)</text>
<text y="25">restart="always"</text>
<text y="50">restart="whenNotActive"</text>
<text y="75">restart="never"</text>
<text y="100">reference</text>
</g>
<g id="timeMarkersText" transform="translate(180, 25)" text-anchor="middle" font-size="14">
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
</g>
<g transform="translate(180,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" begin="0s;1s" dur="4s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" begin="0s;1s" dur="4s" restart="always"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" begin="0s;1s" dur="5s" restart="whenNotActive"/>
</rect>
<g transform="translate(20,0)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" begin="0s;2.5s" dur="2.5s" restart="whenNotActive"/>
</rect>
</g>
</g>
<g id="setFour" transform="translate(0, 75)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" begin="0s;5s" dur="5s" restart="never"/>
</rect>
</g>
<g id="reference" transform="translate(0, 100)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="5s"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 8.3 KiB

View file

@ -0,0 +1,137 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-68-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on the repeatCount attribute.
</p>
<p>
Each row in the test shows different rectangles subject to &lt;set&gt;
animations with different configurations with regards to the repeatCount
attribute. For each row, the animation should be active
during the first 5 seconds of the animations where the red rectangle
should show in the right column. At five seconds into the animation,
all the rectangles should move to their left position.
</p>
<p>
On the first row, the &lt;set&gt; animation has its dur attribute set to
'5s' and its repeatCount unspecified. Consequently, its only interval
is (0s &lt;= t &lt; 5s).
</p>
<p>
On the second row, the &lt;set&gt; animation has its dur attribute set to
1s and its repeatCount set to 5. Consequently, its only interval is
(0s &lt;= t &lt; 5s (1s*5)).
</p>
<p>
On the third row, the &lt;set&gt; animation has its dur attribute set to
10s and its repeatCount set to 0.5. Consequently, its only interval is
(0s &lt;= t &lt; 5s (10s*0.5))
</p>
<p>
On the fourth row, the &lt;set&gt; animation has its dur attribute set to
1s and its repeatCount set to indefinite. It also has an end attribute
set to 5s. Consequently, the repeat duration is indefinite, but the active
duration is limited by the end attribute and the active interval is (0s &lt;= t &lt; 5s).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least six seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if for the first five seconds after the document loads,
the red squares in each row are in the right column, and after the five seconds,
they all move to the left column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-68-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 text-anchor="middle" x="240" y="30" font-size="20">repeatCount</text>
<g transform="translate(130, 80)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>dur=5s repeatCount unspecified</text>
<text y="25">dur=1s repeatCount=5</text>
<text y="50">dur=10s repeatCount=0.5</text>
<text y="75">dur=1s repeatCount=indefinite</text>
<text y="90">end=5s</text>
</g>
<g id="timeMarkersText" transform="translate(180, 25)" text-anchor="middle" font-size="14">
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
</g>
<g transform="translate(180,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" dur="5s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="1s" repeatCount="5"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="10s" repeatCount="0.5"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="1s" end="5s" repeatCount="indefinite"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 6.3 KiB

View file

@ -0,0 +1,155 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-69-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests performs basic tests on the repeatDur attribute.
</p>
<p>
Each row in the test shows different rectangles subject to &lt;set&gt;
animations with different configurations with regards to the repeatDur
attribute. For each row, the animation should be active
during the first 5 seconds of the animations where the red rectangle
should show in the right column. At five seconds into the animation,
all the rectangles should move to their left position.
</p>
<p>
On the first row, the &lt;set&gt; animation has its dur attribute set to
'5s' and its repeatDur unspecified. Consequently, its only interval
is (0s &lt;= t &lt; 5s).
</p>
<p>
On the second row, the &lt;set&gt; animation has its dur attribute set to
1s and its repeatDur set to 5s. Consequently, its only interval is
(0s &lt;= t &lt; 5s).
</p>
<p>
On the third row, the &lt;set&gt; animation has its dur attribute set to
0.5s and its repeatDur set to 5s. Consequently, its only interval is
(0s &lt;= t &lt; 5s).
</p>
<p>
On the fourth row, the &lt;set&gt; animation has its dur attribute set to
1s and its repeatDur set to indefinite. It also has an end attribute
set to 5s. Consequently, the repeat duration is indefinite, but the active
duration is limited by the end attribute and the active interval is (0s &lt;= t &lt; 5s).
</p>
<p>
On the fifth row, the &lt;set&gt; animation has its dur attribute set to
0.7s and its repeatDur set to 5s. Consequently, its only interval is
(0s &lt;= t &lt; 5s). The difference with the 3rd row is that there is a fractional
number of simple durations in the active duration (7.1428) where there
is a whole number of simple durations in the third row (10).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least six seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if for the first five seconds after the document loads,
the red squares in each row are in the right column, and after the five seconds,
they all move to the left column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-69-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 text-anchor="middle" x="240" y="30" font-size="20">repeatDur</text>
<g transform="translate(130, 80)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>dur=5s repeatDur unspecified</text>
<text y="25">dur=1s repeatDur=5s</text>
<text y="50">dur=0.5s repeatDur=5s</text>
<text y="75">dur=1s repeatDur=indefinite</text>
<text y="90">end=5s</text>
<text y="125">dur=0.7s repeatDur=5s</text>
</g>
<g id="timeMarkersText" transform="translate(180, 25)" text-anchor="middle" font-size="14">
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
</g>
<g transform="translate(180,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" dur="5s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="1s" repeatDur="5s"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 50)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="0.5s" repeatDur="5s"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 75)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="1s" end="5s" repeatDur="indefinite"/>
</rect>
</g>
<g id="setFive" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set attributeName="x" to="74" dur="0.7s" repeatDur="5s"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

@ -0,0 +1,152 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-70-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests the animation's SMIL fill attribute.
</p>
<p>
On the first row, the &lt;set&gt; animation has its dur
attribute set to '1s' and its begin attribute set to '0s;
firstSet.end + 1s'. The fill attribute is unspecified, so
the effect is as if it was set to 'remove', because 'remove' is
the default value for fill.
Consequently, the first interval is (0s &lt;= t &lt; 1s), the second is
(2s &lt;= t &lt; 3s), the third, (4s &lt;= t &lt; 5s) etc.. The red rectangle starts on the
right position, moves to the left position for one second, moves
to the right for 1 second, and so on.
</p>
<p>
On the second row, the &lt;set&gt; animation
with the identifier 'firstSet' has its dur attribute
set to 1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
is set to 'remove'. The behavior should be exactly the same as for the previous
row, and the rectangle moves from the right position to the left position
every second.
</p>
<p>
On the third row, the &lt;set&gt; animation has its dur attribute set to
1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
is set to 'freeze'. The first interval should be (0s &lt;= t &lt; 1s), the second (2s &lt;= t &lt; 3s),
the third, (4s &lt;= t &lt; 5s), etc. Between interval, the fill behavior should be applied,
so the red rectangle should stay on the right position and never go to the
left position.
</p>
<p>
On the fourth row, the &lt;set&gt; animation has its dur attribute set to
1s and its begin attribute set to '0s'. The fill attribute
is set to 'freeze'. The first interval should be (0s &lt;= t &lt; 1s) and there is no
following interval. Because of the fill behavior, the &lt;set&gt; should
apply the last (and only) animation value after 1s. Consequently, the
red rectangle should stay on the right position and never go to the
left position.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test and observe it for at least 5 seconds. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test passes if for the duration of the test the following conditions are met:</p>
<ul>
<li>The red squares in the top two rows alternate between the left and the right column
at a rate of one movement per second. They must also be in the same column
at any given time.</li>
<li>The red squares in the bottom two rows stay in the right column.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-70-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 text-anchor="middle" x="240" y="30" font-size="20">fill</text>
<g transform="translate(130, 60)">
<g transform="translate(120,45)" text-anchor="end" font-size="14">
<text>fill unspecified (remove)</text>
<text y="25">fill=remove</text>
<text y="100">fill=freeze (with restart)</text>
<text y="125">fill=freeze (no restart)</text>
</g>
<g id="timeMarkersText" transform="translate(180, 125)" text-anchor="middle" font-size="14">
<text y="-15">never</text>
<text>here</text>
<text y="-15" x="80">always</text>
<text x="80">here</text>
</g>
<g transform="translate(180,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="firstSet" attributeName="x" to="74" begin="0s; firstSet.end + 1s" dur="1s"/>
</rect>
</g>
<g id="setTwo" transform="translate(0, 25)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="secondSet" attributeName="x" to="74" begin="0s; secondSet.end + 1s" dur="1s" fill="remove"/>
</rect>
</g>
<g id="setThree" transform="translate(0, 100)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="thirdSet" attributeName="x" to="74" begin="0s; thirdSet.end + 1s" dur="1s" fill="freeze"/>
</rect>
</g>
<g id="setFour" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<set id="fourthSet" attributeName="x" to="74" begin="0s" dur="1s" fill="freeze"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 7.2 KiB

View file

@ -0,0 +1,357 @@
<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="NR" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-77-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 inheritance of animated values on text.
</p>
<p>
This test demonstrates how &lt;set&gt; elements change
text properties on a &lt;text&gt; element. For
each of the text properties being tested, 3
&lt;set&gt; elements are set. The first &lt;set&gt;
element acts directly on the &lt;text&gt; element. The
second &lt;set&gt; element acts on a &lt;g&gt; containing
children. The third &lt;set&gt; element acts on an &lt;a&gt;
containing children. In each case the test validates that
the animated value set on the &lt;g&gt; and &lt;a&gt;
elements is inherited by the &lt;text&gt; element.
All the &lt;set&gt; elements have a begin attribute
set to 0s with an offset of 1s after end.
So, the animation will apply 1s after the document is loaded
and will repeat every 1s after the animation ends.
</p>
<p>
The first &lt;set&gt; validates the transform property. When
applied to the &lt;text&gt; element, the letter A will be
translated to the right every 1s, in the &lt;text&gt; column.
When applied to the &lt;g&gt; element, the letter A inherits the
transform value and is translated to the right every 1s, as
seen in the &lt;g&gt; column. When applied to the &lt;a&gt;
element, the letter A inherits the transform value and is
translated to the right every 1s, as seen in &lt;a&gt; column.
</p>
<p>
The second &lt;set&gt; validates the text-anchor attribute.
When applied to the &lt;text&gt; element, the anchor position
of letter A is moved from start to end. When applied to the
&lt;g&gt; and &lt;a&gt; element, the property is inherited
and hence the anchor position of letter A is moved from start
to end in the second row.
</p>
<p>
The third &lt;set&gt; validates the font-size attribute.
The font size of letter A is changed from 20 to 30.
When applied to &lt;g&gt; and &lt;a&gt; elements, the letter
A inherits the font-size and hence in row 3, letter A has a
font-size of 30 in all 3 right columns of row 3.
</p>
<p>
The fourth &lt;set&gt; validates the font-family attribute.
The font-family is changed from default to serif.
When applied to &lt;g&gt; and &lt;a&gt; elements, the letter
A inherits the font-family attribute and hence in row 4,
letter A has serif font-family in all 3 columns.
</p>
<p>
The fifth &lt;set&gt; validates the font-style attribute.
The font-style is changed from normal to italic.
When applied to &lt;g&gt; and &lt;a&gt; elements, the letter
A inherits the font-style attribute and hence in row 5,
letter A is animated to italic in all 3 columns.
</p>
<p>
The sixth &lt;set&gt; validates the font-weight attribute.
The font-weight is changed from normal to bold.
When applied to &lt;g&gt; and &lt;a&gt; elements, the letter
A inherits the font-weight attribute and hence in row 6,
letter A is changed to bold on the right.
</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 document is animated such that it alternates between two states, an alternation occurring every second.
For the test to pass each row must show a colored letter A that alternates between the two exact shapes and positions shown
by the gray silhouettes.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-77-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>
<font-face font-family="FreeSerif" unicode-range="U+0-7F" font-weight="400">
<font-face-src>
<font-face-uri xlink:href="../resources/FreeSerif.svg#FreeSerif"/>
</font-face-src>
</font-face>
<font-face font-family="FreeSerif" unicode-range="U+0-7F" font-weight="700">
<font-face-src>
<font-face-uri xlink:href="../resources/FreeSerifBold.svg#FreeSerifBold"/>
</font-face-src>
</font-face>
<font-face font-family="FreeSerif" unicode-range="U+0-7F" font-weight="400" font-style="italic">
<font-face-src>
<font-face-uri xlink:href="../resources/FreeSerifItalic.svg#FreeSerifItalic"/>
</font-face-src>
</font-face>
<font-face font-family="FreeSerif" unicode-range="U+0-7F" font-weight="700" font-style="italic">
<font-face-src>
<font-face-uri xlink:href="../resources/FreeSerifBoldItalic.svg#FreeSerifBoldItalic"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="FreeSerif, serif" font-size="18">
<text text-anchor="middle" x="240" y="30" font-size="20">text</text>
<g transform="translate(80, 80)">
<g transform="translate(20,10)" text-anchor="end" font-size="14">
<text x="5" y="15">transform</text>
<text x="5" y="50">text-anchor</text>
<text x="5" y="85">font-size</text>
<text x="5" y="120">font-family</text>
<text x="5" y="155">font-style</text>
<text x="5" y="190">font-weight</text>
</g>
<g id="type" transform="translate(90, -10)" text-anchor="middle" font-size="14">
<text x="20" y="3">&lt;text&gt;</text>
<text x="135" y="3">&lt;g&gt;</text>
<text x="250" y="3">&lt;a&gt;</text>
</g>
<g transform="translate(80,5)" text-anchor="start" font-size="20" fill="rgb(204,0,102)">
<text id="one" x="10" y="20" fill="#aaa">A </text>
<g id="setOne">
<defs>
<g id="setOneRef">
<text x="10" y="20" fill="#aaa">A </text>
<text x="10" y="20" fill="#aaa" transform="translate(30,0)">A </text>
</g>
</defs>
<use xlink:href="#setOneRef"/>
<use xlink:href="#setOneRef" x="110"/>
<use xlink:href="#setOneRef" x="220"/>
<text x="10" y="20">
A
<animateTransform attributeName="transform" id="firstSet" type="translate" from="30,0" to="30,0" begin="0s; firstSet.end + 1s" dur="1s"/>
</text>
<g transform="translate(110, 0)">
<animateTransform attributeName="transform" id="secondSet" type="translate" from="140,0" to="140,0" begin="0s; secondSet.end + 1s" dur="1s"/>
<text x="10" y="20">A</text>
</g>
<a xlink:href="" transform="translate(220, 0)">
<animateTransform attributeName="transform" id="thirdSet" type="translate" from="250,0" to="250,0" begin="0s; thirdSet.end + 1s" dur="1s"/>
<text x="10" y="20">A</text>
</a>
</g>
<g id="setTwo" transform="translate(0,35)">
<defs>
<g id="setTwoRef">
<text x="10" y="20" fill="#aaa">A </text>
<text x="10" y="20" fill="#aaa" transform="translate(40,0)" text-anchor="end">A</text>
</g>
</defs>
<use xlink:href="#setTwoRef"/>
<use xlink:href="#setTwoRef" x="110"/>
<use xlink:href="#setTwoRef" x="220"/>
<text x="10" y="20">
A
<set id="secondSet1" attributeName="text-anchor" to="end" begin="0s; secondSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="secondSet1_1" type="translate" from="40,0" to="40,0" begin="0s; secondSet1_1.end + 1s" dur="1s"/>
</text>
<g>
<set id="secondSet2" attributeName="text-anchor" to="end" begin="0s; secondSet2.end + 1s" dur="1s"/>
<text x="120" y="20">
A
<animateTransform attributeName="transform" id="secondSet2_1" type="translate" from="40,0" to="40,0" begin="0s; secondSet2_1.end + 1s" dur="1s"/>
</text>
</g>
<a>
<set id="secondSet3" attributeName="text-anchor" to="end" begin="0s; secondSet3.end + 1s" dur="1s"/>
<text x="230" y="20">
A
<animateTransform attributeName="transform" id="secondSet3_1" type="translate" from="40,0" to="40,0" begin="0s; secondSet3_1.end + 1s" dur="1s"/>
</text>
</a>
</g>
<g id="setThree" transform="translate(0,70)">
<defs>
<g id="setThreeRef">
<text x="10" y="20" fill="#aaa">A </text>
<text x="40" y="20" font-size="30" fill="#aaa">A</text>
</g>
</defs>
<use xlink:href="#setThreeRef"/>
<use xlink:href="#setThreeRef" x="110"/>
<use xlink:href="#setThreeRef" x="220"/>
<text x="10" y="20">
A
<set id="thirdSet1" attributeName="font-size" to="30" begin="0s; thirdSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="thirdSet1_1" type="translate" from="30,0" to="30,0" begin="0s; thirdSet1_1.end + 1s" dur="1s"/>
</text>
<g>
<set id="thirdSet2" attributeName="font-size" to="30" begin="0s; thirdSet2.end + 1s" dur="1s"/>
<text x="120" y="20">
A
<animateTransform attributeName="transform" id="thirdSet2_1" type="translate" from="30,0" to="30,0" begin="0s; thirdSet2_1.end + 1s" dur="1s"/>
</text>
</g>
<a>
<set id="thirdSet3" attributeName="font-size" to="30" begin="0s; thirdSet3.end + 1s" dur="1s"/>
<text x="230" y="20">
A
<animateTransform attributeName="transform" id="thirdSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet3_1.end + 1s" dur="1s"/>
</text>
</a>
</g>
<g id="setFour" transform="translate(0,105)">
<defs>
<g id="setFourRef">
<text x="10" y="20" font-size="30" fill="#aaa" font-family="sans-serif">A</text>
<text x="40" y="20" font-size="30" fill="#aaa" font-family="serif">A</text>
</g>
</defs>
<use xlink:href="#setFourRef"/>
<use xlink:href="#setFourRef" x="110"/>
<use xlink:href="#setFourRef" x="220"/>
<text x="10" y="20" font-size="30" font-family="sans-serif">
A
<set id="fourthSet1" attributeName="font-family" to="serif" begin="0s; fourthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="fourthSet1_1" type="translate" from="30,0" to="30,0" begin="0s; fourthSet1_1.end + 1s" dur="1s"/>
</text>
<g transform="translate(110,0)" font-family="sans-serif">
<set id="fourthSet2" attributeName="font-family" to="serif" begin="0s; fourthSet2.end + 1s" dur="1s"/>
<text x="10" y="20" font-size="30">
A
<animateTransform attributeName="transform" id="fourthSet2_1" type="translate" from="30,0" to="30,0" begin="0s; fourthSet2_1.end + 1s" dur="1s"/>
</text>
</g>
<a xlink:href="" transform="translate(220,0)" font-family="sans-serif">
<set id="fourthSet3" attributeName="font-family" to="serif" begin="0s; fourthSet3.end + 1s" dur="1s"/>
<text x="10" y="20" font-size="30">
A
<animateTransform attributeName="transform" id="fourthSet3_1" type="translate" from="30,0" to="30,0" begin="0s; fourthSet2_1.end + 1s" dur="1s"/>
</text>
</a>
</g>
<g id="setFive" transform="translate(0,140)">
<defs>
<g id="setFiveRef">
<text x="10" y="20" fill="#aaa">A</text>
<text x="40" y="20" fill="#aaa" font-style="italic">A</text>
</g>
</defs>
<use xlink:href="#setFiveRef"/>
<use xlink:href="#setFiveRef" x="110"/>
<use xlink:href="#setFiveRef" x="220"/>
<text x="10" y="20">
A
<set id="fifthSet1" attributeName="font-style" to="italic" begin="0s; fifthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="fifthSet1_1" type="translate" from="30,0" to="30,0" begin="0s; fifthSet1_1.end + 1s" dur="1s"/>
</text>
<g transform="translate(110,0)">
<set id="fifthSet2" attributeName="font-style" to="italic" begin="0s; fifthSet2.end + 1s" dur="1s"/>
<text x="10" y="20">
A
<animateTransform attributeName="transform" id="fifthSet2_1" type="translate" from="30,0" to="30,0" begin="0s; fifthSet2_1.end + 1s" dur="1s"/>
</text>
</g>
<a xlink:href="" transform="translate(220,0)">
<set id="fifthSet3" attributeName="font-style" to="italic" begin="0s; fifthSet3.end + 1s" dur="1s"/>
<text x="10" y="20">
A
<animateTransform attributeName="transform" id="fifthSet3_1" type="translate" from="30,0" to="30,0" begin="0s; fifthSet3_1.end + 1s" dur="1s"/>
</text>
</a>
</g>
<g id="setSix" transform="translate(0,175)">
<defs>
<g id="setSixRef">
<text x="10" y="20" fill="#aaa">A</text>
<text x="40" y="20" fill="#aaa" font-weight="bold">A</text>
</g>
</defs>
<use xlink:href="#setSixRef"/>
<use xlink:href="#setSixRef" x="110"/>
<use xlink:href="#setSixRef" x="220"/>
<text x="10" y="20">
A
<set id="sixthSet1" attributeName="font-weight" to="bold" begin="0s; sixthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="sixthSet1_1" type="translate" from="30,0" to="30,0" begin="0s; sixthSet1_1.end + 1s" dur="1s"/>
</text>
<g transform="translate(110,0)">
<set id="sixthSet2" attributeName="font-weight" to="bold" begin="0s; sixthSet2.end + 1s" dur="1s"/>
<text x="10" y="20">
A
<animateTransform attributeName="transform" id="sixthSet2_1" type="translate" from="30,0" to="30,0" begin="0s; sixthSet2_1.end + 1s" dur="1s"/>
</text>
</g>
<a xlink:href="" transform="translate(220,0)">
<set id="sixthSet3" attributeName="font-weight" to="bold" begin="0s; sixthSet3.end + 1s" dur="1s"/>
<text x="10" y="20">
A
<animateTransform attributeName="transform" id="sixthSet3_1" type="translate" from="30,0" to="30,0" begin="0s; sixthSet3_1.end + 1s" dur="1s"/>
</text>
</a>
</g>
</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.8 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 17 KiB

View file

@ -0,0 +1,563 @@
<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="NR" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-78-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test demonstrates how &lt;set&gt; elements change
graphics properties on elements from the 'Basic Shapes' chapter. For
each of the graphics properties being tested, 3
&lt;set&gt; elements are set. The first &lt;set&gt;
element acts directly on the 'Basic Shape' element. The
&lt;set&gt; element acts on a &lt;g&gt; containing
children. The third &lt;set&gt; element acts on an &lt;a&gt;
containing children. In each case the test validates that
the animated value set on the &lt;g&gt; and &lt;a&gt;
elements is inherited by the 'Basic Shape' element.
All the &lt;set&gt; elements have a begin attribute
set to 0s with an offset of 1s after end.
So, the animation will apply 1s after the document is loaded
and will repeat every 1s after the animation ends.
</p>
<p>
The first &lt;set&gt; validates the fill property, with
fill set to orange. When applied directly to the 'Basic Shape'
element, the &lt;rect&gt; fill value will change to orange
when it is translated to the right every 1s. When applied
to the &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt;
inherits the fill value and is orange.
</p>
<p>
The second &lt;set&gt; validates the fill-style property,
with fill-style set to evenodd. When applied to the
'Basic Shape' element, the &lt;polyline&gt; fill-style is
changed from nonzero to evenodd. When applied to the
&lt;g&gt; and &lt;a&gt; elements, the &lt;polyline&gt; inherits
the evenodd fill-style.
</p>
<p>
the third &lt;set&gt; validates the stroke property.
In this case fill is set to none. When stroke is applied
to the 'Basic Shape' element, the &lt;rect&gt; on the right
appears with the stroke color. When applied to the &lt;g&gt; and
&lt;a&gt; elements, the &lt;rect&gt; inherits the stroke property.
</p>
<p>
the fourth &lt;set&gt; validates the stroke-width property,
with stroke-width set to 4. When stroke-width is applied
to the 'Basic Shape' element, the &lt;line&gt; on the right
has a width of 4. When applied to the &lt;g&gt; and
&lt;a&gt; elements, the &lt;line&gt; inherits the stroke-width.
</p>
<p>
the fifth &lt;set&gt; validates the stroke-linecap property,
with stroke-linecap set to round. When stroke-linecap is applied
to the 'Basic Shape' element, the &lt;line&gt; stroke-linecap
value switches from butt to round. When applied to the &lt;g&gt;
and &lt;a&gt; elements, the &lt;line&gt; inherits the
square stroke-linecap.
</p>
<p>
the sixth &lt;set&gt; validates the stroke-linejoin property,
with stroke-linejoin set to bevel. When stroke-linejoin is applied
to the 'Basic Shape' element, the &lt;line&gt; stroke-linejoin
value switches from miter to bevel. When applied to the &lt;g&gt;
and &lt;a&gt; elements, the &lt;line&gt; inherits the
bevel stroke-linejoin.
</p>
<p>
the seventh &lt;set&gt; validates the stroke-miterlimit property,
with stroke-miterlimit set to 10. When stroke-miterlimit
is applied to the 'Basic Shape' element, the miter-length to
stroke-width ratio exceeds the miter-limit and the
&lt;polyline&gt; switches from bevel to miter.When applied
to the &lt;g&gt; and &lt;a&gt; elements,the &lt;line&gt;
inherits the stroke-miterlimit.
</p>
<p>
the eighth &lt;set&gt; validates the stroke-dashoffset property,
with stroke-dashoffset set to 5.5. When stroke-dashoffset is applied
to the 'Basic Shape' element, the &lt;line&gt; has a different
dashing pattern. When applied to the &lt;g&gt; and &lt;a&gt;
elements, the &lt;line&gt; inherits the property.
</p>
<p>
the ninth &lt;set&gt; validates the display property,
with display set to none. When display is applied
to the 'Basic Shape' element, the &lt;rect&gt; does not
appear on the right. When applied to the &lt;g&gt; and &lt;a&gt;
elements, the &lt;line&gt; inherits the display property and
hence is not seen.
</p>
<p>
the tenth &lt;set&gt; validates the visibility property,
with visibility set to hidden. When visibility is applied
to the 'Basic Shape' element, the &lt;rect&gt; is hidden
on the right. When applied to the &lt;g&gt; and &lt;a&gt;
elements, the &lt;line&gt; inherits the visibility property
and hence is not seen.
</p>
<p>
the eleventh &lt;set&gt; validates the color property,
with color set to blue. When color is applied to the
'Basic Shape' element, the &lt;rect&gt; on the right
switches from default color of black to blue. When
applied to the &lt;g&gt; and &lt;a&gt;
elements, the &lt;line&gt; inherits the color property.
</p>
<p>
The eleventh &lt;set&gt; validates the color property, with
color set to orange. When applied directly to the 'Basic Shape'
element, the &lt;rect&gt; fill value will change to orange
when it is translated to the right every 1s. When applied
to the &lt;g&gt; and &lt;a&gt; elements, the &lt;rect&gt;
inherits the color value, and via its fill="currentColor"
becomes orange.
</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 document is animated such that it alternates between two states,
an alternation occurring every second. In each row there are three
sub-tests, which must behave identically except for any differences
noted below. Each sub-test consists of a colored shape that in one
state appears in the left column and in the second state appears in
the right column. The test is passed if the following conditions are
met:</p>
<ul>
<li>For the fill-rule, stroke-width, stroke-linecap, stroke-linejoin,
stroke-miterlimit and stroke-dashoffset rows, the red shape must
take the exact shape and position of the two gray silhouettes
when animating between the two states.</li>
<li>For the fill row, the colored square must take the exact
shape and position of the two gray silhouettes when animating
between the two states. When in the left column, it must be red,
and when in the right column, it must be orange.</li>
<li>For the color row, the colored square must take the exact
shape and position of the two gray silhouettes when animating
between the two states. When in the left column, it must be
red, and when in the right column, it must be orange.</li>
<li>For the stroke row, the shape must be invisible when in the
left column, and must be a red-stroked, empty-filled square
matching the size and position of the gray silhouette when
in the right column.</li>
<li>For the display and visibility rows, the shape must be a red
square matching the size and position of the gray silhouette
when in the left column, and must be invisible when in the right
column.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-78-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 text-anchor="middle" x="240" y="25" font-size="20">graphics</text>
<g transform="translate(80, 75)">
<g transform="translate(30,10)" text-anchor="end" font-size="12">
<text>fill</text>
<text y="20">fill-rule</text>
<text y="40">stroke</text>
<text y="60">stroke-width</text>
<text y="80">stroke-linecap</text>
<text y="100">stroke-linejoin</text>
<text y="120">stroke-miterlimit</text>
<text y="140">stroke-dashoffset</text>
<text y="160">display</text>
<text y="180">visibility</text>
<text y="200">color</text>
</g>
<g id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14">
<text x="20" y="3">'Basic Shape'</text>
<text x="130" y="3">&lt;g&gt;</text>
<text x="235" y="3">&lt;a&gt;</text>
</g>
<g transform="translate(80,0)" fill="rgb(204,0,102)">
<rect x="10" width="8" height="8" fill="#ccc"/>
<g id="setOne">
<defs>
<g id="setOneRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setOneRef"/>
<use xlink:href="#setOneRef" x="110"/>
<use xlink:href="#setOneRef" x="220"/>
<rect x="10" width="8" height="8">
<set id="firstSet1" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="firstSet1_1" type="translate" from="30,0" to="30,0" begin="0s; firstSet1_1.end + 1s" dur="1s"/>
</rect>
<g transform="translate(110, 0)">
<set id="firstSet2" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet2.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="firstSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet2_1.end + 1s" dur="1s"/>
</rect>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="firstSet3" attributeName="fill" to="rgb(255, 165, 0)" begin="0s; firstSet3.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="firstSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; firstSet3_1.end + 1s" dur="1s"/>
</rect>
</a>
</g>
<g id="setTwo" transform="translate(5,15)" stroke="rgb(204,0,102)">
<defs>
<g id="setTwoRef">
<polyline fill="#ccc" stroke="#ccc" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10">
</polyline>
<polyline fill="#ccc" stroke="#ccc" fill-rule="evenodd" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10" transform="translate(30,0)">
</polyline>
</g>
</defs>
<use xlink:href="#setTwoRef"/>
<use xlink:href="#setTwoRef" x="110"/>
<use xlink:href="#setTwoRef" x="220"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
<set id="secondSet1" attributeName="fill-rule" to="evenodd" begin="0s; secondSet1_1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="secondSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet1_1.end + 1s" dur="1s"/>
</polyline>
<g transform="translate(110, 0)">
<set id="secondSet2" attributeName="fill-rule" to="evenodd" begin="0s; secondSet2_1.end + 1s" dur="1s"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
<animateTransform attributeName="transform" id="secondSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet2_1.end + 1s" dur="1s"/>
</polyline>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="secondSet3" attributeName="fill-rule" to="evenodd" begin="0s; secondSet3_1.end + 1s" dur="1s"/>
<polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
<animateTransform attributeName="transform" id="secondSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; secondSet3_1.end + 1s" dur="1s"/>
</polyline>
</a>
</g>
<g id="setThree" transform="translate(0,45)" fill="none">
<defs>
<g id="setThreeRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setThreeRef"/>
<use xlink:href="#setThreeRef" x="110"/>
<use xlink:href="#setThreeRef" x="220"/>
<rect x="10" width="8" height="8">
<set id="thirdSet1" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="thirdSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet1_1.end + 1s" dur="1s"/>
</rect>
<g transform="translate(110, 0)">
<set id="thirdSet2" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet2.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="thirdSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet2_1.end + 1s" dur="1s"/>
</rect>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="thirdSet3" attributeName="stroke" to="rgb(204,0,102)" begin="0s; thirdSet3.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="thirdSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; thirdSet3_1.end + 1s" dur="1s"/>
</rect>
</a>
</g>
<g id="setFour" transform="translate(0,60)" stroke="rgb(204,0,102)">
<defs>
<g id="setFourRef">
<line x1="10" y1="8" x2="20" y2="0" stroke="#ccc">
</line>
<line x1="10" y1="8" x2="20" y2="0" stroke-width="4" stroke="#ccc" transform="translate(30,0)">
</line>
</g>
</defs>
<use xlink:href="#setFourRef"/>
<use xlink:href="#setFourRef" x="110"/>
<use xlink:href="#setFourRef" x="220"/>
<line x1="10" y1="8" x2="20" y2="0">
<set id="fourthSet1" attributeName="stroke-width" to="4" begin="0s; fourthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="fourthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet1_1.end + 1s" dur="1s"/>
</line>
<g transform="translate(110, 0)">
<set id="fourthSet2" attributeName="stroke-width" to="4" begin="0s; fourthSet2.end + 1s" dur="1s"/>
<line x1="10" y1="8" x2="20" y2="0">
<animateTransform attributeName="transform" id="fourthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet2_1.end + 1s" dur="1s"/>
</line>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="fourthSet3" attributeName="stroke-width" to="4" begin="0s; fourthSet3.end + 1s" dur="1s"/>
<line x1="10" y1="8" x2="20" y2="0">
<animateTransform attributeName="transform" id="fourthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fourthSet3_1.end + 1s" dur="1s"/>
</line>
</a>
</g>
<g id="setFive" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)">
<defs>
<g id="setFiveRef">
<line x1="10" y1="8" x2="20" y2="0" stroke="#ccc">
</line>
<line x1="10" y1="8" x2="20" y2="0" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)">
</line>
</g>
</defs>
<use xlink:href="#setFiveRef"/>
<use xlink:href="#setFiveRef" x="110"/>
<use xlink:href="#setFiveRef" x="220"/>
<line x1="10" y1="8" x2="20" y2="0">
<set id="fifthSet1" attributeName="stroke-linecap" to="round" begin="0s; fifthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="fifthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet1_1.end + 1s" dur="1s"/>
</line>
<g transform="translate(110, 0)">
<set id="fifthSet2" attributeName="stroke-linecap" to="round" begin="0s; fifthSet2.end + 1s" dur="1s"/>
<line x1="10" y1="8" x2="20" y2="0">
<animateTransform attributeName="transform" id="fifthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet2_1.end + 1s" dur="1s"/>
</line>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="fifthSet3" attributeName="stroke-linecap" to="round" begin="0s; fifthSet3.end + 1s" dur="1s"/>
<line x1="10" y1="8" x2="20" y2="0">
<animateTransform attributeName="transform" id="fifthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; fifthSet3_1.end + 1s" dur="1s"/>
</line>
</a>
</g>
<g id="setSix" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setSixRef">
<polyline stroke="#ccc" points="5,2,20,5,5,8">
</polyline>
<polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)">
</polyline>
</g>
</defs>
<use xlink:href="#setSixRef"/>
<use xlink:href="#setSixRef" x="110"/>
<use xlink:href="#setSixRef" x="220"/>
<polyline points="5,2,20,5,5,8">
<set id="sixthSet1" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="sixthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet1_1.end + 1s" dur="1s"/>
</polyline>
<g transform="translate(110, 0)">
<set id="sixthSet2" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet2.end + 1s" dur="1s"/>
<polyline points="5,2,20,5,5,8">
<animateTransform attributeName="transform" id="sixthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet2_1.end + 1s" dur="1s"/>
</polyline>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="sixthSet3" attributeName="stroke-linejoin" to="bevel" begin="0s; sixthSet3.end + 1s" dur="1s"/>
<polyline points="5,2,20,5,5,8">
<animateTransform attributeName="transform" id="sixthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; sixthSet3_1.end + 1s" dur="1s"/>
</polyline>
</a>
</g>
<g id="setSeven" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setSevenRef">
<polyline points="5,0,20,5,5,10" stroke="#ccc"/>
<polyline points="5,0,20,5,5,10" stroke="#ccc" stroke-miterlimit="10" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setSevenRef"/>
<use xlink:href="#setSevenRef" x="110"/>
<use xlink:href="#setSevenRef" x="220"/>
<polyline points="5,0,20,5,5,10">
<set id="seventhSet1" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="seventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet1_1.end + 1s" dur="1s"/>
</polyline>
<g transform="translate(110, 0)">
<set id="seventhSet2" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet2.end + 1s" dur="1s"/>
<polyline points="5,0,20,5,5,10">
<animateTransform attributeName="transform" id="seventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet2_1.end + 1s" dur="1s"/>
</polyline>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="seventhSet3" attributeName="stroke-miterlimit" to="10" begin="0s; seventhSet3.end + 1s" dur="1s"/>
<polyline points="5,0,20,5,5,10">
<animateTransform attributeName="transform" id="seventhSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; seventhSet3_1.end + 1s" dur="1s"/>
</polyline>
</a>
</g>
<g id="setEight" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)">
<defs>
<g id="setEightRef">
<line x1="0" y1="0" x2="25" y2="0" stroke="#ccc"/>
<line x1="0" y1="0" x2="25" y2="0" stroke="#ccc" stroke-dashoffset="5.5" transform="translate(40,0)"/>
</g>
</defs>
<use xlink:href="#setEightRef"/>
<use xlink:href="#setEightRef" x="110"/>
<use xlink:href="#setEightRef" x="220"/>
<line x1="0" y1="0" x2="25" y2="0">
<set id="eighthSet1" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="eighthSet1_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet1_1.end + 1s" dur="1s"/>
</line>
<g transform="translate(110, 0)">
<set id="eighthSet2" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet2.end + 1s" dur="1s"/>
<line x1="0" y1="0" x2="25" y2="0">
<animateTransform attributeName="transform" id="eighthSet2_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet2_1.end + 1s" dur="1s"/>
</line>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="eighthSet3" attributeName="stroke-dashoffset" to="5.5" begin="0s; eighthSet3.end + 1s" dur="1s"/>
<line x1="0" y1="0" x2="25" y2="0">
<animateTransform attributeName="transform" id="eighthSet3_1" type="translate" from="40, 0" to="40,0" begin="0s; eighthSet3_1.end + 1s" dur="1s"/>
</line>
</a>
</g>
<g id="setNine" transform="translate(0,160)">
<defs>
<g id="setNineRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setNineRef"/>
<use xlink:href="#setNineRef" x="110"/>
<use xlink:href="#setNineRef" x="220"/>
<rect x="10" width="8" height="8">
<set id="ninthSet1" attributeName="display" to="none" begin="0s; ninthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="ninthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet1_1.end + 1s" dur="1s"/>
</rect>
<g transform="translate(110, 0)">
<set id="ninthSet2" attributeName="display" to="none" begin="0s; ninthSet2.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="ninthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet2_1.end + 1s" dur="1s"/>
</rect>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="ninthSet3" attributeName="display" to="none" begin="0s; ninthSet3.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="ninthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; ninthSet3_1.end + 1s" dur="1s"/>
</rect>
</a>
</g>
<g id="setTen" transform="translate(0,180)">
<defs>
<g id="setTenRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setTenRef"/>
<use xlink:href="#setTenRef" x="110"/>
<use xlink:href="#setTenRef" x="220"/>
<rect x="10" width="8" height="8">
<set id="tenthSet1" attributeName="visibility" to="hidden" begin="0s; tenthSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="tenthSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet1_1.end + 1s" dur="1s"/>
</rect>
<g transform="translate(110, 0)">
<set id="tenthSet2" attributeName="visibility" to="hidden" begin="0s; tenthSet2.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="tenthSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet2_1.end + 1s" dur="1s"/>
</rect>
</g>
<a xlink:href="" transform="translate(220, 0)">
<set id="tenthSet3" attributeName="visibility" to="hidden" begin="0s; tenthSet3.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="tenthSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; tenthSet3_1.end + 1s" dur="1s"/>
</rect>
</a>
</g>
<g id="setEleven" color="rgb(204,0,102)" transform="translate(0,200)">
<defs>
<g id="setElevenRef">
<rect x="10" width="8" height="8" fill="#ccc"/>
<rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
</g>
</defs>
<use xlink:href="#setElevenRef"/>
<use xlink:href="#setElevenRef" x="110"/>
<use xlink:href="#setTenRef" x="220"/>
<rect x="10" width="8" height="8" fill="currentColor">
<set id="eleventhSet1" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet1.end + 1s" dur="1s"/>
<animateTransform attributeName="transform" id="eleventhSet1_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet1_1.end + 1s" dur="1s"/>
</rect>
<g transform="translate(110, 0)" fill="currentColor">
<set id="eleventhSet2" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet2.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="eleventhSet2_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet2_1.end + 1s" dur="1s"/>
</rect>
</g>
<a xlink:href="" transform="translate(220, 0)" fill="currentColor">
<!-- This first 'set' is because 'color' on the 'a' might well be a different color from that
inherited from its parent, due to UA style sheet ":visited { color: something }" rules. -->
<set attributeName="color" to="rgb(204,0,102)"/>
<set id="eleventhSet3" attributeName="color" to="rgb(255, 165, 0)" begin="0s; eleventhSet3.end + 1s" dur="1s"/>
<rect x="10" width="8" height="8">
<animateTransform attributeName="transform" id="eleventhSet3_1" type="translate" from="30, 0" to="30,0" begin="0s; eleventhSet3_1.end + 1s" dur="1s"/>
</rect>
</a>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -0,0 +1,312 @@
<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="VH" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-80-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test demonstrates validates the operation of the
animateTransform element and validates the operation
of the different type attribute values.
</p>
<p>
There are 5 possible values for the type attribute and
there is one animateTransform for each type and two for
the translate type.
</p>
<p>
For each transform type, the test has a corresponding animateTransform.
The test uses references to show what the expected transform should be
at different points in the animation. For example, the top left
animateTransform, for type=rotate, shows circular markers which turn
orange at the time of corresponding transform value should be set by the
animateTransform.
The marker elements show the expected transform value on reference
markers in 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>The test has eight sub-tests, each of which consists of a brown
shape being animated in some way with the animation starting two
seconds after the document is loaded. Gray shapes are used
to indicate points along the animation. The test passes if
the brown shape in each of the sub-tests is animated correctly,
according to the following descriptions:</p>
<ul>
<li>In the two "type=rotate" sub-tests, the brown line is rotated
clockwise about one of its end points for one complete revolution,
and then immediately performs the reverse animation where it is
rotated anti-clockwise for one complete revolution. During the
animation, whenever the other end point of the line coincides
with one of the gray filled circles, the circle briefly glows yellow.</li>
<li>In the "type=skewX" sub-test, the brown line continuously skewed.
It starts off coinciding with the middle gray silhouette, and then
over the course of the animation coincides with the left gray silhouette,
the middle one, the right one and finally the middle one again.
During the animation, whenever the brown line coincides with one of the gray silhouettes,
the silhouette briefly glows yellow.</li>
<li>In the "type=skewY" sub-test, the brown line continuously skewed.
It starts off coinciding with the middle gray silhouette, and then
over the course of the animation coincides with the top gray silhouette,
the middle one, the bottom one and finally the middle one again.
During the animation, whenever the brown line coincides with one of the gray silhouettes,
the silhouette briefly glows yellow.</li>
<li>In the two "type=translate" sub-tests, the brown circle is continuously
translated. It starts off coinciding with the left-most gray circle, and
over the course of the animation coincides each of the other gray circles
from left to right. During the animation, whenever the brown circle coincides with one of the
gray circles, the circle briefly glows yellow.</li>
<li>In the two "type=scale" sub-tests, the brown circle is continuously
scaled. There are four concentric gray stroked circles indicating the
sizes the brown circle will take during the animation, although they
are only all visible at the end of the animation. (Initially only the
largest one is visible.) The brown circle
starts off with a size coinciding with the largest gray circle, and
over the course of the animation coincides each of the other gray circles
from outside in. During the animation, whenever the brown circle coincides with one of the
gray circles, the circle briefly glows yellow.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-80-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 text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
<defs>
<g id="ref" stroke="rgb(192,192,192)" fill="none">
<circle stroke-width="2" r="40"/>
<line x1="-45" x2="45"/>
<line y1="-45" y2="45"/>
</g>
</defs>
<g transform="translate(0,0)" font-size="14">
<g transform="translate(60,90)">
<use xlink:href="#ref"/>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
</line>
<line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
</line>
<line x2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="rotate" values="0;360;0" begin="2s" dur="4s"/>
</line>
<text y="60" text-anchor="middle">type=rotate</text>
</g>
<g transform="translate(180,110)">
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(45)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(-45)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
</line>
<line y2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="skewX" values="0;45;-45;0" begin="2s" dur="4s"/>
</line>
<text y="40" text-anchor="middle">type=skewX</text>
</g>
<g transform="translate(300,90)">
<g transform="translate(15,0)">
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(0)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(30)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(-30)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
</line>
<line x2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="skewY" values="0;30;-30;0" begin="2s" dur="4s"/>
</line>
</g>
<text y="60" text-anchor="middle">type=skewY</text>
</g>
<g transform="translate(420,90)">
<circle stroke="rgb(192,192,192)" stroke-width="4" r="40" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="30" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="20" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="10" transform="scale(4)">
<animateTransform attributeName="transform" type="scale" values="4,4;3,3;2,2;1,1" begin="2s" dur="3s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=scale</text>
<text y="75" text-anchor="middle">(sx and sy)</text>
</g>
<g transform="translate(20,180)">
<use xlink:href="#ref" x="40" y="40"/>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
</line>
<line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270,40,40)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
</line>
<line x1="40" y1="40" x2="80" y2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
<animateTransform attributeName="transform" type="rotate" values="0 40 40;360 40 40;0 40 40" begin="2s" dur="4s"/>
</line>
<text y="100" x="40" text-anchor="middle">type=rotate</text>
<text y="115" x="40" text-anchor="middle">(with cx/cy)</text>
</g>
<g transform="translate(180,220)">
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="6" transform="translate(-40,0)">
<animateTransform attributeName="transform" type="translate" values="-40;-20;0;20;40" begin="2s" dur="4s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=translate</text>
<text y="75" text-anchor="middle">(tx only)</text>
</g>
<g transform="translate(300,220)">
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" cy="30" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" cy="15" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" cy="-15" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" cy="-30" r="10" fill="none">
<set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="6" transform="translate(-40,30)">
<animateTransform attributeName="transform" type="translate" values="-40,30;-20,15;0,0;20,-15;40,-30" begin="2s" dur="4s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=translate</text>
<text y="75" text-anchor="middle">(tx and ty)</text>
</g>
<g transform="translate(420,220)">
<circle stroke="rgb(192,192,192)" stroke-width="1" r="10" fill="none" transform="scale(4,4)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="1.3333" r="10" fill="none" transform="scale(3,3)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="2" r="10" fill="none" transform="scale(2,2)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
</circle>
<circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none" transform="scale(1,1)">
<set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
</circle>
<circle fill="rgb(200,80,80)" r="10" transform="scale(4,4)">
<animateTransform attributeName="transform" type="scale" values="4;3;2;1" begin="2s" dur="3s" fill="freeze"/>
</circle>
<text y="60" text-anchor="middle">type=scale</text>
<text y="75" text-anchor="middle">(sx only)</text>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -0,0 +1,162 @@
<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="VH" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-81-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test tests the operation of the animateTransform's
additive behavior.
</p>
<p>
The first two rectangles, on the top row, show the effect of the
additive attribute on animateTransform. The left-most
animateTransforms have their additive attribute set to replace,
so the effect of the two transform animation is as if only the
highest priority one applied because it replaces the underlying
value. The second animateTransforms (from left to right) have
their additive attribute set to sum, which means the transforms
they produce are concatenated.
</p>
<p>
The last two rectangles, on the top row, show the effect of the
accumulate attribute on animateTransform. For the left one
(third on the row, from left to right), the accumulate attribute
is set to none. There are two repeats for the
animateTransform. Therefore, the transform goes twice from a
scale(1,1) to a scale(2,2). For the right-most animateTransform,
the accumulate attribute is set to sum. There are two repeats
and the animation goes from scale(0,0) to scale(2,2) for the
first iteration and then from scale(2,2) to scale(4,4) (because
the result of the second iteration is added to the
scale(2,2) result of the previous, first iteration).
</p>
<p>
The rectangles on the bottom row show the combination of
additive and cumulative behavior. The left rectangle's
animateTransform accumulate behavior is set to none but its
additive behavior is set to sum. Therefore, the transform's
underlying value (skewX(30)) is always pre-concatenated to the
animateTransform's result, which goes from "skewX(30)
scale(1,1)" to "skewX(30) scale(2,2)" in each of its two
iterations. The right rectangle's animateTransform accumulate
behavior is set to sum and the additive behavior is also set to
sum. Therefore, the transform's underlying value is always
pre-concatenated, and repetitions of the scale animation
get added together. Consequently, the transform goes from "skewX(30)
scale(0,0)" to "skewX(30) scale(2,2)" for the first iteration
and then from "skewX(30) scale(2,2)" to "skewX(30)
scale(4,4)" for the second iteration.
</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 scale of the upper leftmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper leftmost yellow rectangle</li>
<li>the scale and rotation of the second upper grey rectangle from the left is smoothly animated over the course of 5 seconds to fill the second upper yellow rectangle from the left</li>
<li>the scale of the upper third grey rectangle from the left is smoothly animated over the course of 2.5 seconds to completely fill the upper third yellow rectangle from the left, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the upper rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper rightmost yellow rectangle</li>
<li>the scale of the lower leftmost grey rectangle is smoothly animated over the course of 2.5 seconds to completely fill the lower leftmost yellow rectangle, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the lower rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the lower rightmost yellow rectangle</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-81-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 text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
<defs>
<g id="ref" stroke="rgb(192,192,192)" fill="none">
<circle stroke-width="2" r="40"/>
<line x1="-45" x2="45"/>
<line y1="-45" y2="45"/>
</g>
</defs>
<g transform="translate(0,0)" font-size="14">
<g transform="translate(60,90)">
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
<text y="60" text-anchor="middle">additive=replace</text>
</g>
<g transform="translate(180,90)">
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="sum" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="sum" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30) rotate(90) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
<text y="60" text-anchor="middle">additive=sum</text>
</g>
<g transform="translate(300,90)">
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="replace"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
<text y="60" text-anchor="middle">accumulate=none</text>
<text y="75" text-anchor="middle">additive=replace</text>
</g>
<g transform="translate(420,90)">
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="0,0" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="replace"/>
</rect>
<rect x="-7.5" y="-7.5" width="15" height="15" transform="scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none"/>
<text y="60" text-anchor="middle">accumulate=sum</text>
<text y="75" text-anchor="middle">additive=replace</text>
</g>
<g transform="translate(300,220)">
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="sum"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="skewX(30) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none"/>
<text y="60" text-anchor="middle">accumulate=none</text>
<text y="75" text-anchor="middle">additive=sum</text>
</g>
<g transform="translate(420,220)">
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="0,0" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="sum"/>
</rect>
<rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30) scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none"/>
<text y="60" text-anchor="middle">accumulate=sum</text>
<text y="75" text-anchor="middle">additive=sum</text>
</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.8 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,301 @@
<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="VH" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-82-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test demonstrates validates the operation of
animateTransform with regards to the rotation center
and with regards to paced animation.
</p>
<p>
The following descriptions describe the various animations,
going top bottom, left to right. For each animation, orange
rectangle markers show the expected position for the animated rectangle
halfway through the animation. The markers are drawn with a thick
stroke for 0.2s, starting at the time when they reflect the
expected position.
</p>
<p>
The first animateTransform has type='rotate' and goes from
45 degrees to 90 degrees over a period of 3s. The rotation
center for the from and to values is 0, 0. At 0 seconds, the
expected transform should be rotate(45). At 1.5 seconds, the
expected transform is rotate(0.5 * (90 + 45)) = rotate(67.5).
At 3s, the expected transform is rotate(90).
</p>
<p>
The second animateTransform has type='rotate' but has a
rotation center that varies between the from and to values.
The rotation goes from rotate(45,0,0) to rotate(90,-15,-15).
At 0s, the expected transform is rotate(45,0,0).
At 1.5s, the expected transform is rotate(67.5, -7.5, -7.5).
At 3s, the expected transform is rotate(90, -15, -15).
</p>
<p>
The third animateTransform has type='translate' and calcMode='paced'.
The animation goes from translate(-40,40) to translate(-20,20) to
translate(40,-40).
At 0s, the expected transform is translate(-40,40).
At 1.5s, the expected transform is translate(0,0).
At 3s, the expected transform is translate(40,-40).
</p>
<p>
The fourth animateTransform has type='translate' and calcMode='linear'.
The animation goes from translate(-40,40) to translate(-20,-20) to
translate(40,-40).
At 0s, the expected transform is translate(-40,40).
At 1.5s, the expected transform is translate(-20,-20).
At 3s, the expected transform is translate(40,-40).
</p>
<p>
The fifth animateTransform has type='scale' and calcMode='paced'.
The animation goes from scale(1,2) to scale(3,2) to
scale(1,1).
At 0s, the expected transform is scale(1,2).
At 1.5s, the expected transform is scale(3,2).
At 3s, the expected transform is scale(1,1).
</p>
<p>
The sixth animateTransform has type='scale' and calcMode='linear'.
The animation goes from scale(1,2) to scale(3,2) to
scale(1,1).
At 0s, the expected transform is scale(1,2).
At 1.5s, the expected transform is scale(3,2).
At 3s, the expected transform is scale(1,1).
</p>
<p>
The seventh animateTransform has type="rotate" and calcMode='paced'.
The animation goes from rotate(0,0,0) to rotate(45,-15,-20) to
rotate(180,30,50). The total length along the rotation angle component
is (45 - 0) + (180 - 45) = 180. The total length along the rotation
center along the x axis is (0 - (-15)) + (30 - (-15)) = 45 + 15 = 60.
The total length along the rotation center along the y axis is
(0 - (-20)) + (50 - (-20)) = 20 + 70 = 90.
At 0s, the expected transform is rotate(45,-15,-20).
At 1.5s, the expected transform is rotate(90,0,5) to achieve constant
velocity along the rotation angle component, the x-axis rotation center
component and the y-axis rotation center component. At 1.5s, half the
distance has been run on each component. For the rotation angle, this
means that 45 has been reached and that 45 more degrees in the (45 &lt;= r &lt; 180)
interval have been consumed. For the x-axis rotation center, this means
that 30 units have been run: the (0 &gt;= x &gt; -15) interval has been fully consumed
(15 units long) and 15 units on the (-15 &lt;= x &lt; 30) interval have been consumed,
which explains the computed 0 value. For the y-axis rotation center, this
means that 45 units have been run: the (0 &gt;= y &gt; -20) interval has been fully
consumed and 25 units have been consumed in the (-20 &lt;= y &lt; 50) interval, which
explains the computed 5 value.
At 3s, the expected transform is rotate(180,30,50).
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
Run the test. No interaction required.
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the lightgray rectangles are exactly in the positions indicated by each of the orange rectangles when they are shown with a thick stroke. If any part of the lightgray
rectangles are outside the thick stroked orange rectangles then the test has failed.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-82-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 text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
<defs>
<g id="ref" stroke="rgb(192,192,192)" fill="none">
<circle stroke-width="2" r="40"/>
<line x1="-45" x2="45"/>
<line y1="-45" y2="45"/>
</g>
</defs>
<g transform="translate(0,0)" font-size="14">
<g transform="translate(60,90)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45" to="90" dur="3s" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(45)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(67.5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(90)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="60" text-anchor="middle">same rotation</text>
<text y="75" text-anchor="middle">center</text>
</g>
<g transform="translate(180,90)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45,0,0" to="90,-15,-15" dur="3s" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(45,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(67.5,-7.5,-7.5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(90,-15,-15)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="60" text-anchor="middle">different rotation</text>
<text y="75" text-anchor="middle">centers</text>
</g>
<g transform="translate(300,90)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="-40,40;-20,20;40,-40" dur="3s" calcMode="paced" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(-40,40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(40,-40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="75" text-anchor="middle">paced translation</text>
</g>
<g transform="translate(415,90)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="-40,40;-20,-20;40,-40" dur="3s" calcMode="linear" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(-40,40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(-20,-20)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="translate(40,-40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="75" text-anchor="middle">linear translation</text>
</g>
<g transform="translate(60,220)">
<rect x="-15" y="-15" width="30" height="30" stroke="none" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,2;3,2;1,1" dur="3s" calcMode="paced" fill="freeze"/>
</rect>
<rect x="-15" y="-30" width="30" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-45" y="-30" width="90" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="60" text-anchor="middle">paced scale</text>
</g>
<g transform="translate(180,220)">
<rect x="-15" y="-15" width="30" height="30" stroke="none" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,2;3,2;1,1" dur="3s" calcMode="linear" fill="freeze"/>
</rect>
<rect x="-15" y="-30" width="30" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-45" y="-30" width="90" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="scale(1,1)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="60" text-anchor="middle">linear scale</text>
</g>
<g transform="translate(275,220)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,0,0;45,-15,-20;180,30,50" dur="3s" calcMode="paced" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(0,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(90,0,5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(180,30,50)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="75" text-anchor="middle">paced rotation</text>
</g>
<g transform="translate(395,220)">
<rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,0,0;45,-15,-20;180,30,50" dur="3s" calcMode="linear" additive="replace" fill="freeze"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(0,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(45,-15,-20)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
</rect>
<rect x="-15" y="-15" width="30" height="30" transform="rotate(180,30,50)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
</rect>
<text y="75" text-anchor="middle">linear rotation</text>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -0,0 +1,229 @@
<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="VH" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-83-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This test validates the operation of the animate element
on the &lt;path&gt; element's d attribute.
</p>
<p>
The following descriptions references to the tests by number. The first test
is the one showing on the top left. The last, sixth test is the one showing
at the bottom right. Test numbers are alocated from left to right and from
top to bottom.
For each test, there are reference outline markers which show the expected
animated shape at different times in the animation. At the time of the expected
shape, the outline of the expected shape is drawn with a thick stroke for 0.2s
so the test user can visually check that the shapes are matching at the
expected times.
</p>
<p>
The first test validates a simple from-to animation on a path's d attribute
made of M, C and Z commands where both the from and to attributes are specified.
The attributes are compatible with the path element's d attribute.
</p>
<p>
The second test validates a simple to-animation on a path's d attribute
made of M, C and Z commands where the to attribute is specified.
The attribute is compatible with the path element's d attribute.
</p>
<p>
The third test validates a simple values-animation on a path's d attribute
made of M, C and Z commands where the values attribute is specified and
specifies three seperate values.
The attribute is compatible with the path element's d attribute.
</p>
<p>
The fourth, fifth and sixth tests validate that interpolation between compatible
path values (i.e., path values which normalize to the compatible values) is
supported.
</p>
<p>
The fourth tests interpolation between a path value containing H, V and L commands
(in the from value) and a path value containing compatible h, v and l commands
(in the to value).
</p>
<p>
The fifth tests interpolation between a path value containing C and S commands
(in the from value) and a path value containing compatible c and s commands
(in the to value).
</p>
<p>
The sixth tests interpolation between a path value containing Q, T and A commands
(in the from value) and a path value containing compatible q, t and a commands
(in the to value).
</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 consists of six sub-tests. In each sub-test, the light gray filled
path must continously morph its shape, starting one second after the document
load and continuing for three seconds. In all sub-tests except for #3, there are
two orange reference shape outlines between which the gray path must morph.
In sub-test #3, there are three reference shapes. The test passes if each of the
gray shapes morphs appropriately according to the following descriptions:</p>
<ol>
<li>The gray shape must morph from the diamond to the flower-like shape.</li>
<li>The gray shape must morph just like sub-test #1, from the diamond to the flower-like shape.</li>
<li>The gray shape must morph from the diamond, to the flower-like shape, and then to the large, rounded diamond shape.</li>
<li>The gray shape must morph from the lower-right pointing kite shape to the upper-left pointing kite shape.</li>
<li>The gray shape must morph from the tall shape to the wide shape.</li>
<li>The gray shape must morph from the wide "D" shape to the narrow "D" shape.</li>
</ol>
<p>In addition, during the animations whenever the gray shape has the same shape as
a reference shape, the stroke of the reference shape must be shown thicker momentarily.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-83-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 text-anchor="middle" x="240" y="25" font-size="16">&lt;animate&gt; on &lt;path&gt;'s d attribute</text>
<defs>
<g id="ref" stroke="rgb(192,192,192)" fill="none">
<circle stroke-width="2" r="40"/>
<line x1="-45" x2="45"/>
<line y1="-45" y2="45"/>
</g>
</defs>
<g transform="translate(0,0)" font-size="12">
<g id="test_1" transform="translate(120,90)">
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" from="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" to="M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#1: from-to animation</text>
</g>
<g id="test_2" transform="translate(240,90)">
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" to="M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#2: to animation</text>
</g>
<g id="test_3" transform="translate(360,90)">
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" values="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z; M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z; M -45 0 C -15 0 0 -15 0 -45 C 0 -15 15 0 45 0 C 15 0 0 15 0 45 C 0 15 -15 0 -45 0 Z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -15 0 C -15 0 0 -15 0 -15 C 0 -15 15 0 15 0 C 15 0 0 15 0 15 C 0 15 -15 0 -15 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M 0 0 C -50 -15 -15 -50 0 0 C 15 -50 50 -15 0 0 C 50 15 15 50 0 0 C -15 50 -50 15 0 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="2.5s" dur="0.2s"/>
</path>
<path d="M -45 0 C -15 0 0 -15 0 -45 C 0 -15 15 0 45 0 C 15 0 0 15 0 45 C 0 15 -15 0 -45 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#3: values animation</text>
</g>
<g id="test_4" transform="translate(120,200)">
<path d="M -30 -30 L 30 0 V 30 H 0 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" from="M -30 -30 L 30 0 V 30 H 0 Z" to="M 30 30 l -60 -30 v -30 h 30 Z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -30 -30 L 30 0 V 30 H 0 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M 30 30 l -60 -30 v -30 h 30 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#4: from-to animation</text>
<text y="75" text-anchor="middle">compatible H/h, V/v,</text>
<text y="90" text-anchor="middle">L/l segments</text>
</g>
<g id="test_5" transform="translate(240,200)">
<path d="M -20 -20 C 20 -20 20 -20 20 20 S 20 40 -20 20 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" from="M -20 -20 C 20 -20 20 -20 20 20 S 20 40 -20 20 Z" to="M -20 -20 c 0 40 0 40 40 40 s 40 0 0 -40 z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -20 -20 C 20 -20 20 -20 20 20 S 20 40 -20 20 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M -20 -20 c 0 40 0 40 40 40 s 40 0 0 -40 z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#5: from-to animation</text>
<text y="75" text-anchor="middle">compatible C/c</text>
<text y="90" text-anchor="middle">s/S segments</text>
</g>
<g id="test_6" transform="translate(360,200)">
<path d="M -30 -30 Q 30 -30 30 0 T -30 30 Z" stroke="none" stroke-width="4" fill="rgb(230,230,230)">
<animate attributeName="d" from="M -30 -30 Q 30 -30 30 0 T -30 30 Z" to="M -30 -30 q 30 0 30 30 t -30 30 z" dur="3s" fill="freeze" begin="1s"/>
</path>
<path d="M -30 -30 Q 30 -30 30 0 T -30 30 Z" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="1s" dur="0.2s"/>
</path>
<path d="M -30 -30 q 30 0 30 30 t -30 30 " stroke="rgb(255,180,0)" stroke-width="1" fill="none">
<set attributeName="stroke-width" to="4" begin="4s" dur="0.2s"/>
</path>
<text y="60" text-anchor="middle">#6: from-to animation</text>
<text y="75" text-anchor="middle">compatible Q/q, T/t</text>
<text y="90" text-anchor="middle">segments</text>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,80 @@
<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="CC" author="CL" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-84-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 of color keywords that resolve to animatable RGB values.
</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 five
black squares are shown, after two seconds, all five squares turn red and
then smoothly animate the fill color to green over the next five seconds.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-84-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="scale(1.1) translate (50,20)">
<rect color="green" fill="#000000" height="100" width="100">
<animateColor attributeName="fill" from="#f00" to="currentColor" begin="2s" dur="5s" fill="freeze"/>
</rect>
<rect color="red" fill="#000000" height="100" width="100" y="150">
<animateColor attributeName="fill" from="currentColor" to="green" begin="2s" dur="5s" fill="freeze"/>
</rect>
<rect color="green" fill="#000000" x="120" height="100" width="100" y="75">
<animateColor attributeName="fill" from="#f00" to="green" begin="2s" dur="5s" fill="freeze"/>
</rect>
<g fill="#070">
<rect color="green" fill="#000000" x="240" height="100" width="100">
<animateColor attributeName="fill" from="#f00" to="inherit" begin="2s" dur="5s" fill="freeze"/>
</rect>
</g>
<g fill="#F00">
<rect color="green" fill="#000000" x="240" height="100" width="100" y="150">
<animateColor attributeName="fill" from="inherit" to="green" begin="2s" dur="5s" fill="freeze"/>
</rect>
</g>
<g text-anchor="middle" font-size="14">
<text x="50" y="130">currentColor</text>
<text x="170" y="55">green</text>
<text x="290" y="130">inherit</text>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.1 KiB

View file

@ -0,0 +1,100 @@
<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="DJ" author="CL" status="issue"
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-85-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The first subtest tests animateColor with 'to' and 'from' values including
currentColor. The second subtest checks that the value of currentColor is the
current animated value of the color property, by animating the color property
at the same time as animating fill with a 'from' or 'to' value of currentColor.
</p>
<!-- moved from accepted to issue pending verification of correct behaviour for lower rect on second subtest -->
</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 first subtest is passed if all
four rectangles at the top smoothly animate from black to green over 5 seconds.
During this time the bottom two rectangles must be blue.</p>
<p>The second subtest, which starts after the first one completes, is passed if
the bottom two rectangles smoothly animate from green (at five seconds), through
dark cyan (at 7.5 seconds), to cyan (at 10 seconds and above). Colored circles
indicate the appropriate colors at these times.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-85-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 id="subtest_1">
<rect fill="#f00" x="30" y="50" height="100" width="90">
<!-- basic test from two numeric hex values -->
<animateColor attributeName="fill" from="#000000" to="#008000" begin="0s" dur="5s" fill="freeze"/>
</rect>
<rect fill="#f00" x="140" y="50" height="100" width="90">
<!-- same, check color keywords accepted in animations -->
<animateColor attributeName="fill" from="#000000" to="green" begin="0s" dur="5s" fill="freeze"/>
</rect>
<rect color="green" fill="#f00" x="250" y="50" height="100" width="90">
<!-- same, static value of currentColor in 'to' -->
<animateColor attributeName="fill" from="#000000" to="currentColor" begin="0s" dur="5s" fill="freeze"/>
</rect>
<rect color="black" fill="#f00" x="360" y="50" height="100" width="90">
<!-- same, static value of currentColor in 'from' -->
<animateColor attributeName="fill" to="#008000" from="currentColor" begin="0s" dur="5s" fill="freeze"/>
</rect>
</g>
<g id="subtest_2">
<rect color="black" fill="blue" x="100" y="180" height="60" width="280">
<animateColor attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/>
<animateColor attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/>
</rect>
<rect color="black" fill="blue" x="100" y="245" height="60" width="280">
<animateColor attributeName="fill" from="#008000" to="currentColor" begin="5s" dur="5s" fill="freeze"/>
<animateColor attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/>
</rect>
<!--
color fill
4s #000000 #0000ff
5s #0000ff #008000
7.5s #0080ff #008080
10s #00ffff #00ffff
-->
<circle r="30" cx="100" cy="240" fill="#0000ff"/>
<circle r="30" cx="193" cy="240" fill="#008000"/>
<circle r="30" cx="287" cy="240" fill="#008080"/>
<circle r="30" cx="380" cy="240" fill="#00ffff"/>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 5.5 KiB

View file

@ -0,0 +1,92 @@
<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="[empty]" author="ED" status="created"
version="$Revision: 1.5 $" testname="$RCSfile: animate-elem-86-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
[[Describe which section and what specific assertion is being tested
by the test. If the test has a number of sub tests, multiple
"testComponent" elements can be specified within the "testDescription"
element.]]
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
This tests performs tests on fill="freeze" values.
</p>
<p>
Currently, this test does not claim to show correct
behaviour in SVG 1.1. The reason is only to show the
difference between current viewers at this point.
</p>
<p>
When the correct behaviour has been defined, this test
can be adjusted to reflect that.
</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-86-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 text-anchor="middle" x="240" y="30" font-size="20">fill="freeze" with discrete calcMode</text>
<g transform="translate(100, 100)">
<g transform="translate(80,25)" text-anchor="end" font-size="14">
<text>discrete</text>
</g>
<g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
<text>&gt; 2s</text>
<text x="80">0s-2s</text>
</g>
<g transform="translate(150,20)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g id="setOne">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<animate id="firstSet" calcMode="discrete" attributeName="x" values="74;-6" dur="4s" end="2s" fill="freeze"/>
</rect>
</g>
</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.5 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1,89 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="[reviewer]" author="CM" status="created"
version="$Revision: 1.5 $" testname="$RCSfile: animate-elem-87-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">
<p>
This tests that the underlying value of a scale transformation
is 0. Since SMIL defines a <em>by animation</em> as being equivalent
to an additive <em>values animation</em> where the first value is zero and
the second value is the <em>by</em> value, such an animation would
begin by post-multiplying a <code>scale(0)</code> transformation to
the element's underlying transform list.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
The test consists of two circles: an orange circle on the left,
which serves as a reference, and a blue circle on the right,
whose <code>transform</code> attribute is animated. Animation of
the circles begins at t=1s and lasts for 3s.
</p>
<p>
The transform animation that applies to the blue circle is of type
"scale", and specifies <code>by="1"</code>. Since the animation is
considered to be equivalent to one that specifies <code>from="0" to="1"</code>,
when the animation begins the circle will be scaled down to a point,
and then will be scaled up until it reaches its original size at
t=4s.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the blue circle on the right is always the same
size as the orange circle on the left. The test runs from t=0s until
t=4s.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-87-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 x='10' y='40'>Test zero value of a scale transform animation</text>
<g transform='translate(150,150)'>
<circle r='80' fill='#ccc'/>
<circle r='80' fill='orange'>
<animate attributeName='r' values='0; 80' begin='1s' dur='3s' fill='freeze'/>
</circle>
<text y='100' text-anchor='middle' font-size='12'>Reference</text>
</g>
<g transform='translate(350,150)'>
<circle r='80' fill='#ccc'/>
<circle r='80' fill='blue'>
<animateTransform attributeName='transform' type='scale' begin='1s' dur='3s' by='1' fill='freeze'/>
</circle>
<text y='100' text-anchor='middle' font-size='12'>&lt;animateTransform type='scale' by='1'/&gt;</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.5 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -0,0 +1,67 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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.3" reviewer="CL" author="CM" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-88-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">
<p>
This tests that any which space before semicolon separators in
a <code>values=""</code> attribute on an animation element is ignored.
</p>
<p>
The test consists of a single rectangle whose height is animated
with a <code>values=" 0 ; 50 "</code> attribute.
</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 the rectangle is animated from a height of
0 to a height of 50 over four seconds, starting from when the
test is loaded.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-88-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 x='10' y='40'>Test values attribute list syntax</text>
<rect x='10' y='50' width='50' height='0'>
<animate attributeName='height' values=' 0 ; 50 ' dur='4s' fill='freeze'/>
</rect>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1,110 @@
<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="CM" author="CL" status="accepted"
version="$Revision: 1.4 $" testname="$RCSfile: animate-elem-89-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://dev.w3.org/SVG/profiles/1.1F2/errata/errata.html#value_spacing_of_keySpline_syntax">
<p>
Tests clarification of value spacing of keySpline syntax; whitespace, or commas with optional whitespace, are allowed.
</p>
<p>
Test possible values for 'calcMode="spline"', with both commas, whitespace, and mixed separators
</p>
<p>
Six animations (three sets of two) have been defined. The three green ones on the left show rectangles which get smaller. The three orange ones on the right show rectangles of constant size, which move.
The black text and grey ruler lines help show the sizes and movement of the rectangles over time.
<!-- derived from animate-elem-12-t.svg: by duplicating the animated rectangles, then changing the list separators -->
</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 the bottom edge of all six animated rectangles move together in sync.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-89-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-family="SVGFreeSansASCII" font-size="20">
<!-- guide lines and labelling -->
<g transform="translate(10,50)">
<text x="0" y="203">0 sec.</text>
<text x="0" y="170">3 sec. </text>
<text x="0" y="114">6 sec. </text>
<text x="3" y="3">9+ sec. </text>
<g stroke="#AAA" stroke-width="4">
<line x1="70" y1="200" x2="450" y2="200"/>
<line x1="70" y1="167" x2="450" y2="167"/>
<line x1="70" y1="111" x2="450" y2="111"/>
<line x1="70" y1="0" x2="450" y2="0"/>
</g>
</g>
<!-- first set of three subtests, keySplines on animation element -->
<g transform="translate(60,50)">
<rect x="140" y="-10" width="50" height="210" fill="rgb(34, 139, 34)" stroke="#555" stroke-width="4">
<animate attributeName="height" calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
<!-- commas -->
</rect>
<rect x="90" y="-10" width="50" height="210" fill="rgb(50, 205, 50)" stroke="#555" stroke-width="4">
<animate attributeName="height" calcMode="spline" keySplines="0 0 1 1;0 0 1 1;.75 0 0 .75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
<!-- spaces -->
</rect>
<rect x="40" y="-10" width="50" height="210" fill="rgb(154, 205, 50)" stroke="#555" stroke-width="4">
<animate attributeName="height" calcMode="spline" keySplines="0 , 0 , 1 , 1;0 , 0 , 1 , 1;.75 , 0 , 0 , .75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
<!-- commas and spaces -->
</rect>
</g>
<!-- second set of three subtests, keySplines on animateMotion element -->
<g transform="translate(250,50)">
<rect x="140" y="-10" width="60" height="10" fill="rgb(235, 110, 0)" stroke="#555" stroke-width="4">
<animateMotion calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="0,200; 0,167; 0,111; 0,0" begin="0s" dur="9s" fill="freeze"/>
<!-- commas -->
</rect>
<rect x="90" y="-10" width="60" height="10" fill="rgb(255, 180, 30)" stroke="#555" stroke-width="4">
<animateMotion calcMode="spline" keySplines="0 0 1 1;0 0 1 1;.75 0 0 .75" values="0,200; 0 167; 0 111; 0 0" begin="0s" dur="9s" fill="freeze"/>
<!-- spaces -->
</rect>
<rect x="40" y="-10" width="60" height="10" fill="rgb(255, 220, 60)" stroke="#555" stroke-width="4">
<animateMotion calcMode="spline" keySplines="0 , 0 , 1 , 1;0 , 0 , 1 , 1;.75 , 0 , 0 , .75" values="0 , 200; 0 , 167; 0 , 111; 0 , 0" begin="0s" dur="9s" fill="freeze"/>
<!-- commas and spaces -->
</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.4 $</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>

After

Width:  |  Height:  |  Size: 6 KiB

View file

@ -0,0 +1,104 @@
<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 2010 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="ED" author="CL" status="accepted"
version="$Revision: 1.3 $" testname="$RCSfile: animate-elem-90-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test that the class attribute is animatable and that style
sheets select on the animated value.
<!-- not clear whether to link to dev.w3.org or to /TR
http://dev.w3.org/SVG/profiles/1.1F2/publish/styling.html#ClassAttribute
-->
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
This test uses the following elements : 'set',
and 'animate'. It requires that CSS style sheets are supported.
</p>
<p>
The test shows a circle which is initially hidden, becomes visible and blue at
3s, abruptly changing to dark red at 5s. Two overlapping animations both animate the
class attribute. The class attribute, as a string value, does not support
linear interpolation so a discrete animation is produced, changing from the
start to the end value midway through the animation duration.
</p>
<p>
The first animation starts at 2s and lasts for 4s so the mid point is at 3s.
The second animation starts at 3s and lasts for 4s so the midpoint is at 5s.
The file includes various guides that can be used to verify the
correctness of the animation. The value of the class attribute
at 02 is "start" so the first CSS rule matches. At 3s it becomes "midway"
so the second rule matches. At 5s it becomes "final midway" so the second and
third rules match; the third rule has higher specificity so determines the fill color.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The color of the large circle must match the colour of the smaller guide
boxes on the left at times 0s, 3s and 5s. If the text "CSS not supported"
is visible, the test does not apply.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-90-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>
<style type="text/css">
.start {visibility: hidden }
.midway {visibility: visible; fill: rgb(0,0,255); }
#test-body-content .final {fill: rgb(128,0,0); }
.hideme {display: none;}
</style>
</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="15" y="55">Color at start</text>
<rect x="15" y="60" width="30" height="30"/>
<circle cx="30" cy="75" r="10" fill="#000"/>
<text x="15" y="145">Color at 3s</text>
<rect x="15" y="150" width="30" height="30"/>
<circle cx="30" cy="165" r="10" fill="rgb(0,0,255)"/>
<text x="15" y="235">Color at 5s</text>
<rect x="15" y="240" width="30" height="30"/>
<circle cx="30" cy="255" r="10" fill="rgb(128,0,0)"/>
</g>
<g>
<rect x="150" y="50" width="240" height="240" stroke="black" fill="black"/>
<circle cx="270" cy="170" r="110" class="start">
<set attributeName="class" attributeType="XML" to="midway" begin="2s" dur="2s" fill="freeze"/>
<animate attributeName="class" attributeType="XML" from="midway" to="final midway" begin="3s" dur="4s" fill="freeze"/>
</circle>
</g>
<text x="270" y="170" text-anchor="middle" font-size="40" fill="#F69" class="hideme">CSS not supported</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.3 $</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>

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -0,0 +1,198 @@
<svg 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 2008 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="[reviewer]" author="CM" status="created"
version="$Revision: 1.1 $" testname="$RCSfile: animate-elem-91-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#ValueAttributes">
<p>
This tests that to-animations on attributes whose values cannot be
interpolated are treated as discrete animations.
</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 there initially eight red squares in the
left column when the document is loaded and the all move
at the same time to the right column two seconds after the
document is loaded.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-91-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 x="10" y="40">Testing &lt;animate to=""&gt; with non-interpolable attributes</text>
<g font-size="16">
<text x="207.5" y="75" text-anchor="middle">0s-2s</text>
<text x="307.5" y="75" text-anchor="middle">> 2s</text>
<!-- Reference: using <set> -->
<g transform="translate(0,85)">
<text x="30" y="12">(reference)</text>
<rect x="200" width="12" height="12" stroke="black" fill="rgb(204,0,102)">
<set attributeName="fill" to="#ccc" begin="2s" dur="2s" fill="freeze"/>
</rect>
<rect x="300" width="12" height="12" stroke="black" fill="#ccc">
<set attributeName="fill" to="rgb(204,0,102)" begin="2s" dur="2s" fill="freeze"/>
</rect>
</g>
<!-- Sub-test 1: class on <rect> -->
<g transform="translate(0,110)">
<style type="text/css">.on { fill: rgb(204,0,102) } .off { fill: #ccc }</style>
<text x="30" y="12">class</text>
<rect x="200" width="12" height="12" stroke="black" class="on">
<animate attributeName="class" to="off" begin="2s" dur="2s" fill="freeze"/>
</rect>
<rect x="300" width="12" height="12" stroke="black" class="off">
<animate attributeName="class" to="on" begin="2s" dur="2s" fill="freeze"/>
</rect>
</g>
<!-- Sub-test 2: clipPathUnits on <clipPath> -->
<g transform="translate(0,135)">
<text x="30" y="12">clipPathUnits</text>
<clipPath id="c1" clipPathUnits="objectBoundingBox">
<rect width="1" height="1"/>
<animate attributeName="clipPathUnits" to="userSpaceOnUse" begin="2s" dur="2s" fill="freeze"/>
</clipPath>
<rect x="200" width="12" height="12" stroke="black" fill="#ccc"/>
<rect x="200" width="12" height="12" stroke="black" fill="rgb(204,0,102)" clip-path="url(#c1)"/>
<rect x="300" width="12" height="12" stroke="black" fill="rgb(204,0,102)"/>
<rect x="300" width="12" height="12" stroke="black" fill="#ccc" clip-path="url(#c1)"/>
</g>
<!-- Sub-test 3: in on <feComposite> -->
<g transform="translate(0,160)">
<text x="30" y="12">in</text>
<filter id="f1" x="0" y="0" width="1" height="1">
<feFlood flood-color="#ccc" result="off"/>
<feFlood flood-color="rgb(204,0,102)" result="on"/>
<feComposite in="on" in2="SourceGraphic">
<animate attributeName="in" to="off" begin="2s" dur="2s" fill="freeze"/>
</feComposite>
</filter>
<filter id="f2" x="0" y="0" width="1" height="1">
<feFlood flood-color="#ccc" result="off"/>
<feFlood flood-color="rgb(204,0,102)" result="on"/>
<feComposite in="off" in2="SourceGraphic">
<animate attributeName="in" to="on" begin="2s" dur="2s" fill="freeze"/>
</feComposite>
</filter>
<rect x="200" width="12" height="12" fill="none" filter="url(#f1)"/>
<rect x="200" width="12" height="12" stroke="black" fill="none"/>
<rect x="300" width="12" height="12" fill="none" filter="url(#f2)"/>
<rect x="300" width="12" height="12" stroke="black" fill="none"/>
</g>
<!-- Sub-test 4: preserveAspectRatio on <svg> -->
<g transform="translate(0,185)">
<text x="30" y="12">preserveAspectRatio</text>
<rect x="200" width="12" height="12" fill="#ccc"/>
<rect x="300" width="12" height="12" fill="rgb(204,0,102)"/>
<clipPath id="c2" clipPathUnits="userSpaceOnUse">
<rect x="200" y="0" width="112" height="12"/>
</clipPath>
<g clip-path="url(#c2)">
<svg width="200" height="100" viewBox="0 0 400 400" preserveAspectRatio="none" overflow="visible">
<rect x="400" width="24" height="48" fill="rgb(204,0,102)"/>
<rect x="600" width="24" height="48" fill="#ccc"/>
<animate attributeName="preserveAspectRatio" to="xMinYMin" begin="2s" dur="2s" fill="freeze"/>
</svg>
</g>
<rect x="200" width="12" height="12" stroke="black" fill="none"/>
<rect x="300" width="12" height="12" stroke="black" fill="none"/>
</g>
<!-- Sub-test 5: spreadMethod on <linearGradient> -->
<g transform="translate(0,210)">
<text x="30" y="12">spreadMethod</text>
<linearGradient id="g1" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="2" y2="0" spreadMethod="reflect">
<stop offset="0" stop-color="rgb(204,0,102)" stop-opacity="0"/>
<stop offset="0" stop-color="rgb(204,0,102)"/>
<stop offset="1" stop-color="rgb(204,0,102)"/>
<stop offset="1" stop-color="rgb(204,0,102)" stop-opacity="0"/>
<animate attributeName="spreadMethod" to="pad" begin="2s" dur="2s" fill="freeze"/>
</linearGradient>
<linearGradient id="g2" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="2" y2="0" spreadMethod="reflect">
<stop offset="0" stop-color="#ccc" stop-opacity="0"/>
<stop offset="0" stop-color="#ccc"/>
<stop offset="1" stop-color="#ccc"/>
<stop offset="1" stop-color="#ccc" stop-opacity="0"/>
<animate attributeName="spreadMethod" to="pad" begin="2s" dur="2s" fill="freeze"/>
</linearGradient>
<rect x="200" width="12" height="12" fill="#ccc"/>
<rect x="300" width="12" height="12" fill="rgb(204,0,102)"/>
<rect x="200" width="12" height="12" stroke="black" fill="url(#g1)"/>
<rect x="300" width="12" height="12" stroke="black" fill="url(#g2)"/>
</g>
<!-- Sub-test 6: xlink:href on <use> -->
<g transform="translate(0,235)">
<text x="30" y="12">xlink:href</text>
<g display="none">
<rect id="r1" width="12" height="12" fill="rgb(204,0,102)" stroke="black"/>
<rect id="r2" width="12" height="12" fill="#ccc" stroke="black"/>
</g>
<use xlink:href="#r1" x="200">
<animate attributeName="xlink:href" to="#r2" begin="2s" dur="2s" fill="freeze"/>
</use>
<use xlink:href="#r2" x="300">
<animate attributeName="xlink:href" to="#r1" begin="2s" dur="2s" fill="freeze"/>
</use>
</g>
<!-- Sub-test 7: display on <rect> -->
<g transform="translate(0,260)">
<text x="30" y="12">display</text>
<g>
<rect x="200" width="12" height="12" fill="rgb(204,0,102)" stroke="black"/>
<rect x="300" width="12" height="12" fill="#ccc" stroke="black"/>
<animate attributeName="display" to="none" begin="2s" dur="2s" fill="freeze"/>
</g>
<g display="none">
<rect x="200" width="12" height="12" fill="#ccc" stroke="black"/>
<rect x="300" width="12" height="12" fill="rgb(204,0,102)" stroke="black"/>
<animate attributeName="display" to="inline" begin="2s" dur="2s" fill="freeze"/>
</g>
</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.1 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 9.7 KiB

View file

@ -0,0 +1,113 @@
<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="ED" author="CM" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-92-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
This tests checks the behavior of discrete to-animations.
</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 after five seconds, in each of the three rows,
the red rectangle is in the column at the times indicated.
Thus, from the document load until 2s afterwards, the red
square in all three rows must be in the left column. At 2s,
all three red squares must move to the right column. At 4s,
the red square in the first row must move to the left column
and the other two red squares must remain in the right column.</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-92-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 text-anchor="middle" x="240" y="30" font-size="20">discrete to-animation</text>
<g transform="translate(100, 70)">
<g transform="translate(80,25)" text-anchor="end" font-size="14">
<text>without freezing</text>
<text y="55">with freezing</text>
<text y="110">with keyTimes</text>
</g>
<g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
<text>0s-2s</text>
<text y="-16">&gt; 4s</text>
<text x="80">2s-4s</text>
<g transform="translate(0, 55)">
<text>0s-2s</text>
<text x="80">&gt; 2s</text>
</g>
<g transform="translate(0, 110)">
<text>0s-2s</text>
<text x="80">&gt; 2s</text>
</g>
</g>
<g transform="translate(150,20)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
</defs>
<g>
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<animate attributeName="x" calcMode="discrete" to="74" dur="4s"/>
</rect>
</g>
<g transform="translate(0, 55)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<animate attributeName="x" calcMode="discrete" to="74" dur="4s" fill="freeze"/>
</rect>
</g>
<g transform="translate(0, 110)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>
<rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
<animate attributeName="x" calcMode="discrete" to="74" dur="8s" keyTimes="0; 0.25" fill="freeze"/>
</rect>
</g>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 5 KiB

View file

@ -0,0 +1,116 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="AE" author="ASl" status="accepted"
version="$Revision: 1.2 $" testname="$RCSfile: animate-interact-events-01-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#SVGEvents">
<p>Tests 'mouseover' event on SVGElementInstance</p>
<p>
What each case tests is as follows.
Case 1: mouseover event on SVGElementInstance. Referenceing an element that contains an event.
Case 2: mouseover event on referencing element. Event bubbling from SVGElementInstance to referencing element.
Case 3: mouseover event on parent of referencing element. Event bubbling from SVGElementInstance to referencing element ancestors.
Case 4: mousedown event on referencing element. SVGElementInstance is not effected by event listener on referencing element.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Mouseover each of the red rectangles, and then click on the bottommost rectangle.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
This test contains four cases. The cases must produce the following results for the test to pass.
</p>
<ul>
<li>Case 1: On a mouseover event on the top square, all four squares must turn blue.</li>
<li>Case 2: On a mouseover event on the top middle square, all four squares must turn blue and a black stroke
must appear on the referencing square (element).</li>
<li>Case 3: On a mouseover event on the bottom middle square, all four squares must turn blue and a black
stroke must appear on the referencing square (element).</li>
<li>Case 4: On a mouseover event on the bottom square, all four squares must turn blue, and on a mousedown event
a black stroke must appear on the referencing square (element).</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-interact-events-01-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">
<defs>
<!-- SVGElementInstance animates fill on mouseover -->
<rect id="rect" width="50" height="50" fill="red">
<set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
</rect>
</defs>
<text x="120" y="20" font-size="15">Shadow tree event listener chain</text>
<!--basic event dispatch - all rectangles turn blue -->
<use fill="red" x="30" y="30" xlink:href="#rect"/>
<text x="95" y="45" font-size="12">Case 1: on mouseover all squares must turn blue</text>
<!-- event bubbling from SVGElementInstance to referencing element -->
<!-- all rectangles turn blue and second rectangle displays black stroke -->
<use id="use2" fill="red" x="30" y="100" xlink:href="#rect"/>
<rect pointer-events="none" x="30" y="100" width="50" height="50" fill="none" stroke-width="5" stroke="none" >
<set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
</rect>
<g font-size="12">
<text x="95" y="115">Case 2: on mouseover all squares must turn blue</text>
<text x="95" y="130">and a black stroke must appear on reference square</text>
</g>
<!-- event bubbling from SVGElementInstance to referencing element ancestors-->
<!-- all rectangles turn blue and third rectangle displays black stroke -->
<g id="g1">
<use fill="red" x="30" y="170" xlink:href="#rect"/>
<rect pointer-events="none" x="30" y="170" width="50" height="50" fill="none" stroke-width="5" stroke="none" >
<set attributeName="stroke" begin="g1.mouseover" end="g1.mouseout" to="black"/>
</rect>
</g>
<g font-size="12">
<text x="95" y="185">Case 3: on mouseover all squares must turn blue</text>
<text x="95" y="200">and a black stroke must appear on reference square</text>
</g>
<!--SVGElementInstance is not effected by event listener on referencing element -->
<!-- all rectangles turn blue and displays black stroke only on mouse down -->
<use id="use3" fill="red" x="30" y="240" xlink:href="#rect"/>
<rect pointer-events="none" x="30" y="240" width="50" height="50" fill="none" stroke-width="5" stroke="none" >
<set attributeName="stroke" begin="use3.mousedown" end="use3.mouseup" to="black"/>
</rect>
<g font-size="12">
<text x="95" y="255">Case 4: on mouseover all squares must turn blue</text>
<text x="95" y="270">and on mousedown a black stroke must appear on reference square</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.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -0,0 +1,285 @@
<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="ED" status="accepted"
version="$Revision: 1.3 $" testname="$RCSfile: animate-interact-pevents-01-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty">
<p>
This test tests 'pointer-events' on text. Initially you should see four big rects with black stroke.
In the uppermost rect there should be 10 'O':s with black fill.
In the second rect from the top there should be 10 'O':s with no fill but with black stroke.
In the third and fourth rects there should be no visible 'O':s at all.
In the fourth rect there should be two green rects, and in each of the other three rects there should be one green rect.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Using the pointer device move the cursor over each of the four black-stroked rectangles from left to right.
As the mouseover event triggers, the 'O':s will become visible and marked
in either green (a pass) or red (an immediate fail). Some 'O':s will not
change when the pointer is moved over them.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if after moving the cursor over all the rects:
</p>
<ol>
<li>all the 'O':s in the green rects have green fill</li>
<li>there are no red 'O':s visible</li>
<li>there are 9 green 'O':s in the first and second rect, 4 in the third rect and 6 in the fourth rect</li>
</ol>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-interact-pevents-01-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-family="sans-serif" font-size="40" text-rendering="geometricPrecision">
<text x="240" y="40" text-anchor="middle" font-size="20">Test pointer-events on text</text>
<g transform="translate(40, -10)">
<g id="first-line">
<text x="50" y="100">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="80" y="100" pointer-events="visiblePainted">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="110" y="100" pointer-events="visibleFill">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="140" y="100" pointer-events="visibleStroke">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="170" y="100" pointer-events="visible">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="200" y="100" pointer-events="painted">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="230" y="100" pointer-events="fill">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="260" y="100" pointer-events="stroke">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="290" y="100" pointer-events="all">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="320" y="100" pointer-events="none">
O
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<g pointer-events="none">
<rect x="50" y="65" height="40" width="270" fill="green" fill-opacity="0.5" visibility="visible"/>
<rect x="50" y="65" height="40" width="300" fill="none" stroke="black" visibility="visible"/>
</g>
</g>
<g id="second-line" transform="translate(0 60)" fill="none" stroke="black">
<text x="50" y="100">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="80" y="100" pointer-events="visiblePainted">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="110" y="100" pointer-events="visibleFill">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="140" y="100" pointer-events="visibleStroke">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="170" y="100" pointer-events="visible">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="200" y="100" pointer-events="painted">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="230" y="100" pointer-events="fill">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="260" y="100" pointer-events="stroke">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="290" y="100" pointer-events="all">
O
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="320" y="100" pointer-events="none">
O
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<g pointer-events="none">
<rect x="50" y="65" height="40" width="270" fill="green" fill-opacity="0.5" visibility="visible" stroke="none"/>
<rect x="50" y="65" height="40" width="300" fill="none" stroke="black" visibility="visible"/>
</g>
</g>
<g id="third-line" transform="translate(0 120)" visibility="hidden">
<text x="50" y="100">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="80" y="100" pointer-events="visiblePainted">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="110" y="100" pointer-events="visibleFill">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="140" y="100" pointer-events="visibleStroke">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="170" y="100" pointer-events="visible">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="200" y="100" pointer-events="painted">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="230" y="100" pointer-events="fill">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="260" y="100" pointer-events="stroke">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="290" y="100" pointer-events="all">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="320" y="100" pointer-events="none">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<g pointer-events="none">
<rect x="200" y="65" height="40" width="120" fill="green" fill-opacity="0.5" visibility="visible"/>
<rect x="50" y="65" height="40" width="300" fill="none" stroke="black" visibility="visible"/>
</g>
</g>
<g id="fourth-line" transform="translate(0 180)" fill="none" stroke="none">
<text x="50" y="100">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="80" y="100" pointer-events="visiblePainted">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="110" y="100" pointer-events="visibleFill">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="140" y="100" pointer-events="visibleStroke">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="170" y="100" pointer-events="visible">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="200" y="100" pointer-events="painted">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<text x="230" y="100" pointer-events="fill">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="260" y="100" pointer-events="stroke">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="290" y="100" pointer-events="all">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="green" begin="mouseover" dur="indefinite"/>
</text>
<text x="320" y="100" pointer-events="none">
O
<set attributeName="visibility" to="visible" begin="mouseover" dur="indefinite"/>
<set attributeName="fill" to="red" begin="mouseover" dur="indefinite"/>
</text>
<g pointer-events="none">
<rect x="110" y="65" height="40" width="90" fill="green" fill-opacity="0.5" visibility="visible"/>
<rect x="230" y="65" height="40" width="90" fill="green" fill-opacity="0.5" visibility="visible"/>
<rect x="50" y="65" height="40" width="300" fill="none" stroke="black" visibility="visible"/>
</g>
</g>
</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.3 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -0,0 +1,116 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="DOH" author="AE" status="accepted"
version="$Revision: 1.3 $" testname="$RCSfile: animate-interact-pevents-02-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty">
<p>Testing pointer-events and rendering order</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Move the mouse over the blue and purple shapes. Click the pink circle at the top right of the page. Move the mouse over the blue and purple shapes again.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
For the test to pass the blue rectangles must always turn pink on mouseover, and the ovals must turn pink on mouseover only if pointer-events are set to "ALL".
If a shape other than the one currently hovered turns pink then the test has failed.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-interact-pevents-02-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 x="15" y="15" height="280" width="450" fill="none" stroke="black" stroke-width="0.25"/>
<g text-anchor="middle">
<text x="240" y="30" fill="black" font-size="15">Testing pointer-events and rendering order</text>
<text x="240" y="42" fill="#555" font-size="10">Rectangles should turn RED on mouseover </text>
<text x="240" y="54" fill="#555" font-size="10">Ovals should turn RED if Pointer-Events are set to "ALL"</text>
</g>
<g id="buttons">
<g text-anchor="middle" font-size="8" fill="#555" transform="translate(0,10)">
<text x="400" y="85">Change "Pointer-Events" of </text>
<text x="400" y="95">ovals from "ALL" to "NONE"</text>
<circle id="on" cx="385" cy="65" r="10" fill-opacity="1" fill="#3c5" stroke="black" stroke-width="3"/>
<circle id="off" cx="415" cy="65" r="10" fill-opacity="1" fill="#f35" stroke="black"/>
</g>
<g text-anchor="middle" font-size="12" fill="#555">
<text id="all" x="240" y="285" fill="#555" visibility="visible">Purple ovals have "Pointer-Events" set to "ALL".</text>
<text id="none" x="240" y="285" fill="#555" visibility="hidden">Purple ovals have Pointer-Events set to "NONE".</text>
</g>
<set xlink:href="#all" attributeName="visibility" to="visible" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#all" attributeName="visibility" to="hidden" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#none" attributeName="visibility" to="hidden" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#none" attributeName="visibility" to="visible" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#on" attributeName="stroke-width" to="3" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#on" attributeName="stroke-width" to="1" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#off" attributeName="stroke-width" to="3" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#off" attributeName="stroke-width" to="1" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#c10" attributeName="pointer-events" to="all" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#c10" attributeName="pointer-events" to="none" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#c11" attributeName="pointer-events" to="all" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#c11" attributeName="pointer-events" to="none" begin="off.mousedown" fill="freeze"/>
<set xlink:href="#c12" attributeName="pointer-events" to="all" begin="on.mousedown" fill="freeze"/>
<set xlink:href="#c12" attributeName="pointer-events" to="none" begin="off.mousedown" fill="freeze"/>
</g>
<g transform="scale(0.75, 0.5) translate(100, 85)">
<circle id="c10" cx="160" cy="350" r="100" fill-opacity="1" fill="#53f" stroke="black" pointer-events="all">
<set attributeName="fill" to="#F55" begin="c10.mouseover"/>
<set attributeName="fill" to="#53f" begin="c10.mouseout"/>
</circle>
<rect id="r10" x="10" y="50" width="300" height="300" fill-opacity="1" fill="#35f" stroke="black">
<set attributeName="fill" to="#F55" begin="r10.mouseover"/>
<set attributeName="fill" to="#35f" begin="r10.mouseout"/>
</rect>
<circle id="c11" cx="310" cy="350" r="90" fill-opacity="1" fill="#75f" stroke="black" pointer-events="all">
<set attributeName="fill" to="#F55" begin="c11.mouseover"/>
<set attributeName="fill" to="#75f" begin="c11.mouseout"/>
</circle>
<rect id="r11" x="60" y="100" width="200" height="200" fill-opacity="1" fill="#57f" stroke="black">
<set attributeName="fill" to="#F55" begin="r11.mouseover"/>
<set attributeName="fill" to="#57f" begin="r11.mouseout"/>
</rect>
<circle id="c12" cx="310" cy="200" r="75" fill-opacity="1" fill="#97f" stroke="black" pointer-events="all">
<set attributeName="fill" to="#F55" begin="c12.mouseover"/>
<set attributeName="fill" to="#97f" begin="c12.mouseout"/>
</circle>
<rect id="r12" x="110" y="150" width="100" height="100" fill-opacity="1" fill="#79f" stroke="black">
<set attributeName="fill" to="#F55" begin="r12.mouseover"/>
<set attributeName="fill" to="#79f" begin="r12.mouseout"/>
</rect>
<g id="dasharray-rectangles" stroke-width="0.5" stroke-dasharray="4, 4">
<rect id="r-dash10" x="10" y="50" width="300" height="300" fill-opacity="0" fill="none" stroke="black" pointer-events="none"/>
<rect id="r-dash11" x="60" y="100" width="200" height="200" fill-opacity="0" fill="none" stroke="black" pointer-events="none"/>
<rect id="r-dash12" x="110" y="150" width="100" height="100" fill-opacity="0" fill="none" stroke="black" pointer-events="none"/>
</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.3 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 7.5 KiB

View file

@ -0,0 +1,219 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="DOH" author="AE" status="accepted"
version="$Revision: 1.2 $" testname="$RCSfile: animate-interact-pevents-03-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty">
<p>Tests the pointer-events attribute with different 'visible' values</p>
<p>
The 2nd and 3rd columns represent respectively rects with no fill/stroke and transparent fill/stroke.
The 4th column (most right column) has a non activatable pointer event as the visibility of the column
is set to hidden.
</p>
<p>
The first row tests the default value for pointer-event, i.e. visible fill and stroke will trigger an event.
The second row tests pointer-events="visiblePainted", i.e. visible fill and stroke will trigger an event.
The third row tests pointer-events="visibleFill", i.e. visible fill only an event.
The fourth row tests pointer-events="visibleStroke", i.e. visible stroke only an event.
The fifth row tests pointer-events="visible", i.e. visible fill and stroke will trigger an event.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Slowly move the mouse over the rectangles in each row while checking the pass criteria.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the following conditions are met
</p>
<ul>
<li>In the first row of squares, the fill and stroke of squares 1 and 3 only must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the second row of squares, the fill and stroke of squares 1 and 3 only must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the third row of squares, the fill only of squares 1, 2 and 3 must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the fourth row of squares, the stroke only of squares 1, 2 and 3 must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the fifth row of squares, the fill and stroke of squares 1, 2 and 3 must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-interact-pevents-03-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 text-anchor="middle">
<text id="display-title" x="240" y="25" fill="#555" font-size="12">
<tspan fill="black" font-size="10">Testing pointer-events</tspan> - pale RED rect should appear on mouseover.
</text>
<text id="comment-1" x="240" y="37" fill="#555" font-size="10">
2nd and 3rd columns represent respectively rects with no fill/stroke and transparent fill/stroke
</text>
</g>
<g transform="translate(0, 5)">
<g transform="translate(25, 50)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r10.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r10.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r11.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r11.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r12.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r12.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r13.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r13.mouseout"/>
</rect>
<rect id="r10" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r11" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r12" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r13" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden"/>
<g font-size="12">
<text x="200" y="15">default : </text>
<text x="200" y="30" fill="#777">fill and stroke of rects 1 and 3 must trigger</text>
</g>
</g>
<g transform="translate(25, 100)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r20.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r20.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r21.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r21.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r22.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r22.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r23.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r23.mouseout"/>
</rect>
<rect id="r20" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="visiblePainted"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r21" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="visiblePainted"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r22" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="visiblePainted"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r23" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden" pointer-events="visiblePainted"/>
<g font-size="12">
<text x="200" y="15">visiblePainted : </text>
<text x="200" y="30" fill="#777">fill and stroke of rects 1 and 3 must trigger</text>
</g>
</g>
<g transform="translate(25, 150)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r30.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r30.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r31.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r31.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r32.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r32.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r33.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r33.mouseout"/>
</rect>
<rect id="r30" width="30" height="30" fill="blue" stroke-width="10" stroke="black" fill-opacity=".3" stroke-opacity=".3" pointer-events="visibleFill"/>
<rect x="50" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r31" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="visibleFill"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r32" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="black" fill-opacity="0" stroke-opacity="0" pointer-events="visibleFill"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r33" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden" pointer-events="visibleFill"/>
<g font-size="12">
<text x="200" y="15">visibleFill : </text>
<text x="200" y="30" fill="#777">only fill of rects 1, 2 and 3 must trigger</text>
</g>
</g>
<g transform="translate(25, 200)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r40.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r40.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r41.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r41.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r42.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r42.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r43.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r43.mouseout"/>
</rect>
<rect id="r40" width="30" height="30" fill="black" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="visibleStroke"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r41" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="visibleStroke"/>
<rect x="100" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r42" x="100" width="30" height="30" fill="black" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="visibleStroke"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r43" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden" pointer-events="visibleStroke"/>
<g font-size="12">
<text x="200" y="15">visibleStroke : </text>
<text x="200" y="30" fill="#777">only stroke of rects 1, 2 and 3 must trigger</text>
</g>
</g>
<g transform="translate(25, 250)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r50.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r50.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r51.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r51.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r52.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r52.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r53.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r53.mouseout"/>
</rect>
<rect id="r50" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="visible"/>
<rect x="50" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r51" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="visible"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r52" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="visible"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r53" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden" pointer-events="visible"/>
<g font-size="12">
<text x="200" y="15">visible : </text>
<text x="200" y="30" fill="#777">fill and stroke of rects 1, 2 and 3 must trigger</text>
</g>
</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.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -0,0 +1,208 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="DOH" author="AE" status="accepted"
version="$Revision: 1.2 $" testname="$RCSfile: animate-interact-pevents-04-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty">
<p>Tests the pointer-events attribute with different painting values</p>
<p>
The 2nd and 3rd columns represent respectively rects with no fill/stroke and transparent fill/stroke.
The 4th column has visibility set to hidden.
</p>
<p>
The first row tests pointer-events="painted", i.e. event on fill and stroke that are set.
The second row tests pointer-events="fill", i.e. event on a fill that is set.
The third row tests pointer-events="stroke", i.e. even on a stroke that is et.
The fourth row tests pointer-events="all", i.e. event on fill and stroke that are set.
The fifth row tests pointer-events="none", i.e. no event.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Slowly move the mouse over the rectangles in each row while checking the pass criteria.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the following conditions are met:
</p>
<ul>
<li>In the first row of squares, the fill and stroke of squares 1, 3 and 4 only must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the second row of squares, the fill only of all squares must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the third row of squares, the stroke only of all must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the fourth row of squares, the fill and stroke of all squares must trigger a pale red rectangle to appear
over the squares on mouseover.</li>
<li>In the fifth row of squares, nothing is to trigger on mouseover.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-interact-pevents-04-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 text-anchor="middle">
<text id="display-title" x="240" y="25" fill="#555" font-size="12">
<tspan fill="black" font-size="10">Testing pointer-events</tspan> - pale RED rect should appear on mouseover.
</text>
<text id="comment-1" x="240" y="37" fill="#555" font-size="10">
2nd and 3rd columns represent respectively rects with no fill/stroke and transparent fill/stroke
</text>
</g>
<g transform="translate(0, 5)">
<g transform="translate(25, 50)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r60.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r60.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r61.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r61.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r62.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r62.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r63.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r63.mouseout"/>
</rect>
<rect id="r60" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="painted"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r61" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="painted"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r62" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="painted"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r63" x="150" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" visibility="hidden" pointer-events="painted"/>
<g font-size="12">
<text x="200" y="15">painted : </text>
<text x="200" y="30" fill="#777">fill and stroke of rects 1, 3 and 4 must trigger</text>
</g>
</g>
<g transform="translate(25, 100)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r70.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r70.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r71.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r71.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r72.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r72.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r73.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r73.mouseout"/>
</rect>
<rect id="r70" width="30" height="30" fill="blue" stroke-width="10" stroke="black" fill-opacity=".3" stroke-opacity=".3" pointer-events="fill"/>
<rect x="50" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r71" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="fill"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r72" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="black" fill-opacity="0" stroke-opacity="0" pointer-events="fill"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r73" x="150" width="30" height="30" fill="blue" stroke-width="10" stroke="black" visibility="hidden" pointer-events="fill"/>
<g font-size="12">
<text x="200" y="15">fill : </text>
<text x="200" y="30" fill="#777">fill of rects 1 to 4 must trigger</text>
</g>
</g>
<g transform="translate(25, 150)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r80.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r80.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r81.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r81.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r82.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r82.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r83.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r83.mouseout"/>
</rect>
<rect id="r80" width="30" height="30" fill="black" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="stroke"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r81" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="stroke"/>
<rect x="100" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r82" x="100" width="30" height="30" fill="black" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="stroke"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r83" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="blue" visibility="hidden" pointer-events="stroke"/>
<g font-size="12">
<text x="200" y="15">stroke : </text>
<text x="200" y="30" fill="#777">stroke of rects 1 to 4 must trigger</text>
</g>
</g>
<g transform="translate(25, 200)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r90.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r90.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r91.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r91.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r92.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r92.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r93.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r93.mouseout"/>
</rect>
<rect id="r90" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity=".3" stroke-opacity=".3" pointer-events="all"/>
<rect x="50" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r91" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="all"/>
<rect x="100" width="30" height="30" fill="blue" fill-opacity="0.1" stroke-width="10" stroke="blue" stroke-opacity="0.1"/>
<rect id="r92" x="100" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" fill-opacity="0" stroke-opacity="0" pointer-events="all"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="blue" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r93" x="150" width="30" height="30" fill="blue" stroke-width="10" stroke="blue" visibility="hidden" pointer-events="all"/>
<g font-size="12">
<text x="200" y="15">all : </text>
<text x="200" y="30" fill="#777">stroke and fill of rects 1 to 4 must trigger</text>
</g>
</g>
<g transform="translate(25, 250)">
<rect x="-10" y="-10" width="200" height="50" fill="red" fill-opacity="0">
<set attributeName="fill-opacity" to="0.4" begin="r00.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r00.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r01.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r01.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r02.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r02.mouseout"/>
<set attributeName="fill-opacity" to="0.4" begin="r03.mouseover"/>
<set attributeName="fill-opacity" to="0" begin="r03.mouseout"/>
</rect>
<rect id="r00" width="30" height="30" fill="black" stroke-width="10" stroke="black" fill-opacity=".3" stroke-opacity=".3" pointer-events="none"/>
<rect x="50" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r01" x="50" width="30" height="30" fill="none" stroke-width="10" stroke="none" fill-opacity=".3" stroke-opacity=".3" pointer-events="none"/>
<rect x="100" width="30" height="30" fill="black" fill-opacity="0.1" stroke-width="10" stroke="black" stroke-opacity="0.1"/>
<rect id="r02" x="100" width="30" height="30" fill="black" stroke-width="10" stroke="black" fill-opacity="0" stroke-opacity="0" pointer-events="none"/>
<rect x="145" y="-5" width="40" height="40" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect x="150" width="30" height="30" fill="none" stroke-width="1" stroke="black" stroke-dasharray="1,1"/>
<rect x="155" y="5" width="20" height="20" fill="none" stroke-width="1" stroke="black" stroke-dasharray="3,3" stroke-opacity=".5"/>
<rect id="r03" x="150" width="30" height="30" fill="black" stroke-width="10" stroke="black" visibility="hidden" pointer-events="none"/>
<g font-size="12">
<text x="200" y="15">none : </text>
<text x="200" y="30" fill="#777">nothing is to trigger</text>
</g>
</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.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,103 @@
<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="ED" author="CC" status="accepted"
version="$Revision: 1.2 $" testname="$RCSfile: animate-pservers-grad-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/pservers.html#Gradients">
<p>
This test shows rectangles filled with animated gradient which inherits some of their properties: stop-color, stop-opacity.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Load the svg and wait 5 seconds for the animation to run, then compare the image to the reference.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The correct result should show:
</p>
<ul>
<li>the top-left rectangle filled initially with a linear green-to-red gradient and turning into a solid green color after 5s.</li>
<li>the top-right rectangle filled initially with a green gradient fully opaque on the left and half transparent on the right, but after 5s the rectangle should be filled with a fully opaque solid green.</li>
<li>the bottom-left rectangle filled with a static green-to-black opaque gradient.</li>
<li>the bottom-right rectangle initially filled with a green-to-yellow fully-opaque gradient animated and turning into a fully-opaque green solid color.</li>
<!--<li>Animations numbered a4 to a7 should have no impact.</li>-->
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-pservers-grad-01-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">
<defs>
<g id="g0" stop-color="yellow" stop-opacity="0" color="yellow">
<animateColor id="a1" attributeName="stop-color" from="red" to="green" dur="5" fill="freeze"/>
<animateColor id="a2" attributeName="color" from="yellow" to="green" dur="5" fill="freeze"/>
<animate id="a3" attributeName="stop-opacity" from="0.5" to="1" dur="5" fill="freeze"/>
<linearGradient id="MyGradient1" stop-color="inherit">
<stop offset="0" stop-color="green" stop-opacity="1"/>
<stop offset="1" stop-color="inherit" stop-opacity="1"/>
</linearGradient>
<linearGradient id="MyGradient2" stop-opacity="inherit">
<stop offset="0" stop-color="green" stop-opacity="1"/>
<stop offset="1" stop-color="green" stop-opacity="inherit"/>
</linearGradient>
<g id="g01">
<linearGradient id="MyGradient3">
<stop offset="0" stop-color="green" stop-opacity="1"/>
<stop offset="1"/>
</linearGradient>
<linearGradient id="MyGradient4">
<stop offset="0" stop-color="green" stop-opacity="1"/>
<stop offset="1" stop-color="currentColor" stop-opacity="1"/>
</linearGradient>
</g>
</g>
</defs>
<g id="g1" stop-color="blue">
<animateColor id="a4" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/>
<rect id="r1" fill="url(#MyGradient1)" width="100" height="100" x="50" y="50"/>
</g>
<g id="g2" stop-opacity="1">
<animate id="a5" attributeName="stop-opacity" from="1" to="0" dur="5" fill="freeze"/>
<rect id="r2" fill="url(#MyGradient2)" width="100" height="100" x="200" y="50"/>
</g>
<g id="g3" stop-opacity="1" stop-color="blue">
<animateColor id="a6" attributeName="stop-color" from="blue" to="red" dur="5" fill="freeze"/>
<animate id="a7" attributeName="stop-opacity" from="1" to="0" dur="5" fill="freeze"/>
<rect id="r3" fill="url(#MyGradient3)" width="100" height="100" x="50" y="200"/>
</g>
<g id="g4" color="blue">
<animateColor id="a7" attributeName="color" from="blue" to="red" dur="5" fill="freeze"/>
<rect id="r4" fill="url(#MyGradient4)" width="100" height="100" x="200" y="200"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 5.7 KiB

View file

@ -0,0 +1,90 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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.3" reviewer="CL" author="CM" status="accepted"
version="$Revision: 1.1 $" testname="$RCSfile: animate-script-elem-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">
<p>
This tests that the 'xlink:href' attribute on the 'script' element is not animatable.
</p>
<p>
After loading the test and waiting one second, two rectangles
will appear, indicating the result of two sub-tests. The
upper rectangle reflects the result of testing that an
attempt to animate 'xlink:href' on 'script' does not affect
the .href.animVal of the element. The lower rectangle reflects
the result of testing that the animation attempt does not
cause a new script to be loaded and executed. Black indicates
that the sub-test did not run, red that it failed and green
that it passed.
</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 both rectangles are green once they
appear one second after loading the test.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-script-elem-01-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">
<text x='10' y='30'>Test that &lt;script xlink:href=""> is not animatable</text>
<g>
<rect id='r1' x='10' y='50' width='30' height='30' fill='black'/>
<rect id='r2' x='10' y='90' width='30' height='30' fill='green'/>
<g font-size='15'>
<text x='50' y='70'>Test script.href.animVal does not change</text>
<text x='50' y='110'>Test animating xlink:href="" does not load a script</text>
</g>
<script id='s' xlink:href='../images/empty.js'/>
<script>
function f() {
document.getElementById('r2').setAttribute('fill', 'red');
}
function g() {
document.getElementById('r1').setAttribute('fill', document.getElementById('s').href.animVal.indexOf('empty') >= 0 ? 'green' : 'red');
}
</script>
<set xlink:href='#s' attributeName='xlink:href' to='../images/f.js' dur='100s'/>
<set attributeName='visibility' to='hidden' dur='1s' onend='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.1 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.1 KiB

View file

@ -0,0 +1,93 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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.3" reviewer="CL" author="CM" status="accepted"
version="$Revision: 1.2 $" testname="$RCSfile: animate-struct-dom-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement">
<p>
This tests that calling SVGSVGElement.getCurrentTime() before the
document timeline has begun returns 0, and that
calling SVGSVGElement.setCurrentTime() before the document timeline
has begun will queue a seek to that time once the timeline
does begin.
After loading the test, two rectangles will be shown.
The left rectangle indicates whether SVGSVGElement.getCurrentTime()
correctly returned 0 before the document timeline had begun.
The right rectangles indicates whether a call to
SVGSVGElement.setCurrentTime() was acted upon once the timeline
did begin. For each rectangle, red indicates that the sub-test
failed and green indicates that the sub-test passed.
</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 both rectangles are green.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-struct-dom-01-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">
<text x='10' y='30'>Test getCurrentTime() and setCurrentTime() before timeline begin</text>
<rect id='r' x='10' y='50' width='50' height='50' fill='red'/>
<rect x='210' y='50' width='50' height='50' fill='red'>
<set attributeName='fill' to='green' begin='36000'/> <!-- 10h -->
<set attributeName='fill' to='red' begin='72000'/> <!-- 20h -->
</rect>
<g font-size='15'>
<text x='10' y='120'>getCurrentTime</text>
<text x='210' y='120'>setCurrentTime</text>
</g>
<script>
try {
document.documentElement.setCurrentTime(90000); // 25h
document.documentElement.setCurrentTime(54000); // 15h
} catch (e) {
}
try {
if (document.documentElement.getCurrentTime() == 0) {
document.getElementById('r').setAttribute('fill', 'green');
}
} catch (e) {
}
</script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.1 KiB

View file

@ -0,0 +1,76 @@
<svg version="1.1" baseProfile="full" 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="Tim Thompson" status="issue"
version="$Revision: 1.9 $" testname="$RCSfile: color-prof-01-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileDescriptions">
<p>
The purpose of this test is to determine if an application can apply ICC
color profiles to raster images. The same image is displayed twice; a color profile
is applied to one by the SVG, so that the colors change.
</p>
<!-- the issue is that SVG 1.1 does not require ICC color profile support, it is optional.
So the pass criteria are incorrect. In fact, this is untestable as the feature is purely
optional and does not correspond to a named conformance class.
Fixed in the SVG Color module.
-->
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
</p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
If the two images (each of 9 colored squares) look identical, the test fails.
If the colours in the lower right image are more saturated, brighter versions of
those in the top left image, as shown by the reference image, the test is passed.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prof-01-f.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">
<defs>
<color-profile id="changeColor" name="changeColor" xlink:href="../images/changeColor.ICM"/>
</defs>
<g>
<image id="image1PNG" x="30" y="0" width="190" height="190" xlink:href="../images/colorprof.png"/>
</g>
<g>
<image color-profile="changeColor" id="image2" x="260" y="90" width="190" height="190" xlink:href="../images/colorprof.png"/>
</g>
<text font-family="Arial" font-size="12" x="250" y="20">
Basic test of ICC profile with an image.
</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.9 $</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>

After

Width:  |  Height:  |  Size: 3.9 KiB

View file

@ -0,0 +1,81 @@
<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: color-prop-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
This tests the 'color' property and the 'currentColor' value on fill, stroke, and stop-color 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>
There are three subtests. The first subtest, to the top left, is passed if the circle has a green fill. The second subtest,
to the top right, is passed if the circle has a green stroke. The third subtest shows a rectangle
with a gradient fill, which has three stops. The subtest is passed if central stop is green,
fading off to blue to the left and pale yellow to the right.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prop-01-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">
<defs>
<linearGradient id="grad" color="green">
<stop offset="5%" stop-color="#60F"/>
<stop offset="50%" stop-color="currentColor"/>
<stop offset="95%" stop-color="#FF6"/>
</linearGradient>
</defs>
<g color="green">
<g color="inherit" fill="none" stroke="none">
<!-- inherit to check the property value, not the string, is being used -->
<circle cx="130" cy="80" r="60" fill="currentColor"/>
<circle cx="350" cy="80" r="60" stroke="currentColor" stroke-width="4"/>
</g>
</g>
<g color="blue">
<g color="inherit" fill="none" stroke="none">
<!-- blue color used to check color being scoped and inherited correctly -->
<rect x="60" y="215" width="360" height="80" fill="url(#grad)"/>
</g>
</g>
<g font-size="30" fill="black">
<text x="120" y="170">fill</text>
<text x="310" y="170">stroke</text>
<text x="180" y="205">stop-color</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>

After

Width:  |  Height:  |  Size: 4 KiB

View file

@ -0,0 +1,113 @@
<svg version="1.1" baseProfile="full" 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.9 $" testname="$RCSfile: color-prop-02-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
Tests if the color datatype is supported. There are multiple syntaxes for
specifying the same color, such as #37F and #3377FF. This test is focussed on the
X11 color names, which are not part of the tiny profile.
Each group of circles uses four forms - 6-digit hex, rbg() integer form, rgb() percentage form,
and named ('X11') colors. It does not use 3-digit hex, because the colors used in this test
cannot be represented in three digit form.
</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>
For each of the nine groups of circles shown here, all circles must
be identical in color, and the same color as in the reference image.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prop-02-f.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">
<!-- groups of five colors -->
<g>
<circle cx="75" cy="40" r="20" fill="crimson"/>
<circle cx="115" cy="40" r="20" fill="#DC143C"/>
<circle cx="75" cy="80" r="20" fill="rgb(220,20,60)"/>
<circle cx="115" cy="80" r="20" fill="rgb(86.274509803921568627450980392157%,7.8431372549019607843137254901961%,23.529411764705882352941176470588%)"/>
</g>
<g>
<circle cx="200" cy="40" r="20" fill="palegreen"/>
<circle cx="240" cy="40" r="20" fill="#98FB98"/>
<circle cx="200" cy="80" r="20" fill="rgb(152, 251, 152)"/>
<circle cx="240" cy="80" r="20" fill="rgb(59.60784313725490196078431372549%,98.431372549019607843137254901961%,59.60784313725490196078431372549%)"/>
</g>
<g>
<circle cx="325" cy="40" r="20" fill="royalblue"/>
<circle cx="365" cy="40" r="20" fill="#4169E1"/>
<circle cx="325" cy="80" r="20" fill="rgb(65, 105, 225)"/>
<circle cx="365" cy="80" r="20" fill="rgb(25.490196078431372549019607843137%,41.176470588235294117647058823529%,88.235294117647058823529411764706%)"/>
</g>
<g>
<circle cx="75" cy="135" r="20" fill="firebrick"/>
<circle cx="115" cy="135" r="20" fill="#B22222"/>
<circle cx="75" cy="175" r="20" fill="rgb(178,34,34)"/>
<circle cx="115" cy="175" r="20" fill="rgb(69.803921568627450980392156862745%,13.333333333333333333333333333333%,13.333333333333333333333333333333%)"/>
</g>
<g>
<circle cx="200" cy="135" r="20" fill="seagreen"/>
<circle cx="240" cy="135" r="20" fill="#2E8B57"/>
<circle cx="200" cy="175" r="20" fill="rgb(46, 139, 87)"/>
<circle cx="240" cy="175" r="20" fill="rgb(18.039215686274509803921568627451%,54.509803921568627450980392156863%,34.117647058823529411764705882353%)"/>
</g>
<g>
<circle cx="325" cy="135" r="20" fill="mediumblue"/>
<circle cx="365" cy="135" r="20" fill="#0000CD"/>
<circle cx="325" cy="175" r="20" fill="rgb(0, 0, 205)"/>
<circle cx="365" cy="175" r="20" fill="rgb(0%,0%,80.39215686274509803921568627451%)"/>
</g>
<g>
<circle cx="75" cy="230" r="20" fill="indianred"/>
<circle cx="115" cy="230" r="20" fill="#CD5C5C"/>
<circle cx="75" cy="270" r="20" fill="rgb(205, 92, 92)"/>
<circle cx="115" cy="270" r="20" fill="rgb(80.39215686274509803921568627451%,36.078431372549019607843137254902%,36.078431372549019607843137254902%)"/>
</g>
<g>
<circle cx="200" cy="230" r="20" fill="lawngreen"/>
<circle cx="240" cy="230" r="20" fill="#7CFC00"/>
<circle cx="200" cy="270" r="20" fill="rgb(124, 252, 0)"/>
<circle cx="240" cy="270" r="20" fill="rgb(48.627450980392156862745098039216%,98.823529411764705882352941176471%,0%)"/>
</g>
<g>
<circle cx="325" cy="230" r="20" fill="mediumturquoise"/>
<circle cx="365" cy="230" r="20" fill="#48D1CC"/>
<circle cx="325" cy="270" r="20" fill="rgb(72, 209, 204)"/>
<circle cx="365" cy="270" r="20" fill="rgb(28.235294117647058823529411764706%,81.960784313725490196078431372549%,80%)"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.9 $</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>

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -0,0 +1,109 @@
<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.9 $" testname="$RCSfile: color-prop-03-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
Tests if the color datatype is supported. There are multiple syntaxes for
specifying the same color, such as #37F and #3377FF.
For each of the six groups shown here,
each of the circles in the group uses one of the syntactical forms
</p>
<p>
The first row uses five forms - 3-digit hex, 6-digit hex, rbg() integer form, rgb() percentage form,
and the 'HTML' subset of the name ('X11') colors.
</p>
<p>
The second row uses only four forms - 3-digit hex, 6-digit hex, rbg() integer form, rgb() percentage form -
as there are no HTML or X11 names for those colors.
</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>
For each of the six groups of circles shown here, all circles must
be identical in color, and the same color as in the reference image.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prop-03-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">
<!-- groups of five colors -->
<g>
<circle cx="75" cy="40" r="20" fill="#f00"/>
<circle cx="115" cy="40" r="20" fill="#ff0000"/>
<circle cx="75" cy="80" r="20" fill="rgb(255,0,0)"/>
<circle cx="115" cy="80" r="20" fill="rgb(100%,0%,0%)"/>
<polygon points="95,40 115,60 95,80 75,60" fill="red"/>
</g>
<g>
<circle cx="200" cy="40" r="20" fill="#0f0"/>
<circle cx="240" cy="40" r="20" fill="#00ff00"/>
<circle cx="200" cy="80" r="20" fill="rgb(0,255,0)"/>
<circle cx="240" cy="80" r="20" fill="rgb(0%,100%,0%)"/>
<!-- 'lime' (full intensity green) NOT 'green' (half intensity green) -->
<polygon points="220,40 240,60 220,80 200,60" fill="lime"/>
</g>
<g>
<circle cx="325" cy="40" r="20" fill="#00f"/>
<circle cx="365" cy="40" r="20" fill="#0000ff"/>
<circle cx="325" cy="80" r="20" fill="rgb(0,0,255)"/>
<circle cx="365" cy="80" r="20" fill="rgb(0%,0%,100%)"/>
<polygon points="345,40 365,60 345,80 325,60" fill="blue"/>
</g>
<!-- no names for three digit colors except for 00 and ff -->
<!-- 11=17 22=34 33=51 44=68 55=85 66=102 77=119
88=136 99=153 aa=170 bb=187 cc=204 dd=221 ee=238 -->
<g>
<circle cx="75" cy="135" r="20" fill="#a01"/>
<circle cx="115" cy="135" r="20" fill="#aa0011"/>
<circle cx="75" cy="175" r="20" fill="rgb(170,0,17)"/>
<circle cx="115" cy="175" r="20" fill="rgb(66.667%,0%,6.667%)"/>
</g>
<g>
<circle cx="200" cy="135" r="20" fill="#3b3"/>
<circle cx="240" cy="135" r="20" fill="#33bb33"/>
<circle cx="200" cy="175" r="20" fill="rgb(51,187,51)"/>
<circle cx="240" cy="175" r="20" fill="rgb(20%,73.333%,20%)"/>
</g>
<g>
<circle cx="325" cy="135" r="20" fill="#57e"/>
<circle cx="365" cy="135" r="20" fill="#5577ee"/>
<circle cx="325" cy="175" r="20" fill="rgb(85,119,238)"/>
<circle cx="365" cy="175" r="20" fill="rgb(33.333%,46.666%,93.333%)"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.9 $</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>

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -0,0 +1,96 @@
<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="[reviewer]" author="CL" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: color-prop-04-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
This tests the 'system' colors.
</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>
This test has no specific pass criteria, except that no error must be indicated.
</p>
<p>
The colors on your screen might not match the reference
image at all, but they should at minimum be legible and should
preferably resemble the colors used on menus and other user interface
elements on your computer, pda or phone.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prop-04-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 id="Scene_1" transform="translate(240, 180)">
<rect x="-230" y="-170" width="460" height="300" fill="Background"/>
<rect x="-220" y="-160" width="440" height="280" fill="AppWorkspace"/>
<rect x="-152" y="-108" width="317" height="221" fill="Window"/>
<rect x="-152" y="-108" width="317" height="221" fill="none" stroke-width="3" stroke="WindowFrame"/>
<g id="contents" font-size="12" fill="WindowText">
<text x="-148" y="0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </text>
<text x="-148" y="20">Vestibulum pulvinar. Duis laoreet, nunc vitae facilisis </text>
<text x="-148" y="40">tristique, pede sem iaculis mi, non consectetuer lorem </text>
<text x="-148" y="60">libero et est. Donec imperdiet purus sed odio. Duis </text>
<text x="-148" y="80">venenatis tortor eu lectus. Suspendisse sed metus at </text>
<text x="-148" y="100">metus viverra ultricies. Mauris porttitor, justo a vulputate</text>
</g>
<g id="dropdown" transform="translate(2,0)">
<rect x="-150" y="-107" width="118" height="190" fill="ThreeDFace" id="drop-bg"/>
<rect x="-143" y="0" width="102" height="34" fill="Menu"/>
<text x="-138" y="24" font-size="20" font-weight="bold" fill="MenuText">Load</text>
<rect x="-143" y="40" width="102" height="34" fill="Menu"/>
<text x="-138" y="64" font-size="20" font-weight="bold" fill="MenuText">Save</text>
<path d="M-149 83 h114 v-94" stroke-width="4" stroke="ThreeDDarkShadow" fill="none"/>
<path d="M-149 83 v-94 h114" stroke-width="4" stroke="ThreeDLightShadow" fill="none"/>
</g>
<g id="menubar">
<rect x="-148" y="-62" width="310" height="46" fill="ThreeDLightShadow"/>
<path d="M152 -52 l 10 -10 v 46 h -311 l10-10 z" fill="ThreeDDarkShadow"/>
<rect x="-144" y="-58" width="302" height="37" fill="ThreeDFace"/>
<text x="-141" y="-32" font-size="20" font-weight="bold" fill="HighlightText">File</text>
<text x="-90" y="-32" font-size="20" font-weight="bold" fill="MenuText">Edit</text>
</g>
<g id="windowdecoration">
<rect x="-149" y="-106" width="311" height="42" fill="ActiveCaption" stroke-width="4" stroke="ActiveBorder" id="windowbar"/>
<text x="5" y="-78" text-anchor="middle" font-size="24" font-weight="bold" fill="CaptionText">Lorem</text>
<g id="button">
<rect x="120" y="-99" rx="8" width="26" height="26" fill="ButtonFace"/>
<rect x="120" y="-99" rx="8" width="24" height="24" fill="ButtonHighlight"/>
<rect x="122" y="-97" rx="8" width="24" height="24" fill="ButtonShadow"/>
<rect x="122" y="-97" rx="8" width="22" height="22" fill="ButtonFace"/>
</g>
</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>

After

Width:  |  Height:  |  Size: 5.7 KiB

View file

@ -0,0 +1,60 @@
<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="CN" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: color-prop-05-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
Tests the color that is used for the currentColor value in the fill
attribute when more than one color is specified.
</p>
<p>
This is illustrated using a single rectangle that is a child of a group
element. A fill is specified for the group element but not the
rectangle. Colour is specifed for the rectangle and the group element.
</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 the user agent renders the rectangle with a green
fill.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: color-prop-05-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 fill="currentColor" color="lime">
<rect x="120" y="60" width="150" height="150" color="red"/>
</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>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,79 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="ED" status="issue"
version="$Revision: 1.6 $" testname="$RCSfile: conform-viewers-02-f.svg,v $">
<!--
XXX The issue with this test is that data: URIs shouldn't contain
gzipped content, since there's no way to identify the
content encoding in data: URIs. See:
* http://www.w3.org/mid/20101217190531.GB31176@wok.mcc.id.au
* http://www.w3.org/mid/1801756505.20110119200752@w3.org
-->
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers">
<p>
Test that the viewer can read gzipped content in data uri.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Open the test in any SVG player.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if you see a star in the middle of the test frame.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: conform-viewers-02-f.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 x="240" y="40" text-anchor="middle">Test data uri with svgz content</text>
<text fill="black" x="50%" y="200" text-anchor="middle">FAILED</text>
<image xlink:href="data:image/svg+xml;base64,H4sICA/BlksCA3N0YXIuc3ZnAMVUwW7bMAw9d8D+QVAvLeDIkiha0mDn0A7oZcMO
Wz/Aa+zUgGsHttq0+/pRTtwkwLBuwIAhcPRIihT5RCofn9bsqam2V/1zwSWTTGfT
x9nzQ9uNBb8PYfMhTbfbrdiC6Id1qqWUKfnx5ft3jOWrqh4nRLhu2lANrFkV/Hv7
OPC9Plqqm/JxHJuyuyIDG8PqY/XUlKHpu4IrkfF0jpHugsxi23RVOdwM5aqpujCF
bteKs/Ve820ou7Huh4eCP5RhaJ4vQKDJtLOQSPodpIWzVmgrHUGPWhhvrLmkQlXB
wdM+q4zh7CWKTgqtPABZdRRRAJmRrCQaBULazLhDFrddE4isx7Eavm7Ku+pLdztW
fDlXP4Z+w+Lf4q5v+6Hg53Vd852mp/1NeCH2BQXs63qsAgmvhPyx+8FZTc5nZ3l6
yt7MaRTL9oTTIXJKkUELjd4hvFXbby5gIYWVkkh3iRaZMtZpopw4M2i0NQnZncqk
8okymROgVZYstEbhNRpPN3JHvQgS6AqM9iRSdaA0OTnLWX1qrI+NO8LPfkmY/Aty
5Rvk7jv1lMfdOKSv85CvWThwM8G2DNXFAoynZqNuJFKoJS1ljpfzrOSbMtwfO77V
1YhOKGk8Rct8JjJEE7ua7vQzAyIeaKA/Me19AggRUf+D1RPSCRgXEZIV3KyDycOZ
BCTOvjoi0KRTPiJFScCE9mf8oLuYJpdaZWgvzuMDcHkY639UFh3R7g+glv0/dZ7W
dJRRe8jIoErAWfIzBhN6aCJSNjEO2TXpdGK8ZsYqWpGh3K3XDGkqJg1ktBqGGHcq
8kZPeyBmh5IiYhYj7k+Zc8rTNa15fJ2XPwFubI+E2wUAAA==" width="200" height="200" x="130" y="70"/>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4 KiB

View file

@ -0,0 +1,123 @@
<svg 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" onload="test()">
<!--======================================================================-->
<!--= Copyright 2008 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="DS" author="ED" status="accepted"
version="$Revision: 1.3 $" testname="$RCSfile: conform-viewers-03-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers">
<p>
This test checks that namespace prefixes are handled correctly.
</p>
<p>
First, a random 20-character string is generated. The string only contains characters that are valid NCName letters.
This string is then used as a custom prefix for an 'href' attribute in the XLink namespace.
An 'image' element is created and two image references are added, one is in the "http://www.this.is.not.an/xlink" namespace,
and one is in the XLink namespace. Only the attribute with the 20-character prefix is actually in the XLink namespace,
which means that that link should be the one that is used when rendering the 'image' element. This first subtest is
using the setAttributeNS method.
</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 testcase has passed if after the script execution has taken place these conditions are met:
</p>
<ul>
<li>There is one pink image visible.</li>
<li>The image doesn't show the word "Fail"</li>
<li>The status message says "No exceptions"</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: conform-viewers-03-f.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">
<script>
<![CDATA[
/**
* Generates a 20 character string consisting of characters from the inchars parameter.
* The output string will have no repetitions of a character.
*/
function generatePrefix(inchars)
{
var ncNameStart = "_abcdefghijklmnopqrstuvwxyzåäöQWERTYUIOPÅÄÖLKJHGFDSAZXCVBNM";
var prefix = ncNameStart[Math.floor(Math.random()*ncNameStart.length)];
var leftchars = inchars;
var char;
for(var i = 0; i < 19; i++)
{
char = leftchars[Math.floor(Math.random()*leftchars.length)];
leftchars = leftchars.replace(char, '');
prefix += char;
}
return prefix;
}
/**
* The main body of the test.
*/
function test()
{
var letters = "abcdefghijklmnopqrstuvwxyzåäö_-.QWERTYUIOPÅÄÖLKJHGFDSAZXCVBNM0123456789";
var prefix = generatePrefix(letters);
var g = document.getElementById("test-body-content");
var t = document.getElementById("prefix");
t.textContent = prefix;
var elm = document.createElementNS("http://www.w3.org/2000/svg", "image");
elm.setAttributeNS(null, "width", 100);
elm.setAttributeNS(null, "height", 100);
elm.setAttributeNS(null, "x", 100);
elm.setAttributeNS(null, "y", 100);
elm.setAttributeNS("http://www.w3.org/1999/xlink", prefix+":href", "../images/pinksquidj.png");
elm.setAttributeNS("http://www.this.is.not.an/xlink", "xlink:href", "../images/purplesquidj.png");
g.appendChild(elm);
}
]]>
</script>
<text y="100" x="50" display="none">
Generated prefix 1: <tspan id="prefix">...</tspan>
</text>
<text y="220" x="50">
Status: <tspan id="status">No exceptions.</tspan>
</text>
<g xmlns:xlink="http://example.net/bar">
<image id="image2" width="100" height="100" x="210" y="100" xlink:href="../images/purplesquidj.png"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.3 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 5.4 KiB

View file

@ -0,0 +1,83 @@
<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="DJ" author="CN" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: coords-coord-01-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InitialCoordinateSystem">
<p>
Tests the default initial coordinate system used by renderer.
</p>
<p>Should be 0,0 if not specified. This is illustrated by comparing blue boxes that are
missing a coordinate or all coordinates with yellow boxes that have the
correct coordinates specified.
</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 there are three blue boxes,
with small yellow boxes rendered on top of them. These boxes should be
placed along the origin, and x and y axis.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-coord-01-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">
<!-- Content of Test Case follows. -->
<g stroke="black" stroke-width="5">
<line x1="0" y1="0" x2="150" y2="0"/>
<line x1="0" y1="0" x2="0" y2="150"/>
</g>
<g fill="blue">
<rect width="15" height="15"/>
<rect x="150" width="15" height="15"/>
<rect y="150" width="15" height="15"/>
</g>
<g fill="yellow">
<rect x="0" y="0" width="10" height="10"/>
<rect x="150" y="0" width="10" height="10"/>
<rect x="0" y="150" width="10" height="10"/>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1,82 @@
<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="DJ" author="CN" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: coords-coord-02-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InitialCoordinateSystem">
<p>
Tests the default units used for the initial coordinate system. This is
illustrated by comparing blue boxes that have no units specified for their
coordinates, with yellow boxes that have px units specified for their
coordinates.
</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>
This test should produce three blue boxes, with small yellow
boxes rendered on top of them. These boxes should be placed along the
origin, x and y axis.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-coord-02-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">
<!-- Content of Test Case follows. -->
<g stroke="black" stroke-width="5">
<line x1="0px" y1="0px" x2="150px" y2="0px"/>
<line x1="0px" y1="0px" x2="0px" y2="150px"/>
</g>
<g fill="blue">
<rect x="0" y="0" width="15" height="15"/>
<rect x="150" y="0" width="15" height="15"/>
<rect x="0" y="150" width="15" height="15"/>
</g>
<g fill="yellow">
<rect x="0px" y="0px" width="10" height="10"/>
<rect x="150px" y="0px" width="10" height="10"/>
<rect x="0px" y="150px" width="10" height="10"/>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1,115 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="CM" author="ED" status="accepted"
version="$Revision: 1.8 $" testname="$RCSfile: coords-dom-01-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#DOMInterfaces">
<p>
Tests the liveness of SVGTransform.matrix.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Load the svg, you should see a green circle.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if:
</p>
<ul>
<li>There is no red visible</li>
<li>There is a green circle visible</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-dom-01-f.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(240 180)">
<g id="reference">
<circle r="40" fill="red"/>
</g>
<g id="g" transform="translate(20 20)">
<circle id="c" r="41" fill="blue"/>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var eps = 1 / 65535; // 16.16 fixpoint epsilon
var passed = false;
function isequal( value, expected, epsilon )
{
return(Math.abs(value - expected) < epsilon);
}
try
{
var g = document.getElementById("g");
var c = document.getElementById("c");
var tfm = g.transform.baseVal.getItem(0);
var mtx = tfm.matrix;
tfm.setTranslate(300,200);
if(tfm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE &&
isequal(mtx.e, 300, eps) && isequal(mtx.f, 200, eps))
{
tfm.setScale(4,4);
if(tfm.type == SVGTransform.SVG_TRANSFORM_SCALE &&
isequal(mtx.a, 4, eps) && isequal(mtx.d, 4, eps))
{
tfm.setRotate(90,0,0);
if(tfm.type == SVGTransform.SVG_TRANSFORM_ROTATE &&
isequal(mtx.a, Math.cos(Math.PI/2), eps) && isequal(mtx.b, Math.sin(Math.PI/2), eps) &&
isequal(mtx.c, -Math.sin(Math.PI/2), eps) && isequal(mtx.d, Math.cos(Math.PI/2), eps) &&
isequal(mtx.e, 0, eps) && isequal(mtx.f, 0, eps))
{
passed = true;
}
}
}
}
catch(e) {}
if(passed)
{
c.setAttribute("fill", "lime");
}
else
{
c.setAttribute("fill", "red");
}
]]></script>
</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 xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.2 KiB

View file

@ -0,0 +1,96 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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="CM" author="ED" status="accepted"
version="$Revision: 1.9 $" testname="$RCSfile: coords-dom-02-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransform">
<p>
Tests the liveness of SVGTransform.matrix, that the SVGTransform object is updated when the SVGTransform.matrix object is changed.
</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 has passed if:
</p>
<ul>
<li>There is no red visible</li>
<li>There is a green ellipse visible</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-dom-02-f.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(220 160)">
<g id="reference">
<circle r="41" fill="red" transform="translate(20 20) scale(2 1)"/>
</g>
<g id="g" transform="translate(20 20)">
<circle id="c" r="41" fill="blue"/>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var passed = false;
try
{
var g = document.getElementById("g");
var c = document.getElementById("c");
var tfm = g.transform.baseVal.getItem(0);
var mtx = tfm.matrix;
mtx.a = 2;
if(tfm.type == SVGTransform.SVG_TRANSFORM_MATRIX)
{
passed = true;
}
}
catch(e) {}
if(passed)
{
c.setAttribute("fill", "lime");
}
else
{
c.setAttribute("fill", "red");
}
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.9 $</text>
</g>
<rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1,116 @@
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 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.3" reviewer="ED" author="CM" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: coords-dom-03-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransformList">
<p>
This tests that SVGTransformList.createSVGTransformFromMatrix(),
SVGSVGElement.createSVGTransformFromMatrix() and SVGTransform.setMatrix()
all do not track changes to the SVGMatrix passed to them.
</p>
<p>
After loading the test, three rectangles will be presented. The
upper rectangle indicates the result of testing whether
SVGTransformList.createSVGTransformFromMatrix() behaved correctly,
the middle rectangle indicates the status for SVGSVGElement.createSVGTransformFromMatrix(),
and the bottom rectangle for SVGTransform.setMatrix().
</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 the three rectangles are green.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-dom-03-f.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 x='10' y='30' font-size='14'>Test that some methods taking an SVGMatrix take a copy of it</text>
<rect id='r1' x='10' y='50' width='50' height='50'/>
<rect id='r2' x='10' y='110' width='50' height='50'/>
<rect id='r3' x='10' y='170' width='50' height='50'/>
<g font-size='10'>
<text x='70' y='80'>SVGTransformList.createSVGTransformFromMatrix()</text>
<text x='70' y='140'>SVGSVGElement.createSVGTransformFromMatrix()</text>
<text x='70' y='200'>SVGTransform.setMatrix()</text>
</g>
<g id='g' transform='scale(5)'/>
<script><![CDATA[
var svg = document.documentElement,
g = document.getElementById('g'),
r1 = document.getElementById('r1'),
r2 = document.getElementById('r2'),
r3 = document.getElementById('r3');
var m1 = svg.createSVGMatrix(),
m2 = svg.createSVGMatrix(),
m3 = svg.createSVGMatrix();
var t;
m1.a = 3; m1.b = 0; m1.c = 0; m1.d = 1; m1.e = 0; m1.f = 0;
m2.a = 3; m2.b = 0; m2.c = 0; m2.d = 1; m2.e = 0; m2.f = 0;
m3.a = 3; m3.b = 0; m3.c = 0; m3.d = 1; m3.e = 0; m3.f = 0;
try {
t = g.transform.baseVal.createSVGTransformFromMatrix(m1);
m1.a = 2;
r1.setAttribute('fill', t.matrix != m1 && t.matrix.a == 3 ? 'lime' : 'red');
} catch (e) {
}
try {
t = svg.createSVGTransformFromMatrix(m2);
m2.a = 2;
r2.setAttribute('fill', t.matrix != m2 && t.matrix.a == 3 ? 'lime' : 'red');
} catch (e) {
}
try {
t = g.transform.baseVal.getItem(0);
t.setMatrix(m3);
m3.a = 2;
r3.setAttribute('fill', t.matrix != m3 && t.matrix.a == 3 ? 'lime' : 'red');
} catch (e) {
}
]]></script>
</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="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -0,0 +1,166 @@
<svg 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" onload="test()">
<!--======================================================================-->
<!--= Copyright 2008 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="ED" status="accepted"
version="$Revision: 1.5 $" testname="$RCSfile: coords-dom-04-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransformList">
<p>
The test checks the SVGTransformList.consolidate method.
</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>
There must be 13 green rectangles visible.
The text next to the first rectangle must say "Scripting enabled".
The other 12 lines must each say "Passed subtest #n" where n is the subtest number 1..12.
If anything red shows, the test has failed.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-dom-04-f.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">
<defs>
<style>
#test-body-content rect { stroke: black; }
</style>
<script type="text/ecmascript"><![CDATA[
var pos = { "x": 20, "y": 40 };
var subtestCounter = 1;
var passed = true;
function toString(m)
{
var decimals = 0;
return m.a.toFixed(decimals) + "," +
m.b.toFixed(decimals) + "," +
m.c.toFixed(decimals) + "," +
m.d.toFixed(decimals) + "," +
m.e.toFixed(decimals) + "," +
m.f.toFixed(decimals);
}
function referenceEqual(m1,ref,eps)
{
return (Math.abs(m1.a-ref[0]) < eps &&
Math.abs(m1.b-ref[1]) < eps &&
Math.abs(m1.c-ref[2]) < eps &&
Math.abs(m1.d-ref[3]) < eps &&
Math.abs(m1.e-ref[4]) < eps &&
Math.abs(m1.f-ref[5]) < eps);
}
function assertEquals(m, ref, eps)
{
var result = document.createElementNS("http://www.w3.org/2000/svg", "text");
var resultrect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
result.setAttribute("x", pos.x);
result.setAttribute("y", pos.y);
resultrect.setAttribute("fill", "lime");
resultrect.setAttribute("width", 15);
resultrect.setAttribute("height", 15);
resultrect.setAttribute("y", pos.y-15);
if(referenceEqual(m, ref, eps))
{
result.textContent = "Passed subtest #" + subtestCounter;
}
else
{
passed = false;
result.textContent = "Failed subtest #" + subtestCounter + ". Expected " + ref + " but got " + toString(m);
}
pos.y += 20;
subtestCounter++;
var results = document.getElementById("subteststatus");
results.appendChild(resultrect)
results.appendChild(result);
}
function test()
{
eps = 0.005; // "close enough"
r = document.getElementById("r");
t1 = r.transform.baseVal.getItem(0);
t2 = r.transform.baseVal.getItem(1);
// check that matrices are as specified in the markup
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
// consolidate
tfm = r.transform.baseVal.consolidate();
// check that the consolidation is ok
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that t1 and t2 were not affected by the consolidation
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
// check that modifying t1 has no effect on the consolidated transform
t1.setTranslate(10,200);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying t2 has no effect on the consolidated transform
t2.setRotate(-90, 0, 0);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying the consolidated transform has no effect on the t1 and t2 transforms
tfm.matrix.f = 400;
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 400], eps);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
document.getElementById("status").setAttributeNS(null, "fill", passed ? "lime" : "red");
document.getElementById("scriptstatus").textContent = "Scripting enabled";
}
]]></script>
</defs>
<g transform="translate(20 -10)">
<g id="subteststatus" transform="translate(0,40)">
<rect id="status" y="5" width="15" height="15" fill="red"/>
<text id="scriptstatus" y="20" x="20" >Scripting disabled</text>
</g>
<polyline id="r" fill="none" stroke="green" display="none" transform="translate(10 10) rotate(90)" points="0 0 30 40 80 -20" stroke-width="10"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.5 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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>

After

Width:  |  Height:  |  Size: 6.2 KiB

View file

@ -0,0 +1,239 @@
<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="Vincent Hardy" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: coords-trans-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
This test verifies the implementation of transforms. It tests elementary transforms
and transform nesting.
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
</p>
<p>
The test uses the rect element, the fill color (solid primary colors) and transforms.
</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 rendered picture should match the reference image exactly except for variations in the labeling text.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-trans-01-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">
<g transform="translate(0, 30)" font-size="13">
<!-- ====================================================================== -->
<!-- First, draw a test grid ============================================== -->
<!-- ====================================================================== -->
<g id="test-grid" stroke="#cccccc" stroke-width="1">
<line x1="10" y1="10.5" x2="470" y2="10.5"/>
<line x1="10" y1="20.5" x2="470" y2="20.5"/>
<line x1="10" y1="30.5" x2="470" y2="30.5"/>
<line x1="10" y1="40.5" x2="470" y2="40.5"/>
<line x1="10" y1="50.5" x2="470" y2="50.5"/>
<line x1="10" y1="60.5" x2="470" y2="60.5"/>
<line x1="10" y1="70.5" x2="470" y2="70.5"/>
<line x1="10" y1="80.5" x2="470" y2="80.5"/>
<line x1="10" y1="90.5" x2="470" y2="90.5"/>
<line x1="10" y1="100.5" x2="470" y2="100.5"/>
<line x1="10" y1="110.5" x2="470" y2="110.5"/>
<line x1="10" y1="120.5" x2="470" y2="120.5"/>
<line x1="10" y1="130.5" x2="470" y2="130.5"/>
<line x1="10" y1="140.5" x2="470" y2="140.5"/>
<line x1="10" y1="150.5" x2="470" y2="150.5"/>
<line x1="10" y1="160.5" x2="470" y2="160.5"/>
<line x1="10" y1="170.5" x2="470" y2="170.5"/>
<line x1="10" y1="180.5" x2="470" y2="180.5"/>
<line x1="10" y1="190.5" x2="470" y2="190.5"/>
<line x1="10" y1="200.5" x2="470" y2="200.5"/>
<line x1="10" y1="210.5" x2="470" y2="210.5"/>
<line x1="10" y1="220.5" x2="470" y2="220.5"/>
<line x1="10" y1="230.5" x2="470" y2="230.5"/>
<line x1="10" y1="240.5" x2="470" y2="240.5"/>
<line x1="10" y1="250.5" x2="470" y2="250.5"/>
<line x1="10" y1="260.5" x2="470" y2="260.5"/>
<line y1="10" x1="10.5" y2="260.5" x2="10.5"/>
<line y1="10" x1="20.5" y2="260.5" x2="20.5"/>
<line y1="10" x1="30.5" y2="260.5" x2="30.5"/>
<line y1="10" x1="40.5" y2="260.5" x2="40.5"/>
<line y1="10" x1="50.5" y2="260.5" x2="50.5"/>
<line y1="10" x1="60.5" y2="260.5" x2="60.5"/>
<line y1="10" x1="70.5" y2="260.5" x2="70.5"/>
<line y1="10" x1="80.5" y2="260.5" x2="80.5"/>
<line y1="10" x1="90.5" y2="260.5" x2="90.5"/>
<line y1="10" x1="100.5" y2="260.5" x2="100.5"/>
<line y1="10" x1="110.5" y2="260.5" x2="110.5"/>
<line y1="10" x1="120.5" y2="260.5" x2="120.5"/>
<line y1="10" x1="130.5" y2="260.5" x2="130.5"/>
<line y1="10" x1="140.5" y2="260.5" x2="140.5"/>
<line y1="10" x1="150.5" y2="260.5" x2="150.5"/>
<line y1="10" x1="160.5" y2="260.5" x2="160.5"/>
<line y1="10" x1="170.5" y2="260.5" x2="170.5"/>
<line y1="10" x1="180.5" y2="260.5" x2="180.5"/>
<line y1="10" x1="190.5" y2="260.5" x2="190.5"/>
<line y1="10" x1="200.5" y2="260.5" x2="200.5"/>
<line y1="10" x1="210.5" y2="260.5" x2="210.5"/>
<line y1="10" x1="220.5" y2="260.5" x2="220.5"/>
<line y1="10" x1="230.5" y2="260.5" x2="230.5"/>
<line y1="10" x1="240.5" y2="260.5" x2="240.5"/>
<line y1="10" x1="250.5" y2="260.5" x2="250.5"/>
<line y1="10" x1="260.5" y2="260.5" x2="260.5"/>
<line y1="10" x1="270.5" y2="260.5" x2="270.5"/>
<line y1="10" x1="280.5" y2="260.5" x2="280.5"/>
<line y1="10" x1="290.5" y2="260.5" x2="290.5"/>
<line y1="10" x1="300.5" y2="260.5" x2="300.5"/>
<line y1="10" x1="310.5" y2="260.5" x2="310.5"/>
<line y1="10" x1="320.5" y2="260.5" x2="320.5"/>
<line y1="10" x1="330.5" y2="260.5" x2="330.5"/>
<line y1="10" x1="340.5" y2="260.5" x2="340.5"/>
<line y1="10" x1="350.5" y2="260.5" x2="350.5"/>
<line y1="10" x1="360.5" y2="260.5" x2="360.5"/>
<line y1="10" x1="370.5" y2="260.5" x2="370.5"/>
<line y1="10" x1="380.5" y2="260.5" x2="380.5"/>
<line y1="10" x1="390.5" y2="260.5" x2="390.5"/>
<line y1="10" x1="400.5" y2="260.5" x2="400.5"/>
<line y1="10" x1="410.5" y2="260.5" x2="410.5"/>
<line y1="10" x1="420.5" y2="260.5" x2="420.5"/>
<line y1="10" x1="430.5" y2="260.5" x2="430.5"/>
<line y1="10" x1="440.5" y2="260.5" x2="440.5"/>
<line y1="10" x1="450.5" y2="260.5" x2="450.5"/>
<line y1="10" x1="460.5" y2="260.5" x2="460.5"/>
<line y1="10" x1="470.5" y2="260.5" x2="470.5"/>
</g>
<!-- ====================================================================== -->
<!-- Now, test elementary transforms. For each transform, 3 markers are -->
<!-- placed where the user space is expected after transformations for the -->
<!-- origin (black) and the points in (20, 0) (blue) and (0, 20) (red). -->
<!-- Then, a blue line going from (0, 0) to (20, 0) is drawn and a red line -->
<!-- going from (0, 0) to (0, 20), after applying the elementary -->
<!-- transformation. If the test succeeds, the red line should join the -->
<!-- black marker to the red marker and the blue line the black marker to -->
<!-- the blue marker. -->
<!-- ====================================================================== -->
<g id="elementary-transforms-test" transform="translate(0, 10)">
<g id="elementary-transforms">
<!-- Translate -->
<g transform="translate(50, 50)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Rotate -90 deg about (150, 70) -->
<g transform="translate(150, 70) rotate(-90)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Skew X -->
<g transform="translate(250, 50) skewX(45)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Skew Y -->
<g transform="translate(350, 50) skewY(45)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Scale 2 -->
<g transform="translate(210, 120) scale(2)">
<rect x="0" y="0" width="20" height="1" fill="blue"/>
<rect x="0" y="0" width="1" height="20" fill="red"/>
</g>
</g>
<!-- elementary-transforms -->
<!-- Draw all the markers -->
<g id="elementary-transforms-test-markers">
<!-- Translate -->
<text x="40" y="40">translate (50, 50)</text>
<rect x="48" y="48" width="5" height="5" fill="black"/>
<rect x="68" y="48" width="5" height="5" fill="blue"/>
<rect x="48" y="68" width="5" height="5" fill="red"/>
<!-- Rotate -90 deg about (150, 70) -->
<text x="140" y="40">rotate(-90)</text>
<rect x="148" y="68" width="5" height="5" fill="black"/>
<rect x="148" y="48" width="5" height="5" fill="blue"/>
<rect x="168" y="68" width="5" height="5" fill="red"/>
<!-- Skew X -->
<text x="240" y="40">skew x (45)</text>
<rect x="248" y="48" width="5" height="5" fill="black"/>
<rect x="268" y="48" width="5" height="5" fill="blue"/>
<rect x="268" y="68" width="5" height="5" fill="red"/>
<!-- Skew Y -->
<text x="340" y="40">skew y (45)</text>
<rect x="348" y="48" width="5" height="5" fill="black"/>
<rect x="368" y="68" width="5" height="5" fill="blue"/>
<rect x="348" y="68" width="5" height="5" fill="red"/>
<!-- Scale 2 -->
<text x="200" y="110">scale (2)</text>
<rect x="208" y="118" width="5" height="5" fill="black"/>
<rect x="248" y="118" width="5" height="5" fill="blue"/>
<rect x="208" y="158" width="5" height="5" fill="red"/>
</g>
<!-- elementary-transforms-test-markers -->
</g>
<g id="nested-transforms-test">
<g id="nested-transforms">
<!-- scale/translate in transform attribute -->
<g transform="scale(3, 2) translate(16.666667, 105)">
<rect x="0" y="0" width="20" height="1" fill="blue"/>
<rect x="0" y="0" width="0.67" height="20" fill="red"/>
</g>
<!-- scale/translate in successive elements -->
<g transform="translate(200, 0)">
<g transform="scale(3, 2)">
<g transform="translate(16.666667, 105)">
<rect x="0" y="0" width="20" height="1" fill="blue"/>
<rect x="0" y="0" width="0.67" height="20" fill="red"/>
</g>
</g>
</g>
</g>
<!-- nested-transforms -->
<g id="nested-transforms-test-markers">
<!-- scale and translate -->
<text x="40" y="200">scale(25, 95) and translate(2, 2)</text>
<rect x="48" y="208" width="5" height="5" fill="black"/>
<rect x="108" y="208" width="5" height="5" fill="blue"/>
<rect x="48" y="248" width="5" height="5" fill="red"/>
<!-- scale then translate -->
<text x="240" y="200">scale(25, 95) then translate(2, 2)</text>
<rect x="248" y="208" width="5" height="5" fill="black"/>
<rect x="308" y="208" width="5" height="5" fill="blue"/>
<rect x="248" y="248" width="5" height="5" fill="red"/>
</g>
<!-- nested-transforms-test-markers -->
</g>
<!-- nested-transforms test -->
</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>

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,176 @@
<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="Vincent Hardy" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: coords-trans-02-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
This test verifies the implementation of transforms. It tests elementary transforms
and transform nesting.
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
</p>
<p>
The test uses the rect element, the fill color (solid primary colors) and transforms.
</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 rendered picture should match the reference image exactly except for variations in the labeling text.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-trans-02-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, 30)" font-size="12">
<!-- ====================================================================== -->
<!-- First, draw a test grid ============================================== -->
<!-- ====================================================================== -->
<!--g id="test-grid" stroke="#cccccc" stroke-width="1" >
<line x1="10" y1="10.5" x2="470" y2="10.5"/>
<line x1="10" y1="20.5" x2="470" y2="20.5"/>
<line x1="10" y1="30.5" x2="470" y2="30.5"/>
<line x1="10" y1="40.5" x2="470" y2="40.5"/>
<line x1="10" y1="50.5" x2="470" y2="50.5"/>
<line x1="10" y1="60.5" x2="470" y2="60.5"/>
<line x1="10" y1="70.5" x2="470" y2="70.5"/>
<line x1="10" y1="80.5" x2="470" y2="80.5"/>
<line x1="10" y1="90.5" x2="470" y2="90.5"/>
<line x1="10" y1="100.5" x2="470" y2="100.5"/>
<line x1="10" y1="110.5" x2="470" y2="110.5"/>
<line x1="10" y1="120.5" x2="470" y2="120.5"/>
<line x1="10" y1="130.5" x2="470" y2="130.5"/>
<line x1="10" y1="140.5" x2="470" y2="140.5"/>
<line x1="10" y1="150.5" x2="470" y2="150.5"/>
<line x1="10" y1="160.5" x2="470" y2="160.5"/>
<line x1="10" y1="170.5" x2="470" y2="170.5"/>
<line x1="10" y1="180.5" x2="470" y2="180.5"/>
<line x1="10" y1="190.5" x2="470" y2="190.5"/>
<line x1="10" y1="200.5" x2="470" y2="200.5"/>
<line x1="10" y1="210.5" x2="470" y2="210.5"/>
<line x1="10" y1="220.5" x2="470" y2="220.5"/>
<line x1="10" y1="230.5" x2="470" y2="230.5"/>
<line x1="10" y1="240.5" x2="470" y2="240.5"/>
<line x1="10" y1="250.5" x2="470" y2="250.5"/>
<line x1="10" y1="260.5" x2="470" y2="260.5"/>
<line y1="10" x1="10.5" y2="260.5" x2="10.5"/>
<line y1="10" x1="20.5" y2="260.5" x2="20.5"/>
<line y1="10" x1="30.5" y2="260.5" x2="30.5"/>
<line y1="10" x1="40.5" y2="260.5" x2="40.5"/>
<line y1="10" x1="50.5" y2="260.5" x2="50.5"/>
<line y1="10" x1="60.5" y2="260.5" x2="60.5"/>
<line y1="10" x1="70.5" y2="260.5" x2="70.5"/>
<line y1="10" x1="80.5" y2="260.5" x2="80.5"/>
<line y1="10" x1="90.5" y2="260.5" x2="90.5"/>
<line y1="10" x1="100.5" y2="260.5" x2="100.5"/>
<line y1="10" x1="110.5" y2="260.5" x2="110.5"/>
<line y1="10" x1="120.5" y2="260.5" x2="120.5"/>
<line y1="10" x1="130.5" y2="260.5" x2="130.5"/>
<line y1="10" x1="140.5" y2="260.5" x2="140.5"/>
<line y1="10" x1="150.5" y2="260.5" x2="150.5"/>
<line y1="10" x1="160.5" y2="260.5" x2="160.5"/>
<line y1="10" x1="170.5" y2="260.5" x2="170.5"/>
<line y1="10" x1="180.5" y2="260.5" x2="180.5"/>
<line y1="10" x1="190.5" y2="260.5" x2="190.5"/>
<line y1="10" x1="200.5" y2="260.5" x2="200.5"/>
<line y1="10" x1="210.5" y2="260.5" x2="210.5"/>
<line y1="10" x1="220.5" y2="260.5" x2="220.5"/>
<line y1="10" x1="230.5" y2="260.5" x2="230.5"/>
<line y1="10" x1="240.5" y2="260.5" x2="240.5"/>
<line y1="10" x1="250.5" y2="260.5" x2="250.5"/>
<line y1="10" x1="260.5" y2="260.5" x2="260.5"/>
<line y1="10" x1="270.5" y2="260.5" x2="270.5"/>
<line y1="10" x1="280.5" y2="260.5" x2="280.5"/>
<line y1="10" x1="290.5" y2="260.5" x2="290.5"/>
<line y1="10" x1="300.5" y2="260.5" x2="300.5"/>
<line y1="10" x1="310.5" y2="260.5" x2="310.5"/>
<line y1="10" x1="320.5" y2="260.5" x2="320.5"/>
<line y1="10" x1="330.5" y2="260.5" x2="330.5"/>
<line y1="10" x1="340.5" y2="260.5" x2="340.5"/>
<line y1="10" x1="350.5" y2="260.5" x2="350.5"/>
<line y1="10" x1="360.5" y2="260.5" x2="360.5"/>
<line y1="10" x1="370.5" y2="260.5" x2="370.5"/>
<line y1="10" x1="380.5" y2="260.5" x2="380.5"/>
<line y1="10" x1="390.5" y2="260.5" x2="390.5"/>
<line y1="10" x1="400.5" y2="260.5" x2="400.5"/>
<line y1="10" x1="410.5" y2="260.5" x2="410.5"/>
<line y1="10" x1="420.5" y2="260.5" x2="420.5"/>
<line y1="10" x1="430.5" y2="260.5" x2="430.5"/>
<line y1="10" x1="440.5" y2="260.5" x2="440.5"/>
<line y1="10" x1="450.5" y2="260.5" x2="450.5"/>
<line y1="10" x1="460.5" y2="260.5" x2="460.5"/>
<line y1="10" x1="470.5" y2="260.5" x2="470.5"/>
</g-->
<!-- ====================================================================== -->
<!-- Now, test elementary transforms. For each transform, 3 markers are -->
<!-- placed where the user space is expected after transformations for the -->
<!-- origin (black) and the points in (20, 0) (blue) and (0, 20) (red). -->
<!-- Then, a blue line going from (0, 0) to (20, 0) is drawn and a red line -->
<!-- going from (0, 0) to (0, 20), after applying the elementary -->
<!-- transformation. If the test succeeds, the red line should join the -->
<!-- black marker to the red marker and the blue line the black marker to -->
<!-- the blue marker. -->
<!-- ====================================================================== -->
<g id="elementary-transforms-test" transform="translate(0, 10)">
<g id="elementary-transforms" transform="translate(-30, 0) scale(2.5, 2.5)">
<!-- Translate -->
<g transform="translate(50, 50)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Rotate -90 deg about (150, 70) -->
<g transform="translate(150, 70) rotate(-90)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
</g>
<!-- elementary-transforms -->
<!-- Draw all the markers -->
<g id="elementary-transforms-test-markers" transform="translate(-30, 0) scale(2.5, 2.5)">
<!-- Translate -->
<text x="40" y="40">translate (50, 50)</text>
<rect x="48" y="48" width="5" height="5" fill="black"/>
<rect x="68" y="48" width="5" height="5" fill="blue"/>
<rect x="48" y="68" width="5" height="5" fill="red"/>
<!-- Rotate -90 deg about (150, 70) -->
<text x="140" y="40">rotate(-90)</text>
<rect x="148" y="68" width="5" height="5" fill="black"/>
<rect x="148" y="48" width="5" height="5" fill="blue"/>
<rect x="168" y="68" width="5" height="5" fill="red"/>
</g>
<!-- elementary-transforms-test-markers -->
</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>

After

Width:  |  Height:  |  Size: 9.7 KiB

View file

@ -0,0 +1,99 @@
<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="Vincent Hardy" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: coords-trans-03-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
This test verifies the implementation of transforms. It tests elementary transforms
and transform nesting.
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
</p>
<p>
The test uses the rect element, the fill color (solid primary colors) and transforms.
</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 rendered picture should match the reference image exactly except for variations in the labeling text.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-trans-03-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, 30)" font-size="12">
<!-- ====================================================================== -->
<!-- Now, test elementary transforms. For each transform, 3 markers are -->
<!-- placed where the user space is expected after transformations for the -->
<!-- origin (black) and the points in (20, 0) (blue) and (0, 20) (red). -->
<!-- Then, a blue line going from (0, 0) to (20, 0) is drawn and a red line -->
<!-- going from (0, 0) to (0, 20), after applying the elementary -->
<!-- transformation. If the test succeeds, the red line should join the -->
<!-- black marker to the red marker and the blue line the black marker to -->
<!-- the blue marker. -->
<!-- ====================================================================== -->
<g id="elementary-transforms-test" transform="translate(0, 10)">
<g id="elementary-transforms" transform="translate(-560, 0) scale(2.5, 2.5)">
<!-- Skew X -->
<g transform="translate(250, 50) skewX(45)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
<!-- Skew Y -->
<g transform="translate(350, 50) skewY(45)">
<rect x="0" y="0" width="20" height="2" fill="blue"/>
<rect x="0" y="0" width="2" height="20" fill="red"/>
</g>
</g>
<!-- elementary-transforms -->
<!-- Draw all the markers -->
<g id="elementary-transforms-test-markers" transform="translate(-560, 0) scale(2.5, 2.5)">
<!-- Skew X -->
<text x="240" y="40">skew x (45)</text>
<rect x="248" y="48" width="5" height="5" fill="black"/>
<rect x="268" y="48" width="5" height="5" fill="blue"/>
<rect x="268" y="68" width="5" height="5" fill="red"/>
<!-- Skew Y -->
<text x="340" y="40">skew y (45)</text>
<rect x="348" y="48" width="5" height="5" fill="black"/>
<rect x="368" y="68" width="5" height="5" fill="blue"/>
<rect x="348" y="68" width="5" height="5" fill="red"/>
</g>
<!-- elementary-transforms-test-markers -->
</g>
<!-- nested-transforms test -->
</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>

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -0,0 +1,88 @@
<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="Vincent Hardy" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: coords-trans-04-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
This test verifies the implementation of transforms. It tests elementary transforms
and transform nesting.
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
</p>
<p>
The test uses the rect element, the fill color (solid primary colors) and transforms.
</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 rendered picture should match the reference image exactly except for variations in the labeling text.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-trans-04-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, 30)" font-size="12">
<!-- ====================================================================== -->
<!-- Now, test elementary transforms. For each transform, 3 markers are -->
<!-- placed where the user space is expected after transformations for the -->
<!-- origin (black) and the points in (20, 0) (blue) and (0, 20) (red). -->
<!-- Then, a blue line going from (0, 0) to (20, 0) is drawn and a red line -->
<!-- going from (0, 0) to (0, 20), after applying the elementary -->
<!-- transformation. If the test succeeds, the red line should join the -->
<!-- black marker to the red marker and the blue line the black marker to -->
<!-- the blue marker. -->
<!-- ====================================================================== -->
<g id="elementary-transforms-test">
<g id="elementary-transforms" transform="translate(60, 45) scale(2.5, 2.5)">
<!-- Scale 2 -->
<g transform="translate(40, 10) scale(2)">
<rect x="0" y="0" width="20" height="1" fill="blue"/>
<rect x="0" y="0" width="1" height="20" fill="red"/>
</g>
</g>
<!-- elementary-transforms -->
<!-- Draw all the markers -->
<g id="elementary-transforms-test-markers" transform="translate(-364, -230) scale(2.5, 2.5)">
<!-- Scale 2 -->
<text x="200" y="110">scale (2)</text>
<rect x="208" y="118" width="5" height="5" fill="black"/>
<rect x="248" y="118" width="5" height="5" fill="blue"/>
<rect x="208" y="158" width="5" height="5" fill="red"/>
</g>
<!-- elementary-transforms-test-markers -->
</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>

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -0,0 +1,88 @@
<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="Vincent Hardy" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: coords-trans-05-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
This test verifies the implementation of transforms. It tests elementary transforms
and transform nesting.
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
</p>
<p>
The test uses the rect element, the fill color (solid primary colors) and transforms.
</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 rendered picture should match the reference image exactly except for variations in the labeling text.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-trans-05-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, 30)" font-size="12">
<!-- ====================================================================== -->
<!-- Now, test elementary transforms. For each transform, 3 markers are -->
<!-- placed where the user space is expected after transformations for the -->
<!-- origin (black) and the points in (20, 0) (blue) and (0, 20) (red). -->
<!-- Then, a blue line going from (0, 0) to (20, 0) is drawn and a red line -->
<!-- going from (0, 0) to (0, 20), after applying the elementary -->
<!-- transformation. If the test succeeds, the red line should join the -->
<!-- black marker to the red marker and the blue line the black marker to -->
<!-- the blue marker. -->
<!-- ====================================================================== -->
<g id="nested-transforms-test">
<g id="nested-transforms" transform="translate(-90, -450)">
<!-- scale/translate in transform attribute -->
<g transform="scale(7.5, 5) translate(16.666667, 105)">
<rect x="0" y="0" width="20" height="1" fill="blue"/>
<rect x="0" y="0" width="0.67" height="20" fill="red"/>
</g>
</g>
<!-- nested-transforms -->
<g id="nested-transforms-test-markers" transform="translate(-90, -450) scale(2.5, 2.5)">
<!-- scale and translate -->
<text x="40" y="200">scale(25, 95) - translate(2, 2)</text>
<rect x="48" y="208" width="5" height="5" fill="black"/>
<rect x="108" y="208" width="5" height="5" fill="blue"/>
<rect x="48" y="248" width="5" height="5" fill="red"/>
</g>
<!-- nested-transforms-test-markers -->
</g>
<!-- nested-transforms test -->
</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>

After

Width:  |  Height:  |  Size: 4.8 KiB

Some files were not shown because too many files have changed in this diff Show more