SVGViewTests/w3c/1.2T/svg/animate-elem-206-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="animateMotion with animated mpath" status="accepted"
    approved="yes"
    version="$Revision: 1.4 $" testname="$RCSfile: animate-elem-206-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        Precision tests for animateMotion with animated mpath.
      </p>
      <p>
        The main indication for a failed test is the appearence of something
        red and that circles are not centered below the paths given in gray.
      </p>
      <p>
        Blue rectangles and a  red circles are moved along
        light blue paths with a duration of 30s. The paths itself are animated.
        This results in motions along the gray paths. The rectangles
        are aligned along the animated light blue paths.
        The circle is always covered by the path given in gray.
        If something red gets visible, an error is occured.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: animate-elem-206-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 xml:id="pfad1"
        d="M 100,100 L900,100"
      fill="none" stroke-width="4"
      stroke="#ddf" stroke-linecap="round" stroke-linejoin="round">
        <animate
          attributeName="d"
          attributeType="XML"
          from="M 100,100 L900,100"
                to="M 900,100 L900,900"
          dur="30s"
          fill="freeze" />

      </path>

      <path xml:id="pfad2"
        d="M 100,100 Q900,100 900,900"
      fill="none" stroke-width="20"
      stroke="#888" stroke-linecap="round" stroke-linejoin="round" />

      <animateMotion xlink:href="#bluetestcase"
        dur="30s"
        fill="freeze"
        rotate="auto">
        <mpath xlink:href="#pfad1" />
      </animateMotion>


      <path xml:id="pfad3"
        d="M100,100L500,900 900,100"
      fill="none" stroke-width="4"
      stroke="#ddf" stroke-linecap="round" stroke-linejoin="round">
        <animate
          attributeName="d"
          attributeType="XML"
          from="M100,100L500,900 900,100"
                to="M100,900L500,100 900,900"
          dur="30s"
          fill="freeze" />

      </path>

      <path xml:id="pfad4"
        d="M100,100Q300,700 500,500 700,300 900,900"
      fill="none" stroke-width="20"
      stroke="#888" stroke-linecap="round" stroke-linejoin="round" />

      <animateMotion xlink:href="#bluetestcase2"
        dur="30s"
        fill="freeze"
        rotate="auto">
        <mpath xlink:href="#pfad3" />
      </animateMotion>


    </defs>
    <rect x="0" y="0" width="480" height="360" fill="#fff" />
    <g transform="translate(100,-20) scale(0.40)">
      <title>first test</title>
      <g xml:id="bluetestcase" >
        <rect x="-40" y="-20" width="80" height="40"
        stroke="#00f" stroke-width="6"
        fill="none" />
        <circle cx="0" cy="0" r="10"
        fill="#f00" />
      </g>
      <use xlink:href="#pfad2" />
      <use xlink:href="#pfad1" />
    </g>

    <g transform="translate(40,-20) scale(0.40) rotate(-195 500 500)">
      <title>second test</title>
      <g xml:id="bluetestcase2">
        <rect x="-40" y="-20" width="80" height="40"
        stroke="#00f" stroke-width="6"
        fill="none" />
        <circle cx="0" cy="0" r="10"
        fill="#f00" />
      </g>


      <use xlink:href="#pfad4" />
      <use xlink:href="#pfad3" />

    </g>
    <g font-size="12" stroke="none" fill="#888">
      <text x="10" y="225">animateMotion</text>
      <text x="10" y="240">with animated mpath</text>
      <text x="10" y="265">red = wrong</text>
      <text x="10" y="280">no animation = wrong</text>
      <text x="10" y="295">circle and rectangle not</text>
      <text x="10" y="310">centered below path = 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.4 $</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>