316 lines
8.2 KiB
XML
316 lines
8.2 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!--======================================================================-->
|
|
<!--= Copyright 2004 World Wide Web Consortium, (Massachusetts =-->
|
|
<!--= Institute of Technology, Institut National de Recherche en =-->
|
|
<!--= Informatique et en Automatique, Keio University). All Rights =-->
|
|
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
|
|
<!--======================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
|
|
|
|
<SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="VH" owner="VH" desc="Test on multiple begin conditions in begin attribute" status="accepted" version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-61-t.svg,v $">
|
|
|
|
<OperatorScript>
|
|
|
|
<Paragraph>
|
|
|
|
This tests validates multiple begin conditions in the begin attribute,
|
|
|
|
assuming support for the <set> element and setting the
|
|
|
|
fill attribute on a <rect> element.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
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.
|
|
|
|
</Paragraph>
|
|
|
|
|
|
|
|
<Paragraph>
|
|
|
|
The test shows 6 rows where a red rectangle' s x attribute is animated
|
|
|
|
with <set> elements.
|
|
|
|
</Paragraph>
|
|
|
|
|
|
|
|
<Paragraph>
|
|
|
|
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.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
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.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
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.
|
|
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
|
|
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.
|
|
|
|
</Paragraph>
|
|
|
|
</OperatorScript>
|
|
|
|
</SVGTestCase>
|
|
|
|
<title id="test-title">$RCSfile: animate-elem-61-t.svg,v $</title>
|
|
|
|
|
|
|
|
<!--======================================================================-->
|
|
|
|
<!--Content of Test Case follows... =====================-->
|
|
|
|
<!--======================================================================-->
|
|
|
|
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
|
|
|
|
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
|
|
|
|
|
|
|
|
<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">> 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>
|
|
|
|
</svg>
|