SVGViewTests/w3c/1.2T/svg/animate-elem-21-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="AE" owner="CL" desc="See if animation, triggered by links, works." status="accepted"
    approved="yes"
    version="$Revision: 1.9 $" testname="$RCSfile: animate-elem-21-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 for chained animations</p>
      <p>
        The assumption is that you will first click on "fade in" and then click on "fade out", each exactly once. The
        first time you select the link 'fade in', you should see a red square appearing, gradually and smoothly fading
        from white to red over the course of three seconds. This square is in front of and thus obscures the lower left
        circle, but is behind the upper right circle. The fill color of these circles is also animated, from white to grey.
        The animations are triggered by the start of the corresponding animation of the red square.
      </p>
      <p>
        The rendered picture should match the reference image, (except for possible variations in the labeling text
        (per CSS2 rules)) after activating the link on the fade-in button the first time and waiting three seconds for the
        animation to compete. The picture should remain looking the same way indefinitely, until another link is activated.
      </p>
      <p>
        With the second click on "fade in", however, the behavior might be different. In the case of having a first click
        on "fade in", waiting three seconds, and then immediately perform a first click on "fade out", waiting three seconds,
        and then immediately perform a second click on "fade in", you should see the following. After the first click on
        "fade in", the red square goes from zero to 100% opacity. After the first click on "fade out", the red square goes
        from red to white. After the second click on "fade in", however, the red square goes from white to red, and then
        goes back from red to white. This is because of the hyperlinking rules as they relate to resolved start times in
        the SMIL 2.1 specification.
      </p>
    </d:OperatorScript> 
  </SVGTestCase> 
  <title xml:id="test-title">$RCSfile: animate-elem-21-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">
    <circle stroke="white" stroke-width="30" fill="none" cx="100" cy="200" r="60"> 
      <animate xml:id="fadein" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="indefinite" dur="3s" fill="freeze" /> 
      <animate xml:id="fadeout" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="indefinite" dur="3s" fill="freeze" /> 
    </circle>
    <rect xml:id="pink" x="20" y="20" width="180" height="180" fill="#fff"> 
      <animate xml:id="fadein2" attributeName="fill" attributeType="auto" from="#fff" to="red" begin="fadein.begin" dur="3s" fill="freeze" /> 
      <animate xml:id="fadeout2" attributeName="fill" attributeType="auto" from="red" to="#fff" begin="fadeout.begin" dur="3s" fill="freeze" /> 
    </rect>
    <circle stroke="white" stroke-width="20" fill="none" cx="200" cy="110" r="80"> 
      <animate xml:id="fadein3" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="fadein.begin" dur="3s" fill="freeze" /> 
      <animate xml:id="fadeout3" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="fadeout.begin" dur="3s" fill="freeze" /> 
    </circle>
    <!-- ok so this is testing dynamic compositing as well -->
    <g xml:id="buttons"> 
      <a xlink:href="#fadein"> 
        <rect x="320" y="0" width="160" height="180" fill="green" /> 
        <text fill="white" font-size="30" font-weight="bold" x="330" y="90">Fade in</text> 
      </a> 
      <a xlink:href="#fadeout"> 
        <rect x="320" y="180" width="160" height="180" fill="maroon" /> 
        <text fill="white" font-size="30" font-weight="bold" x="330" y="280">Fade out</text> 
      </a> 
    </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.9 $</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>