SVGViewTests/w3c/1.2T/svg/udom-svgtimedelement-203-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="[reviewer]" owner="ASl" desc="Test active intervals with pause/resume element and restart 'always'" status="created"
    approved="no"
    version="$Revision: 1.3 $" testname="$RCSfile: udom-svgtimedelement-203-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        Test on SMIL with scripting. Animation should match the indicated begin- and end-values,
        and should pause for three seconds when the pause-sign turn red.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: udom-svgtimedelement-203-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>
      <polygon xml:id="arrow" points="0,0, 3,-8, -3,-8"/>
    </defs>

    <text x="100" y="35">restart: always</text>

    <text x="310" y="100" text-anchor="middle">begin</text>
    <text x="370" y="100" text-anchor="middle">end</text>

    <!--======================================================================-->
    <text x="100" y="120">begin: 0;3;5.5</text>

    <text x="310" y="115" text-anchor="middle">0-1</text>
    <text x="310" y="130" text-anchor="middle">3-4</text>
    <text x="310" y="145" text-anchor="middle">5.5-6.5</text>
    <text x="370" y="115" text-anchor="middle">3-4</text>
    <text x="370" y="130" text-anchor="middle">5.5-6.5</text>
    <text x="370" y="145" text-anchor="middle">7.5-8.5</text>

    <rect x="100" y="150" width="100" height="10" stroke="#555" fill="#AAA"/>

    <rect x="100" y="150" width="20" height="10" stroke="#000" fill="#FA5">
      <animate xml:id="anim_1" attributeName="width" from="20" to="100"
               begin="0;3;5.5" dur="2" restart="always" fill="freeze"/>
    </rect>

    <rect x="300" y="150" width="20" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.beginEvent" dur="1"/>
      <set attributeName="stroke" to="#000" begin="anim_1.beginEvent" dur="1"/>
    </rect>

    <rect x="360" y="150" width="20" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.endEvent" dur="1"/>
      <set attributeName="stroke" to="#000" begin="anim_1.endEvent" dur="1"/>
    </rect>

    <use xlink:href="#arrow" x="120" y="150">
      <animate attributeName="x"
               values="  120; 160;   160; 120; 120;   180;   120;   200;"
               keyTimes="0;   0.133; 0.4; 0.4; 0.533; 0.733; 0.733; 1"
               begin="0" dur="7.5" fill="freeze"/>
    </use>

    <!--======================================================================-->
    <text x="100" y="220">begin: 0;3;5.5</text>
    <text x="200" y="220">end: 2.5;9</text>

    <text x="310" y="215" text-anchor="middle">0-1</text>
    <text x="310" y="230" text-anchor="middle">3-4</text>
    <text x="310" y="245" text-anchor="middle">5.5-6.5</text>
    <text x="370" y="215" text-anchor="middle">2.5-3.5</text>
    <text x="370" y="230" text-anchor="middle">5.5-6.5</text>
    <text x="370" y="245" text-anchor="middle">7.5-8.5</text>

    <rect x="100" y="250" width="100" height="10" stroke="#555" fill="#AAA"/>

    <rect x="100" y="250" width="20" height="10" stroke="#000" fill="#FA5">
      <animate xml:id="anim_2" attributeName="width" from="20" to="100"
               begin="0;3;5.5" end="2.5;9" dur="2" restart="always" fill="freeze"/>
    </rect>

    <rect x="300" y="250" width="20" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.beginEvent" dur="1"/>
      <set attributeName="stroke" to="#000" begin="anim_2.beginEvent" dur="1"/>
    </rect>

    <rect x="360" y="250" width="20" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.endEvent" dur="1"/>
      <set attributeName="stroke" to="#000" begin="anim_2.endEvent" dur="1"/>
    </rect>

    <use xlink:href="#arrow" x="120" y="250">
      <animate attributeName="x"
               values="  120; 160;   160; 120; 120;   180;   120;   200;"
               keyTimes="0;   0.133; 0.4; 0.4; 0.533; 0.733; 0.733; 1"
               begin="0" dur="7.5" fill="freeze"/>
    </use>

    <!--======================================================================-->
    <rect x="300" y="20" width="80" height="20" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#F00" begin="pause_anim.begin" end="pause_anim.end"/>
      <set attributeName="stroke" to="#000" begin="pause_anim.begin" end="pause_anim.end"/>
    </rect>

    <text x="340" y="35" text-anchor="middle" fill="#AAA">
      Pause 3s
      <set attributeName="fill" to="#000" begin="pause_anim.begin" end="pause_anim.end"/>
    </text>

    <animate xml:id="pause_anim" attributeName="visibility"
             from="visible" to="visible" begin="1" dur="3">

      <handler type="text/ecmascript" xe:event="beginEvent">
        document.getElementById("anim_1").pauseElement();
        document.getElementById("anim_2").pauseElement();
      </handler>

      <handler type="text/ecmascript" xe:event="endEvent">
        document.getElementById("anim_1").resumeElement();
        document.getElementById("anim_2").resumeElement();
      </handler>

    </animate>


    <text y="300" x="100 120 140 160 180 200 220 240 260 280 290"
          text-anchor="middle">0123456789(s)</text>
    <rect x="100" y="305" width="180" height="3"/>
    <rect x="100" y="305" width="180" height="3" fill="#F00">
      <animate attributeName="width" values="0;180" dur="9" fill="freeze"/>
    </rect>


  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.3 $</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>