LayoutTests/svg/animations/animateColor-additive-2a.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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />

<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />

<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />

<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>

<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
</g>

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

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

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