SVGViewTests/w3c/1.2T/svg/animate-elem-81-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="CN" owner="VH" desc="Test on the animateTransform additive behavior" status="accepted"
    approved="yes"
    version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-81-t.svg,v $"> 
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        This test validates the operation of the animateTransform's additive behavior, as described in the SVG 1.1
        specification (see http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement).
      </p>
      <p>
        The first two rectangles, on the top row, show the effect of the additive attribute on animateTransform. The
        left-most animateTransforms have their additive attribute set to replace, so the effect of the two transform
        animation is as if only the highest priority one applied because it replaces the underlying value. The second
        animateTransforms (from left to right) have their additive attribute set to sum, which means the transforms they
        roduce are concatenated.
      </p>
      <p>
        The last two rectangles, on the top row, show the effect of the accumulate attribute on animateTransform. For the
        left one (third on the row, from left to right), the accumulate attribute is set to none. There are two repeats for
        the animateTransform. Therefore, the transform goes twice from a scale(1,1) to a scale(2,2). For the right-most
        animateTransform, the accumulate attribute is set to sum. There are two repeats and the animation goes from scale(1,1)
        to scale(2,2) for the first iteration and then from scale(2,2) to scale(4,4) (because the result of the second
        iteration is concatenated to the scale(2,2) result of the previous, first iteration).
      </p>
      <p>
        The rectangles on the bottom row show the combination of additive and cumulative behavior. The left rectangle's
        animateTransform accumulate behavior is set to none but its additive behavior is set to sum. Therefore, the
        transform's underlying value (skewX(30)) is always pre-concatenated to the animateTransform's result, which goes
        from "skewX(30) scale(1,1)" to "skewX(30) scale(2,2)" in each of its two iterations. The right rectangle's
        animateTransform accumulate behavior is set to sum and the additive behavior is also set to sum. Therefore, the
        transform's underlying value is always pre-concatenated, so is the result of previous animation iterations.
        Consequently, the transform goes from "skewX(30) scale(1,1)" to "skewX(30) scale(2,2)" for the first iteration
        and then from "skewX(30) scale(2,2) scale(1,1)" to "skewX(30) scale(2,2) scale(2,2)" for the second iteration.
      </p>
    </d:OperatorScript> 
  </SVGTestCase> 
  <title xml:id="test-title">$RCSfile: animate-elem-81-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> 
      <g xml:id="ref" stroke="rgb(192,192,192)" fill="none"> 
        <circle stroke-width="2" r="40" /> 
        <line x1="-45" x2="45" /> 
        <line y1="-45" y2="45" /> 
      </g> 
    </defs>
    <text text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
    <g transform="translate(0,0)" font-size="14"> 
      <g transform="translate(60,90)"> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze" /> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="replace" fill="freeze" /> 
        </rect> 
        <rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none" /> 
        <text y="60" text-anchor="middle">additive=replace</text> 
      </g> 
      <g transform="translate(180,90)"> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="sum" fill="freeze" /> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="5s" additive="sum" fill="freeze" /> 
        </rect> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30) rotate(90) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none" /> 
        <text y="60" text-anchor="middle">additive=sum</text> 
      </g> 
      <g transform="translate(300,90)"> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="replace" /> 
        </rect> 
        <rect x="-15" y="-15" width="30" height="30" transform="scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none" /> 
        <text y="60" text-anchor="middle">accumulate=none</text> 
        <text y="75" text-anchor="middle">additive=replace</text> 
      </g> 
      <g transform="translate(420,90)"> 
        <rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="replace" /> 
        </rect> 
        <rect x="-7.5" y="-7.5" width="15" height="15" transform="scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none" /> 
        <text y="60" text-anchor="middle">accumulate=sum</text> 
        <text y="75" text-anchor="middle">additive=replace</text> 
      </g> 
      <g transform="translate(300,220)"> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30)" stroke="gray" stroke-width="4" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="none" fill="freeze" additive="sum" /> 
        </rect> 
        <rect x="-15" y="-15" width="30" height="30" transform="skewX(30) scale(2,2)" stroke="rgb(255,180,0)" stroke-width="4" fill="none" /> 
        <text y="60" text-anchor="middle">accumulate=none</text> 
        <text y="75" text-anchor="middle">additive=sum</text> 
      </g> 
      <g transform="translate(420,220)"> 
        <rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30)" stroke="gray" stroke-width="2" fill="rgb(230,230,230)"> 
          <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1,1" to="2,2" dur="2.5s" repeatCount="2" accumulate="sum" fill="freeze" additive="sum" /> 
        </rect> 
        <rect x="-7.5" y="-7.5" width="15" height="15" transform="skewX(30) scale(4,4)" stroke="rgb(255,180,0)" stroke-width="2" fill="none" /> 
        <text y="60" text-anchor="middle">accumulate=sum</text> 
        <text y="75" text-anchor="middle">additive=sum</text> 
      </g> 
    </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.8 $</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>