LayoutTests/svg/animations/animateColor-additive-2b.svg - WebKit - Git at Google

 <?xml version="1.0" encoding="iso-8859-1" ?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
 <svg viewBox="0 0 500 300" onload="loaded()"
   xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
   xmlns:xlink="http://www.w3.org/1999/xlink">

 <title>Compare from-to, from-by and by animateColor with values animateColor and animate</title>
 <desc>
       SMIL specifies, how from-to, from-by and by animations have to be converted into
       values animations. Therefore they have to be the same as the related values animation.
       Additionally set animations can be replaced by values animations too.
       The conversion is as follows:

       from="a" to="b" ... values="a;b"
       from="a" by="b" ... values="a;a+b"
       by="a" ... values="0;a" additive="sum"
       set to="a" ... values="a" additive="replace" accumulate="none"

      (by and from-by animations have only a meaning, if values can be added somehow.
       '0' is used as a general symbol for the neutral element of addition for the related attribute,
       this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
       related attribute, '0' is a predecessor of '1' in the related attribute space. In the color space
       0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each
       of the three components of the color vector separately.)

       The from-to, from-by and by animations applied to fill properties
       of circles are compared with the related values animations including additive and
       cumulative behaviour for the stroke of the same circles. Additionally underlying
       filled larger circles simulate the same behaviour using always the defaults additive replace and
       accumulate  none. The fill of the background circle and stroke and fill of the smaller
       test circle centered in it are always exactly the same. Therefore if
       rings in each centered circle system with different color get visible, the test is failed.
       But each separated circle system representing one of 12 subtests can have another color.
 </desc>
 <metadata>
 <rdf:RDF
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#" >
  <rdf:Description rdf:about="">
    <dc:title>Compare from-to, from-by and by animateColor with values animateColor and animate</dc:title>
    <dc:creator>Dr. Olaf Hoffmann</dc:creator>
    <dc:created>2007-06-16</dc:created>
    <dc:language>en</dc:language>
    <dc:description>
 SVG animation test:
 Compare from-to, from-by and by animateColor with values animateColor and animate
    </dc:description>
    <dc:relation>http://hoffmann.bplaced.net/svgtest/</dc:relation>
    <dc:rights>
       <cc:License
          rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
         <cc:permits
            rdf:resource="http://creativecommons.org/ns#Reproduction" />
         <cc:permits
            rdf:resource="http://creativecommons.org/ns#Distribution" />
         <cc:requires
            rdf:resource="http://creativecommons.org/ns#Notice" />
         <cc:requires
            rdf:resource="http://creativecommons.org/ns#Attribution" />
         <cc:permits
            rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
         <cc:requires
            rdf:resource="http://creativecommons.org/ns#ShareAlike" />
       </cc:License>
    </dc:rights>
  </rdf:Description>
 </rdf:RDF>
 </metadata>
 <rect x="0" y="0" width="500" height="300" fill="#fff" />

  <g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(-30)">
  <title>from-to animation for fill compared with values for stroke</title>
 <circle cx="80" cy="50" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#882;#084" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="50" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#802" to="#004" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#802;#004" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
 </circle>

 <circle cx="80" cy="120" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#602;#004" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="120" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#602" to="#004" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#602;#004" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>
 </circle>

 <circle cx="80" cy="190" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#684;#088" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="190" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#604" to="#008" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#604;#008" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>
 </circle>

 <circle cx="80" cy="260" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#604;#008" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="260" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#604" to="#008" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#604;#008" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />
 </circle>
   </g>


   <g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(170)">
  <title>from-by animation for fill compared with values for stroke</title>
 <circle cx="80" cy="50" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#082;#085" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="50" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#002" by="#003" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#002;#005" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />
 </circle>

 <circle cx="80" cy="120" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#002;#005" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="120" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#002" by="#003" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#002;#005" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>
 </circle>

 <circle cx="80" cy="190" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#684;#689" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="190" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#604" by="#005" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#604;#609" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>
 </circle>

 <circle cx="80" cy="260" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#604;#609" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="260" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" from="#604" by="#005" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#604;#609" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />
 </circle>
 </g>


  <g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(370)">
  <title>by animation for fill compared with values for stroke</title>
 <circle cx="80" cy="50" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="50" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" by="#004" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#000;#004" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
 </circle>

 <circle cx="80" cy="120" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" fill="freeze"/>
 </circle>
 <circle cx="80" cy="120" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" by="#004" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#000;#004" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
 </circle>

 <circle cx="80" cy="190" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="190" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" by="#008" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#000;#008" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />
 </circle>

 <circle cx="80" cy="260" r="35" stroke="none">
 <animate attributeName="fill" values="#080" begin="2s" />
 <animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" fill="freeze" />
 </circle>
 <circle cx="80" cy="260" r="20">
 <set attributeName="fill" to="#080" begin="2s" />
 <animateColor attributeName="fill" by="#008" begin="4s"
                  dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

 <animateColor attributeName="stroke" values="#080" begin="2s" />
 <animateColor attributeName="stroke" values="#000;#008" begin="4s"
                  dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />
 </circle>
 </g>

 <script>
 if (window.testRunner)
     testRunner.waitUntilDone();

 function loaded() {
     document.documentElement.setCurrentTime(10);

     if (window.testRunner)
         testRunner.notifyDone();
 }
 </script>
 </svg>
	<?xml version="1.0" encoding="iso-8859-1" ?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
	<svg viewBox="0 0 500 300" onload="loaded()"
	xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
	xmlns:xlink="http://www.w3.org/1999/xlink">

	<title>Compare from-to, from-by and by animateColor with values animateColor and animate</title>
	<desc>
	SMIL specifies, how from-to, from-by and by animations have to be converted into
	values animations. Therefore they have to be the same as the related values animation.
	Additionally set animations can be replaced by values animations too.
	The conversion is as follows:

	from="a" to="b" ... values="a;b"
	from="a" by="b" ... values="a;a+b"
	by="a" ... values="0;a" additive="sum"
	set to="a" ... values="a" additive="replace" accumulate="none"

	(by and from-by animations have only a meaning, if values can be added somehow.
	'0' is used as a general symbol for the neutral element of addition for the related attribute,
	this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
	related attribute, '0' is a predecessor of '1' in the related attribute space. In the color space
	0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each
	of the three components of the color vector separately.)

	The from-to, from-by and by animations applied to fill properties
	of circles are compared with the related values animations including additive and
	cumulative behaviour for the stroke of the same circles. Additionally underlying
	filled larger circles simulate the same behaviour using always the defaults additive replace and
	accumulate none. The fill of the background circle and stroke and fill of the smaller
	test circle centered in it are always exactly the same. Therefore if
	rings in each centered circle system with different color get visible, the test is failed.
	But each separated circle system representing one of 12 subtests can have another color.
	</desc>
	<metadata>
	<rdf:RDF
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:cc="http://creativecommons.org/ns#" >
	<rdf:Description rdf:about="">
	<dc:title>Compare from-to, from-by and by animateColor with values animateColor and animate</dc:title>
	<dc:creator>Dr. Olaf Hoffmann</dc:creator>
	<dc:created>2007-06-16</dc:created>
	<dc:language>en</dc:language>
	<dc:description>
	SVG animation test:
	Compare from-to, from-by and by animateColor with values animateColor and animate
	</dc:description>
	<dc:relation>http://hoffmann.bplaced.net/svgtest/</dc:relation>
	<dc:rights>
	<cc:License
	rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
	<cc:permits
	rdf:resource="http://creativecommons.org/ns#Reproduction" />
	<cc:permits
	rdf:resource="http://creativecommons.org/ns#Distribution" />
	<cc:requires
	rdf:resource="http://creativecommons.org/ns#Notice" />
	<cc:requires
	rdf:resource="http://creativecommons.org/ns#Attribution" />
	<cc:permits
	rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
	<cc:requires
	rdf:resource="http://creativecommons.org/ns#ShareAlike" />
	</cc:License>
	</dc:rights>
	</rdf:Description>
	</rdf:RDF>
	</metadata>
	<rect x="0" y="0" width="500" height="300" fill="#fff" />

	<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(-30)">
	<title>from-to animation for fill compared with values for stroke</title>
	<circle cx="80" cy="50" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#882;#084" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="50" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#802" to="#004" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#802;#004" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
	</circle>

	<circle cx="80" cy="120" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#602;#004" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="120" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#602" to="#004" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#602;#004" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>
	</circle>

	<circle cx="80" cy="190" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#684;#088" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="190" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#604" to="#008" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#604;#008" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>
	</circle>

	<circle cx="80" cy="260" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#604;#008" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="260" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#604" to="#008" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#604;#008" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />
	</circle>
	</g>



	<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(170)">
	<title>from-by animation for fill compared with values for stroke</title>
	<circle cx="80" cy="50" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#082;#085" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="50" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#002" by="#003" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#002;#005" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />
	</circle>

	<circle cx="80" cy="120" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#002;#005" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="120" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#002" by="#003" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#002;#005" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>
	</circle>

	<circle cx="80" cy="190" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#684;#689" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="190" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#604" by="#005" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#604;#609" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze"/>
	</circle>

	<circle cx="80" cy="260" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#604;#609" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="260" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" from="#604" by="#005" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#604;#609" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />
	</circle>
	</g>



	<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(370)">
	<title>by animation for fill compared with values for stroke</title>
	<circle cx="80" cy="50" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="50" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" by="#004" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#000;#004" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
	</circle>

	<circle cx="80" cy="120" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" fill="freeze"/>
	</circle>
	<circle cx="80" cy="120" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" by="#004" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="sum" fill="freeze"/>

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#000;#004" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="sum" fill="freeze"/>
	</circle>

	<circle cx="80" cy="190" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="190" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" by="#008" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#000;#008" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />
	</circle>

	<circle cx="80" cy="260" r="35" stroke="none">
	<animate attributeName="fill" values="#080" begin="2s" />
	<animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" fill="freeze" />
	</circle>
	<circle cx="80" cy="260" r="20">
	<set attributeName="fill" to="#080" begin="2s" />
	<animateColor attributeName="fill" by="#008" begin="4s"
	dur="5s" repeatCount="1" additive="replace" accumulate="none" fill="freeze" />

	<animateColor attributeName="stroke" values="#080" begin="2s" />
	<animateColor attributeName="stroke" values="#000;#008" begin="4s"
	dur="5s" repeatCount="1" additive="sum" accumulate="none" fill="freeze" />
	</circle>
	</g>

	<script>
	if (window.testRunner)
	testRunner.waitUntilDone();

	function loaded() {
	document.documentElement.setCurrentTime(10);

	if (window.testRunner)
	testRunner.notifyDone();
	}
	</script>
	</svg>