SVGViewTests/w3c/1.1F2/svg/animate-elem-90-b.svg

<svg version="1.1" baseProfile="tiny" 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">
  <!--======================================================================-->
  <!--=  SVG 1.1 2nd Edition Test Case                                     =-->
  <!--======================================================================-->
  <!--=  Copyright 2010 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/.                          =-->
  <!--======================================================================-->
  <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
    template-version="1.4" reviewer="ED" author="CL" status="accepted"
    version="$Revision: 1.3 $" testname="$RCSfile: animate-elem-90-b.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
        <p>
          Test that the class attribute is animatable and that style 
	sheets select on the animated value.
<!-- not clear whether to link to dev.w3.org or to /TR
http://dev.w3.org/SVG/profiles/1.1F2/publish/styling.html#ClassAttribute
-->

        </p>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
      <p>
        This test uses the following elements : 'set',
        and 'animate'. It requires that CSS style sheets are supported.
      </p>
      <p>
        The test shows a circle which is initially hidden, becomes visible and blue at 
	3s, abruptly changing to dark red at 5s. Two overlapping animations both animate the 
	class attribute. The class attribute, as a string value, does not support 
	linear interpolation so a discrete animation is produced, changing from the 
	start to the end value midway through the animation duration.
      </p>
      <p>
	The first animation starts at 2s and lasts for 4s so  the mid point is at 3s.
	The second animation starts at 3s and lasts for 4s so the midpoint is at 5s.
        The file includes various guides that can be used to verify the
        correctness of the animation. The value of the class attribute
	at 02 is "start" so the first CSS rule matches. At 3s it becomes "midway" 
	so the second rule matches. At 5s it becomes "final midway" so the second and 
	third rules match; the third rule has higher specificity so determines the fill color.
        
      </p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>
        The color of the large circle must match the colour of the smaller guide 
	boxes on the left  at times 0s, 3s and 5s. If the text "CSS not supported"
	is visible, the test does not apply.
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: animate-elem-90-b.svg,v $</title>
  <defs>
    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
    <style type="text/css">
	.start {visibility: hidden }
	.midway {visibility: visible; fill: rgb(0,0,255); }
	#test-body-content .final {fill: rgb(128,0,0); }
	.hideme {display: none;}
    </style>
  </defs>
  <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <!-- Guide objects to show where the animation elements belong at which time -->
    <g font-family="Verdana" font-size="12">
      <text x="15" y="55">Color at start</text>
      <rect x="15" y="60" width="30" height="30"/>
      <circle cx="30" cy="75" r="10" fill="#000"/>
      <text x="15" y="145">Color at 3s</text>
      <rect x="15" y="150" width="30" height="30"/>
      <circle cx="30" cy="165" r="10" fill="rgb(0,0,255)"/>
      <text x="15" y="235">Color at 5s</text>
      <rect x="15" y="240" width="30" height="30"/>
      <circle cx="30" cy="255" r="10" fill="rgb(128,0,0)"/>
    </g>

    <g>
      <rect x="150" y="50" width="240" height="240" stroke="black" fill="black"/>
      <circle cx="270" cy="170" r="110" class="start">
        <set attributeName="class" attributeType="XML" to="midway" begin="2s" dur="2s" fill="freeze"/>
        <animate attributeName="class" attributeType="XML" from="midway" to="final midway" begin="3s" dur="4s" fill="freeze"/>
      </circle>
    </g>
    <text x="270" y="170" text-anchor="middle" font-size="40" fill="#F69" class="hideme">CSS not supported</text>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.3 $</text>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  <!-- comment out this watermark once the test is approved -->
  <!--<g 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>