SVGViewTests/w3c/1.2T/svg/animate-elem-209-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 animate with values animate." status="accepted"
    approved="yes"
    version="$Revision: 1.5 $" testname="$RCSfile: animate-elem-209-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 animate with values 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 animation. 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.)
      </p>
      <p>
        The from-to, from-by and by animations applied to the attributes x, y, width, height
        of blue rectangles are compared with the related values animations including additive and
        cumulative hehaviour for underlying red rectangles. Additionally underlying dark red
        rectangles simulate the same behaviour using always the defaults additive replace and
        accumulate  replace. The blue rectangles cover all red rectangles. Therefore if something
        red gets visible, an error is occured. Because fill 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-209-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="none" stroke="#f00" stroke-width="10">


      <g transform="translate(320,0)">
        <rect x="50" y="160" width="80" height="80" stroke="#800">
          <title>dark red values comparsion for from-to animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="90;110" begin="4s" dur="5s" />
          <animate attributeName="y" values="120;140" begin="9s" dur="5s" />
          <animate attributeName="y" values="150;170" begin="14s" dur="5s" />

          <animate attributeName="x" values="20;30" begin="4s" dur="5s" />
          <animate attributeName="x" values="50;60" begin="9s" dur="5s" />
          <animate attributeName="x" values="80;90" begin="14s" dur="5s" />

          <animate attributeName="height" values="50;70" begin="4s" dur="5s" />
          <animate attributeName="height" values="50;70" begin="9s" dur="5s" />
          <animate attributeName="height" values="50;70" begin="14s" dur="5s" />

          <animate attributeName="width" values="20;30"  begin="4s" dur="5s" />
          <animate attributeName="width" values="20;30"  begin="9s" dur="5s" />
          <animate attributeName="width" values="20;30"  begin="14s" dur="5s" />
        </rect>

        <rect x="50" y="160" width="80" height="80" stroke="#f00">
          <title>red values comparsion for from-to animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="10;30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" values="20;30" begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
          <animate attributeName="height" values="10;30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" values="20;30"  begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none" />
        </rect>


        <rect x="50" y="160" width="80" height="80" stroke="#00f">
          <title>blue from-to animations</title>
          <set attributeName="y" to="80" begin="2s" />
          <set attributeName="x" to="80" begin="2s" />
          <set attributeName="width" to="40" begin="2s" />
          <set attributeName="height" to="40" begin="2s" />

          <animate attributeName="y" from="10" to="30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" from="20" to="30" begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
          <animate attributeName="height" from="10" to="30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" from="20" to="30"  begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none" />
        </rect>

      </g>


      <g transform="translate(150,0)">

        <rect x="50" y="160" width="80" height="80" stroke="#800">
          <title>dark red values comparsion for from-by animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="90;110" begin="4s" dur="5s" />
          <animate attributeName="y" values="120;140" begin="9s" dur="5s" />
          <animate attributeName="y" values="150;170" begin="14s" dur="5s" />

          <animate attributeName="x" values="20;30" begin="4s" dur="5s" />
          <animate attributeName="x" values="50;60" begin="9s" dur="5s" />
          <animate attributeName="x" values="80;90" begin="14s" dur="5s" />

          <animate attributeName="height" values="50;70" begin="4s" dur="5s" />
          <animate attributeName="height" values="50;70" begin="9s" dur="5s" />
          <animate attributeName="height" values="50;70" begin="14s" dur="5s" />

          <animate attributeName="width" values="20;30"  begin="4s" dur="5s" />
          <animate attributeName="width" values="20;30"  begin="9s" dur="5s" />
          <animate attributeName="width" values="20;30"  begin="14s" dur="5s" />
        </rect>


        <rect x="50" y="160" width="80" height="80" stroke="#f00">
          <title>red values comparsion for from-by animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="10;30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" values="20;30" begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
          <animate attributeName="height" values="10;30" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" values="20;30"  begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none" />
        </rect>


        <rect x="50" y="160" width="80" height="80" stroke="#00f">
          <title>blue from-by animations</title>
          <set attributeName="y" to="80" begin="2s" />
          <set attributeName="x" to="80" begin="2s" />
          <set attributeName="width" to="40" begin="2s" />
          <set attributeName="height" to="40" begin="2s" />

          <animate attributeName="y" from="10" by="20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" from="20" by="10" begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
          <animate attributeName="height" from="10" by="20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" from="20" by="10"  begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none" />
        </rect>

      </g>


      <g transform="translate(-20,0)">
        <rect x="50" y="160" width="80" height="80" stroke="#800">
          <title>dark red values comparsion for by animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="80;100" begin="4s" dur="5s" />
          <animate attributeName="y" values="100;120" begin="9s" dur="5s" />
          <animate attributeName="y" values="120;140" begin="14s" dur="5s" />

          <animate attributeName="x" values="80;90" begin="4s" dur="5s" />
          <animate attributeName="x" values="90;100" begin="9s" dur="5s" />
          <animate attributeName="x" values="100;110" begin="14s" dur="5s" />

          <animate attributeName="height" values="40;60" begin="4s" dur="5s" />
          <animate attributeName="height" values="40;60" begin="9s" dur="5s" />
          <animate attributeName="height" values="40;60" begin="14s" dur="5s" />

          <animate attributeName="width" values="40;50"  begin="4s" dur="5s" />
          <animate attributeName="width" values="40;50"  begin="9s" dur="5s" />
          <animate attributeName="width" values="40;50"  begin="14s" dur="5s" />
        </rect>

        <rect x="50" y="160" width="80" height="80" stroke="#f00">
          <title>red values comparsion for by animations - if visible fail</title>
          <animate attributeName="y" values="80" begin="2s" />
          <animate attributeName="x" values="80" begin="2s" />
          <animate attributeName="width" values="40" begin="2s" />
          <animate attributeName="height" values="40" begin="2s" />

          <animate attributeName="y" values="0;20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" values="0;10" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="height" values="0;20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" values="0;10"  begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
        </rect>


        <rect x="50" y="160" width="80" height="80" stroke="#00f">
          <title>blue by animations</title>
          <set attributeName="y" to="80" begin="2s" />
          <set attributeName="x" to="80" begin="2s" />
          <set attributeName="width" to="40" begin="2s" />
          <set attributeName="height" to="40" begin="2s" />


          <animate attributeName="y" by="20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum" />
          <animate attributeName="x" by="10" begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum" />
          <animate attributeName="height" by="20" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none" />
          <animate attributeName="width" by="10"  begin="4s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none" />
        </rect>

      </g>

    </g>
    <g id="myText" xml:id="myText" font-size="12">
      <text x="300" y="315">compare by, from-by, from-to</text>
      <text x="300" y="330">with values animations</text>
      <text x="300" y="350">red=wrong </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>