1 <?xml version=
"1.0" encoding=
"UTF-8"?>
2 <!-- =====================================================================-->
3 <!-- animate-elem-31-t.svg -->
5 <!-- Tests animation of the display attribute. -->
7 <!-- Author : Ola Andersson, 30-Sep-2003 --><!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
9 <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">
10 <SVGTestCase xmlns:
testcase=
"http://www.w3.org/2000/02/svg/testsuite/description/" xmlns=
"http://www.w3.org/2000/02/svg/testsuite/description/" reviewed=
"YES" reviewer=
"VH" owner=
"OA" desc=
"Tests animation of the display attribute" status=
"accepted" version=
"$Revision: 1.6 $" testname=
"$RCSfile: animate-elem-31-t.svg,v $">
13 The purpose of this test is to test animation of the display attribute.
16 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.
19 In total there are
6 different circles (purple, green, red, blue, yellow, cyan) in
5 positions (blue and yellow share position) that should be displayed during the test.
24 <!-- GRAY TESTAREAS-->
25 <rect x=
"5" y=
"7.5" width=
"375" height=
"75" fill=
"silver" stroke=
"black" stroke-width=
"3"/>
26 <rect x=
"5" y=
"112.5" width=
"375" height=
"75" fill=
"silver" stroke=
"black" stroke-width=
"3"/>
27 <g transform=
"scale(1.5)" display=
"inline">
29 <!-- PURPLE CIRCLES-->
30 <circle display=
"inline" cx=
"30" cy=
"30" r=
"20" fill=
"purple" stroke=
"black" stroke-width=
"5"/>
31 <circle display=
"inline" cx=
"30" cy=
"100" r=
"20" fill=
"purple" stroke=
"black" stroke-width=
"5">
32 <animate attributeName=
"visibility" from=
"visible" to=
"hidden" begin=
"6" dur=
"2"/>
37 <circle display=
"inline" cx=
"80" cy=
"30" r=
"20" fill=
"green" stroke=
"black" stroke-width=
"5"/>
38 <animate attributeName=
"display" from=
"none" to=
"inline" begin=
"0" dur=
"3" fill=
"freeze"/>
40 <circle visibility=
"hidden" cx=
"80" cy=
"100" r=
"20" fill=
"green" stroke=
"black" stroke-width=
"5">
41 <animate attributeName=
"visibility" from=
"hidden" to=
"visible" begin=
"0" dur=
"3" fill=
"freeze"/>
45 <circle display=
"none" cx=
"130" cy=
"30" r=
"20" fill=
"red" stroke=
"black" stroke-width=
"5">
46 <set attributeName=
"display" to=
"inline" begin=
"2" dur=
"1" fill=
"freeze"/>
48 <circle visibility=
"hidden" cx=
"130" cy=
"100" r=
"20" fill=
"red" stroke=
"black" stroke-width=
"5">
49 <animate attributeName=
"visibility" from=
"hidden" to=
"visible" begin=
"1" dur=
"2" fill=
"freeze"/>
55 <circle display=
"inline" cx=
"180" cy=
"30" r=
"20" fill=
"blue" stroke=
"black" stroke-width=
"5"/>
57 <animate attributeName=
"display" from=
"inline" to=
"none" begin=
"3" dur=
"3" fill=
"freeze"/>
59 <circle visibility=
"hidden" cx=
"180" cy=
"100" r=
"20" fill=
"blue" stroke=
"black" stroke-width=
"5">
60 <animate attributeName=
"visibility" from=
"visible" to=
"hidden" begin=
"3" dur=
"3" fill=
"freeze"/>
63 <!-- YELLOW CIRCLES-->
66 <circle display=
"inline" cx=
"180" cy=
"30" r=
"20" fill=
"yellow" stroke=
"black" stroke-width=
"5"/>
68 <animate attributeName=
"display" from=
"none" to=
"inherit" begin=
"4" dur=
"3" fill=
"freeze"/>
70 <circle visibility=
"hidden" cx=
"180" cy=
"100" r=
"20" fill=
"yellow" stroke=
"black" stroke-width=
"5">
71 <animate attributeName=
"visibility" from=
"hidden" to=
"visible" begin=
"4" dur=
"3" fill=
"freeze"/>
76 <circle cx=
"230" cy=
"30" r=
"20" fill=
"#00ffff" stroke=
"black" stroke-width=
"5">
77 <animate attributeName=
"display" begin=
"0" dur=
"0.5" keyTimes=
"0; 0.5; 1" values=
"inherit; none; inherit" repeatCount=
"8"/>
79 <animate attributeName=
"display" begin=
"0" dur=
"2" keyTimes=
"0; 0.5; 1" values=
"inline; none; inline" repeatCount=
"2" fill=
"freeze"/>
81 <g visibility=
"hidden">
82 <circle cx=
"230" cy=
"100" r=
"20" fill=
"#00ffff" stroke=
"black" stroke-width=
"5">
83 <animate attributeName=
"visibility" begin=
"0" dur=
"0.5" keyTimes=
"0; 0.5; 1" values=
"inherit; hidden; inherit" repeatCount=
"8"/>
85 <animate attributeName=
"visibility" begin=
"0" dur=
"2" keyTimes=
"0; 0.5; 1" values=
"visible; hidden; visible" repeatCount=
"2" fill=
"freeze"/>
87 <animate attributeName=
"display" from=
"inherit" to=
"none" begin=
"6" dur=
"2"/>
90 <text x=
"385" y=
"40" font-size=
"16">display
</text>
91 <text x=
"385" y=
"150" font-size=
"18">visibility
</text>
92 <text x=
"5" y=
"235" font-size=
"28">Test of display attribute animation.
</text>
93 <text x=
"5" y=
"265" font-size=
"18">Circles with same color should be visible at same time.
</text>
95 <text id=
"revision" x=
"10" y=
"340" font-size=
"40" stroke=
"none" fill=
"black">$Revision:
1.6 $
</text>
96 <rect id=
"test-frame" x=
"1" y=
"1" width=
"478" height=
"358" fill=
"none" stroke=
"#000000"/>