SVGViewTests/w3c/1.2T/svg/udom-svgtimedelement-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="[reviewer]" owner="ASl" desc="Tests syncbase behavior togheter with pause/resume element" status="created"
    approved="no"
    version="$Revision: 1.4 $" testname="$RCSfile: udom-svgtimedelement-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>
        Test on SMIL with scripting. The animated bar should pause for 3s at 1.5s and resume at 4.5s.
        The smaller rects should change color at the indicated times.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: udom-svgtimedelement-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="10">
    <text x="100" y="20" text-anchor="middle">repeatCount</text>

    <text x="70"  y="65" text-anchor="middle">0</text>
    <text x="90"  y="65" text-anchor="middle">1</text>
    <text x="110" y="65" text-anchor="middle">5</text>
    <text x="130" y="65" text-anchor="middle">6</text>
    <text x="150" y="65" text-anchor="middle">7</text>

    <text fill="#CCC" x="100" y="45" text-anchor="middle">
      pause 3s
      <set attributeName="fill" to="#F00"
           begin="pause_anim.begin" end="pause_anim.end" dur="indefinite"/>
    </text>

    <rect x="50" y="70" width="100" height="10" fill="#CCC" stroke="#555"/>
    <rect x="50" y="70" width="80"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="50" y="70" width="60"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="50" y="70" width="40"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="50" y="70" width="20"  height="10" fill="#CCC" stroke="#555"/>

    <rect x="50" y="95" width="20"  height="10" fill="#FA3" stroke="#000">

      <animate xml:id="anim_1" attributeName="width" from="0" to="20"
               begin="0" end="9" dur="1" repeatCount="4"
               accumulate="sum" additive="sum" fill="freeze">

      </animate>

    </rect>

    <line x1="100" y1="50" x2="100" y2="120" stroke="#CCC" stroke-opacity="0.5">
      <set attributeName="stroke" to="#F00"
           begin="pause_anim.begin" end="pause_anim.end" dur="indefinite"/>
    </line>


    <!--=========================================================================-->

    <text x="250" y="20" text-anchor="middle">repeatDur</text>

    <text x="220" y="65" text-anchor="middle">0</text>
    <text x="240" y="65" text-anchor="middle">1</text>
    <text x="260" y="65" text-anchor="middle">5</text>
    <text x="280" y="65" text-anchor="middle">6</text>
    <text x="300" y="65" text-anchor="middle">7</text>

    <text fill="#CCC" x="250" y="45" text-anchor="middle">
      pause 3s
      <set attributeName="fill" to="#F00"
           begin="pause_anim.begin" end="pause_anim.end" dur="indefinite"/>
    </text>

    <rect x="200" y="70" width="100" height="10" fill="#CCC" stroke="#555"/>
    <rect x="200" y="70" width="80"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="200" y="70" width="60"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="200" y="70" width="40"  height="10" fill="#CCC" stroke="#555"/>
    <rect x="200" y="70" width="20"  height="10" fill="#CCC" stroke="#555"/>

    <rect x="200" y="95" width="20"  height="10" fill="#FA3" stroke="#000">

      <animate xml:id="anim_2" attributeName="width" from="0" to="20"
               begin="0" end="9" dur="1" repeatDur="4"
               accumulate="sum" additive="sum" fill="freeze">

      </animate>

    </rect>

    <line stroke="#CCC" x1="250" y1="50" x2="250" y2="120" stroke-opacity="0.5">
      <set attributeName="stroke" to="#F00"
           begin="pause_anim.begin" end="pause_anim.end" dur="indefinite"/>
    </line>

    <!--=========================================================================-->

    <text x="280" y="140">end-3</text>
    <text x="280" y="160">end-2</text>
    <text x="280" y="180">A.begin-1</text>
    <text x="280" y="200">repeat(1)</text>
    <text x="280" y="220">repeat(2)</text>
    <text x="280" y="240">repeat(3)</text>
    <text x="280" y="260">repeat(4)</text>
    <text x="280" y="280">end-6</text>


    <!--=========================================================================-->

    <text x="80" y="140">&gt;1</text>
    <rect x="50" y="130" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.end-3"/>
      <set attributeName="stroke" to="#000" begin="anim_1.end-3"/>
    </rect>

    <text x="45" y="160" text-anchor="end">A</text>
    <text x="80" y="160">&gt;5</text>
    <rect x="50" y="150" width="25" height="10" fill="#CCC" stroke="#555">
      <set xml:id="A" attributeName="fill"   to="#FA5" begin="anim_1.end-2"/>
      <set attributeName="stroke" to="#000" begin="anim_1.end-2"/>
    </rect>

    <text x="80" y="180">&gt;1</text>
    <rect x="50" y="170" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="A.begin-1"/>
      <set attributeName="stroke" to="#000" begin="A.begin-1"/>
    </rect>

    <text x="80" y="200">&gt;1</text>
    <rect x="50" y="190" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.repeat(1)"/>
      <set attributeName="stroke" to="#000" begin="anim_1.repeat(1)"/>
    </rect>

    <text x="80" y="220">&gt;5</text>
    <rect x="50" y="210" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.repeat(2)"/>
      <set attributeName="stroke" to="#000" begin="anim_1.repeat(2)"/>
    </rect>

    <text x="80" y="240">&gt;6</text>
    <rect x="50" y="230" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.repeat(3)"/>
      <set attributeName="stroke" to="#000" begin="anim_1.repeat(3)"/>
    </rect>

    <text x="80" y="260">never</text>
    <rect x="50" y="250" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#F00" begin="anim_1.repeat(4)"/>
      <set attributeName="stroke" to="#000" begin="anim_1.repeat(4)"/>
    </rect>

    <text x="80" y="280">&gt;=0</text>
    <rect x="50" y="270" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_1.end-6"/>
      <set attributeName="stroke" to="#000" begin="anim_1.end-6"/>
    </rect>


    <!--=========================================================================-->
    <text x="230" y="140">&gt;1</text>
    <rect x="200" y="130" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.end-3"/>
      <set attributeName="stroke" to="#000" begin="anim_2.end-3"/>
    </rect>

    <text x="230" y="160">&gt;5</text>
    <rect x="200" y="150" width="25" height="10" fill="#CCC" stroke="#555">
      <set xml:id="B" attributeName="fill"   to="#FA5" begin="anim_2.end-2"/>
      <set attributeName="stroke" to="#000" begin="anim_2.end-2"/>
    </rect>

    <text x="230" y="180">&gt;1</text>
    <rect x="200" y="170" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="B.begin-1"/>
      <set attributeName="stroke" to="#000" begin="B.begin-1"/>
    </rect>

    <text x="230" y="200">&gt;1</text>
    <rect x="200" y="190" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.repeat(1)"/>
      <set attributeName="stroke" to="#000" begin="anim_2.repeat(1)"/>
    </rect>

    <text x="230" y="220">&gt;5</text>
    <rect x="200" y="210" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.repeat(2)"/>
      <set attributeName="stroke" to="#000" begin="anim_2.repeat(2)"/>
    </rect>

    <text x="230" y="240">&gt;6</text>
    <rect x="200" y="230" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.repeat(3)"/>
      <set attributeName="stroke" to="#000" begin="anim_2.repeat(3)"/>
    </rect>

    <text x="230" y="260">never</text>
    <rect x="200" y="250" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#F00" begin="anim_2.repeat(4)"/>
      <set attributeName="stroke" to="#000" begin="anim_2.repeat(4)"/>
    </rect>

    <text x="230" y="280">&gt;=0</text>
    <rect x="200" y="270" width="25" height="10" fill="#CCC" stroke="#555">
      <set attributeName="fill"   to="#FA5" begin="anim_2.end-6"/>
      <set attributeName="stroke" to="#000" begin="anim_2.end-6"/>
    </rect>


    <animate xml:id="pause_anim" attributeName="visibility" from="visible" to="visible"
             begin="1.5" 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="50 70 90 110 130 150 170 190 200"
          text-anchor="middle">01234567(s)</text>
    <rect x="50" y="305" width="140" height="3"/>
    <rect x="50" y="305" width="140" height="3" fill="#F00">
      <animate attributeName="width" values="0;140" dur="7" 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.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>