SVGViewTests/w3c/1.2T/svg/media-anim-208-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="Animation Elements with External References" status="accepted"
    approved="yes"
    version="$Revision: 1.12 $" testname="$RCSfile: media-anim-208-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Animation Elements with External References</p>
      <p>
        This test validates the animation element with external references with emphases on time based animations.
        The same external file is used for all seven tests.
      </p>
      <p>
        The 'initialVisibility' attribute is not specified so the default should apply - 'whenStarted'.
        In other words the animations should not be visible until they start and then they should disappear as the
        fill is not set to 'freeze' so the initial state should be re-instated.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: media-anim-208-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="10" y="10" height="285" width="460" fill="none" stroke="black" stroke-width="0.25"/>
    <g transform="translate(240,25 )" font-size="16" fill="#555" text-anchor="middle">
      <text xml:id="display-title" x="0" y="2" font-size="16" fill="black" text-anchor="middle">Animation Elements testing initialVisibility</text>
      <text xml:id="comment-1" x="0" y="17" font-size="10">
        Testing time-base animation control. Every time a scale shows up, its own time should be 0
      </text>
    </g>
    <g font-size="10" fill="#555" transform="translate(0,23)">
      <g transform="translate(40,40)">
        <g transform="translate(5, 0)">
          <line x1="0" y1="0" x2="0" y2="232" 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 xlink:href="../images/animation2.svg#myScale"/>
        <text x="120" y="5">Reference Timeline: starts at 0, goes through the scale in 10s, </text>
      </g>
      <g transform="translate(40,70)">
        <animation  xml:id="focus1" width="110" height="50" y="-5" begin="focus1.focusin" dur="2" end="focus1.focusout; indefinite" xlink:href="../images/animation2.svg" initialVisibility="always"/>
        <g focusable="false">
          <text x="120" y="0">1.</text>
          <text x="135" y="0">User event driven animation: starts upon</text>
          <text x="135" y="10"> text focusing, stops after 2s or focus lost</text>
          <text x="135" y="20"/>
          <set attributeName="fill" to="red" begin="focus1.focusin"/>
          <set attributeName="fill" to="inherit" begin="focus1.focusout"/>
        </g>
      </g>
      <g transform="translate(40,100)">
        <animation xml:id="focus2" width="110" height="50" y="-5" begin="focus2.focusin" dur="2" end="focus2.focusout; indefinite" xlink:href="../images/animation2.svg" initialVisibility="always"/>
        <g focusable="false" >
          <text x="120" y="0">2.</text>
          <text x="135" y="0">User event driven animation: starts upon</text>
          <text x="135" y="10"> text focusing, stops after 2s or focus lost</text>
          <text x="135" y="20"/>
          <set attributeName="fill" to="red" begin="focus2.focusin"/>
          <set attributeName="fill" to="inherit" begin="focus2.focusout"/>
        </g>
      </g>
      <g transform="translate(40,130)">
        <animation width="110" height="50" y="-5" xml:id="animation1" begin="myText1.mouseover" dur="2" end="myText1.mouseout; indefinite" xlink:href="../images/animation2.svg" initialVisibility="always"/>
        <g xml:id="myText1">
          <rect x="115" y="-10" height="22" width="300" fill="#EEE"/>
          <text x="120" y="0">3.</text>
          <text x="135" y="0">User event driven animation: starts upon</text>
          <text x="135" y="10">mouseover, stops after 2s or mouseout</text>
          <text x="135" y="20"/>
          <set attributeName="fill" to="red" begin="myText1.mouseover"/>
          <set attributeName="fill" to="inherit" begin="myText1.mouseout"/>
        </g>
      </g>
      <g transform="translate(40,160)">
        <animation width="110" height="50" y="-5" xml:id="animation2" begin="myText2.mouseover" dur="10" xlink:href="../images/animation2.svg" fill="freeze"  restart="always" initialVisibility="always" />
        <g xml:id="myText2">
          <rect x="115" y="-10" height="22" width="300" fill="#EEE"/>
          <text x="120" y="0">4.</text>
          <text x="135" y="0">User event driven animation: starts upon</text>
          <text x="135" y="10">mouseover. Stops after 10s</text>
          <text x="135" y="20"/>
          <set attributeName="fill" to="red" begin="myText2.mouseover"/>
          <set attributeName="fill" to="inherit" begin="myText2.mouseout"/>
        </g>
      </g>
      <g transform="translate(40,190)">
        <animation width="110" height="50" y="-5" xml:id="animation3" begin="animation1.begin;animation2.begin;" dur="2" xlink:href="../images/animation2.svg" initialVisibility="always"/>
        <g xml:id="myText3">
          <text x="120" y="0">5.</text>
          <text x="135" y="0">User event/animation event driven: runs</text>
          <text x="135" y="10">for 2s when animation (3) or (4) begins.</text>
          <text x="135" y="20"/>
          <set attributeName="fill" to="red" begin="myText1.mouseover;myText2.mouseover"/>
          <set attributeName="fill" to="inherit" begin="myText1.mouseout;myText2.mouseout"/>
        </g>
      </g>
      <g transform="translate(40,220)">
        <animation width="110" height="50" y="-5" xml:id="animation4" begin="focus1.end;focus2.end;animation1.end;animation2.end;animation3.end" dur="2" xlink:href="../images/animation2.svg" initialVisibility="always"/>
        <text x="120" y="0">6.</text>
        <text x="135" y="0">User event/animation event driven: runs</text>
        <text x="135" y="10">for 2s when animation (1) through (5) ends.</text>
      </g>
      <g transform="translate(40,250)">
        <animation width="110" height="50" y="-5" xml:id="animation5" begin="0;animation5.end" dur="2" xlink:href="../images/animation2.svg" repeatCount="15"/>
        <text x="120" y="5">7.</text>
        <text x="135" y="5">Animation events: starts at 0 and loops every two seconds.</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.12 $</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>