SVGViewTests/w3c/1.2T/svg/media-anim-201-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="DOH" owner="AE" desc="Test the Animation element with external references" status="accepted"
    approved="yes"
    version="$Revision: 1.11 $" testname="$RCSfile: media-anim-201-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 Animation element with external references.</p>
      <p>There are five references. Each one is a separate file.</p>
      <p>The time scale loops from 0 to 10 seconds - the vertical red line pans from left to right.</p>
      <p>In the first example the two rectangles are set to rotate 90 degrees alternatively.</p>
      <p>In the second case the circle has focus. Since this is the only item that has focus it can not loose focus and should remain red even when an attempt is made to change focus.</p>
      <p>The third example has a circle that is set to change to red on a mouseover event. On mouseout the circle should change back to grey.</p>
      <p>The forth example invokes the same external file twice - two squares with a gradiant should be rotating in sync continously. </p>
      <p>The last case calls an animation that should display a blue square with five gradiant circles all rotating continously.</p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: media-anim-201-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">
    <text xml:id="display-title" x="240" y="50" font-size="16" fill="black" text-anchor="middle">
      Animation Elements with External References
    </text>
    <g transform="translate(0,-5)" font-size="10" fill="#555">
      <g transform="translate(40,100)">
        <g transform="translate(5, 0)">
          <line x1="0" x2="0" y1="-5" y2="190" stroke="red" stroke-width="1">
            <animate attributeName="x1" from="0" to="100" dur="10" repeatCount="indefinite"/>
            <animate attributeName="x2" from="0" to="100" dur="10" repeatCount="indefinite"/>
          </line>
        </g>
        <use y="-5" xlink:href="../images/animationresource-myscale.svg#myScale"/>
        <text x="120" y="0">Reference Timeline : starts at 0, goes through the scale in 10s.</text>
        <text x="120" y="12">Squares should rotate indefinetly.</text>
      </g>
      <g transform="translate(40,130)">
        <text x="120" y="0">1.</text>
        <text x="135" y="0">Reference to external dual-chained animation.</text>
        <text x="135" y="10">Rects should spin alternatively.</text>
        <text x="135" y="20"/>
        <animation width="100" height="50" begin="0" dur="10" x="13" y="-20" xlink:href="../images/animationresource-anim1.svg" repeatCount="indefinite"/>
      </g>
      <g transform="translate(40,160)">
        <text x="120" y="0">2.</text>
        <text x="135" y="0">Reference to focusable circle. Should start as red and</text>
        <text x="135" y="10">remain red even when an attempt is made to move focus.</text>
        <animation width="100" height="50" begin="0" dur="10" x="35" y="-15" xlink:href="../images/animationresource-activecircle1.svg" repeatCount="indefinite"/>
      </g>
      <g transform="translate(40,190)">
        <text x="120" y="0">3.</text>
        <text x="135" y="0">Reference to mouseoverable circle.</text>
        <text x="135" y="10">Should be grey and turn red on mousover then back to grey.</text>
        <animation width="100" height="50" begin="0" dur="10" x="35" y="-15" xlink:href="../images/animationresource-activecircle2.svg" repeatCount="indefinite"/>
      </g>
      <g transform="translate(40,220)">
        <text x="120" y="0">4.</text>
        <text x="135" y="0">Reference to animated rect with gradient fill - twice.</text>
        <text x="135" y="10"/>
        <animation width="50" height="100" begin="0" dur="10" x="5" y="-30" xlink:href="../images/animationresource-gradrect2.svg" repeatCount="indefinite"/>
        <animation width="50" height="100" begin="0" dur="10" x="35" y="-30" xlink:href="../images/animationresource-gradrect2.svg" repeatCount="indefinite"/>
      </g>
      <g transform="translate(40,250)">
        <text x="120" y="0">5.</text>
        <text x="135" y="0">Reference to animated group rect using circles with gradients.</text>
        <text x="135" y="10"/>
        <animation width="50" height="50" begin="0" dur="10" x="20" y="-30" xlink:href="../images/animationresource-userect.svg" repeatCount="indefinite" />
      </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.11 $</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>