SVGViewTests/w3c/1.2T/svg/animate-elem-213-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 animateTransform rotate with values animateTransform." status="accepted"
    approved="yes"
    version="$Revision: 1.5 $" testname="$RCSfile: animate-elem-213-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 animateTransform rotate with values animateTransform.</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.
        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>
      </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. For animateTransform
        the '0' is the same as the zero matrix, not the unity or identity matrix.
        For the rotate type this is a skew with an angle of 0.
        Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
        effect has to be postmultiplied to the underlying value, if the animation is additive. Note
        that for two additive rotate angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
      </p>
      <p>
        The from-to, from-by and by are applied to animateTransform of the rotate type
        of different blue stroked
        paths and are compared with the related values animations including additive and
        cumulative hehaviour for underlying red paths. Additionally underlying dark red
        paths simulate the same behaviour using always the defaults additive replace and
        accumulate  replace with animateMotion. The blue paths cover all red paths.
        Therefore if something red gets visible, an error is occured.
        Because fill is always not set and therefore remove,
        the final value is the value at 2s given with a simple values animateTransform, not very
        interesting for the test.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: animate-elem-213-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">
    <defs>

      <path id="fromto" xml:id="fromto" d="M-20,40C-20,40 0,0 -20,-20 20,20 20,0 20,40C30,40 -20,0 -20,40"/>
      <path id="fromby" xml:id="fromby" d="M-20,-30Q40,0 20,20M0,-40C40,-40 20,-20 30,40"/>
      <path id="by" xml:id="by" d="M20,20Q40,-20 20,-20M-20,-20L20,40M0,-20L40,40"/>

    </defs>


    <rect x="0" y="0" width="480" height="360" fill="#fff" />

    <g fill="none" stroke="#f00" stroke-width="6" stroke-linejoin="round" stroke-linecap="round">


      <g transform="translate(80,140)">
        <title>from-to animateTransform rotate</title>
        <g>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s"  dur="18s"/>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="35s"  dur="17s"/>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="67s"/>
          <g>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="4s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-230,5,0;-300,10,-10" begin="9s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-380,10,-5;-450,15,-15" begin="14s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="20s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-230,5,0;-300,10,-10" begin="25s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-380,10,-5;-450,15,-15" begin="30s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="36s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="41s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="46s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="52s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="57s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="62s" dur="5s"/>
            <use xlink:href="#fromto" stroke="#800">
              <title>dark red values comparsion for from-to animations - if visible fail</title>
            </use>
          </g>
        </g>

        <use xlink:href="#fromto" stroke="#f00">
          <title>red values comparsion for from-to animations - if visible fail</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="20s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="52s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none"/>
        </use>


        <use xlink:href="#fromto" stroke="#88f">
          <title>blue from-to animations</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  to="-150,5,-5" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  to="-150,5,-5" begin="20s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  to="-150,5,-5" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  to="-150,5,-5" begin="52s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none"/>
          <set attributeName="stroke" to="#00f" begin="20s" />
          <set attributeName="stroke" to="#00a" begin="36s" />
          <set attributeName="stroke" to="#006" begin="52s" />
        </use>

      </g>


      <g transform="translate(240,140)">
        <title>from-by animateTransform rotate</title>
        <g>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s"  dur="18s"/>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="35s"  dur="17s"/>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="67s"/>
          <g>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="4s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-230,5,0;-300,10,-10" begin="9s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-380,10,-5;-450,15,-15" begin="14s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="20s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-230,5,0;-300,10,-10" begin="25s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-380,10,-5;-450,15,-15" begin="30s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="36s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="41s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="46s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="52s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="57s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="62s" dur="5s"/>
            <use xlink:href="#fromby" stroke="#800">
              <title>dark red values comparsion for from-by animations - if visible fail</title>
            </use>
          </g>
        </g>
        <use xlink:href="#fromby" stroke="#f00">
          <title>red values comparsion for from-by animations - if visible fail</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="20s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" values="-80,0,5;-150,5,-5" begin="52s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none"/>
        </use>


        <use xlink:href="#fromby" stroke="#88f">
          <title>blue from-by animations</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  by="-70,5,-10" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  by="-70,5,-10" begin="20s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  by="-70,5,-10" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" from="-80,0,5"  by="-70,5,-10" begin="52s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none"/>
          <set attributeName="stroke" to="#00f" begin="20s" />
          <set attributeName="stroke" to="#00a" begin="36s" />
          <set attributeName="stroke" to="#006" begin="52s" />
        </use>

      </g>


      <g transform="translate(400,140)">
        <title>by animateTransform rotate</title>

        <g>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <g>
            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="4s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="200,5,-5;400,10,-10" begin="9s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="400,10,-10;600,15,-15" begin="14s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="20s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="200,5,-5;400,10,-10" begin="25s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="400,10,-10;600,15,-15" begin="30s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="36s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="41s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="46s" dur="5s"/>

            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="52s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="57s" dur="5s"/>
            <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="62s" dur="5s"/>

            <use xlink:href="#by" stroke="#800">
              <title>dark red values comparsion for by animations - if visible fail</title>
            </use>
          </g>
        </g>


        <use xlink:href="#by" stroke="#f00">
          <title>red values comparsion for by animations - if visible fail</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="20s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" values="0,0,0;200,5,-5" begin="52s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
        </use>

        <use xlink:href="#by" stroke="#88f">
          <title>blue by animations</title>
          <animateTransform attributeName="transform" type="rotate" values="100,-5,5" begin="2s" />
          <animateTransform attributeName="transform" type="rotate" by="200,5,-5" begin="4s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" by="200,5,-5" begin="20s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="sum"/>
          <animateTransform attributeName="transform" type="rotate" by="200,5,-5" begin="36s"
                           dur="5s" repeatCount="3" additive="sum" accumulate="none"/>
          <animateTransform attributeName="transform" type="rotate" by="200,5,-5" begin="52s"
                           dur="5s" repeatCount="3" additive="replace" accumulate="none"/>

          <set attributeName="stroke" to="#00f" begin="20s" />
          <set attributeName="stroke" to="#00a" begin="36s" />
          <set attributeName="stroke" to="#006" begin="52s" />
        </use>

      </g>

    </g>
    <g id="myText" xml:id="myText" font-size="12">
      <text x="300" y="300">animateTransform rotate</text>
      <text x="300" y="315">compare from-to, from-by, by</text>
      <text x="300" y="330">with values</text>
      <text x="300" y="350">red=wrong, no animation: wrong</text>
      <text x="10" y="275">attributes noted:</text>
      <text x="10" y="290">
        <tspan fill="#88f">cumulative/additive;</tspan>
        <tspan fill="#00f">cumulative/not additive;</tspan>
      </text>
      <text x="10" y="305">
        <tspan fill="#00a">not cumulative/additive;</tspan>
        <tspan fill="#006">not cumulative/not additive</tspan>
      </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>