SVGViewTests/w3c/1.2T/svg/animate-elem-210-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml: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" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  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/.                          =-->
  <!--======================================================================-->
  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"
    reviewer="AS" owner="DOH" desc="Compare from-to, from-by and by animateColor with values animateColor and animate." status="accepted"
    approved="yes"
    version="$Revision: 1.5 $" testname="$RCSfile: animate-elem-210-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Compare from-to, from-by and by animateColor with values animateColor and animate.</p>
      <p>
        The main indication for a failed test is the appearance of red.
      </p>
      <p>
        SMIL 2 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:
      </p>
      <table>
        <tr>
          <th>used</th>
          <th>converted</th>
        </tr>
        <tr>
          <td>from="a" to="b"</td>
          <td>values="a;b"</td>
        </tr>
        <tr>
          <td>from="a" by="b"</td>
          <td>values="a;a+b"</td>
        </tr>
        <tr>
          <td>by="a"</td>
          <td>values="0;a" additive="sum"</td>
        </tr>
        <tr>
          <td>set to="a"</td>
          <td>values="a" additive="replace" accumulate="none"</td>
        </tr>
      </table>
      <p>
        (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.)
      </p>
      <p>
        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 hehaviour for the stroke of the same circles. Additionally underlying
        filled larger circles simulate the same behaviour using always the defaults additive replace and
        accumulate  replace. 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, an error is occured.
        But each separated circle system representing one of 12 subtests can have another color.
        Because the fill attribute for animation is always not set and therefore remove,
        the final value is only that of the set animation, not very interesting for the test.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: animate-elem-210-t.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <rect x="0" y="0" width="480" height="360" fill="#fff" />

    <g fill="#ff0" stroke="#ff0" stroke-width="10">
      <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" />
        <animate attributeName="fill" values="#886;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#88a;#08c" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#802;#004" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#606;#008" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#60a;#00c" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#602;#004" begin="4s"
                         dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#684;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#684;#088" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="none" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#604;#008" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="none" />
      </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" />
        <animate attributeName="fill" values="#604;#008" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#604;#008" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="none" />

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


    <g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(160)">
      <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" />
        <animate attributeName="fill" values="#087;#08a" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#08c;#08f" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#002;#005" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#007;#00a" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#00c;#00f" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#002;#005" begin="4s"
                         dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#684;#689" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#684;#689" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="none" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#604;#609" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="none" />
      </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" />
        <animate attributeName="fill" values="#604;#609" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#604;#609" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="none" />

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


    <g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(320)">
      <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" />
        <animate attributeName="fill" values="#084;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#088;#08c" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#000;#004" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#084;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#088;#08c" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="sum" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#000;#004" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
      </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" />
        <animate attributeName="fill" values="#080;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#080;#088" begin="14s" dur="5s" />
      </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="3" additive="sum" accumulate="none" />

        <animateColor attributeName="stroke" values="#080" begin="2s" />
        <animateColor attributeName="stroke" values="#000;#008" begin="4s"
                         dur="5s" repeatCount="3" additive="sum" accumulate="none" />
      </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" />
        <animate attributeName="fill" values="#080;#088" begin="9s" dur="5s" />
        <animate attributeName="fill" values="#080;#088" begin="14s" dur="5s" />
      </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="3" additive="replace" accumulate="none" />

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


    <g id="myText" xml:id="myText" font-size="12">
      <text x="270" y="315">compare  from-to, from-by, by</text>
      <text x="270" y="330">with values animate, animateColor</text>
      <text x="270" y="350">different colored rings in circle=wrong </text>

      <text x="120" y="30">attributes noted:</text>
      <text x="280" y="30">attributes noted:</text>

      <text x="120" y="50">cumulative</text>
      <text x="120" y="65">additive</text>

      <text x="120" y="120">cumulative</text>
      <text x="120" y="135">not additive</text>

      <text x="120" y="190">not cumulative</text>
      <text x="120" y="205">additive</text>

      <text x="120" y="260">not cumulative</text>
      <text x="120" y="275">not additive</text>

      <text x="280" y="50">cumulative</text>
      <text x="280" y="65">additive</text>

      <text x="280" y="120">cumulative</text>
      <text x="280" y="135">not additive</text>

      <text x="280" y="190">not cumulative</text>
      <text x="280" y="205">additive</text>

      <text x="280" y="260">not cumulative</text>
      <text x="280" y="275">not additive</text>
    </g>

  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.5 $</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 xml: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>