third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-21-t.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   3 <!--======================================================================-->
   4 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   5 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   6 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   7 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   8 <!--======================================================================-->
   9 <!--======================================================================-->
  10 <!-- animation-href-BE-02.svg                                             -->
  11 <!-- renamed for 1.1 suite to animate-elem-21-t                           -->
  12 <!-- Author : Chris lilley  22-Mar-2000                                   -->
  13 <!--======================================================================-->
  14 <svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
  15         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  16                 <OperatorScript version="$Revision: 1.8 $" testname="animate-elem-21-t.svg">
  17                         <Paragraph>
  18                 Test for chained animations
  19             </Paragraph>
  20                         <Paragraph>
  21                 The assumption is that you will first click on "fade in" and
  22                 then click on "fade out", each exactly once. The first time you
  23                 select the link 'fade in', you should see a red square appearing,
  24                 gradually and smoothly fading from white to red over the
  25                 course of three seconds. This square is in front of and thus
  26                 obscures the lower left circle, but is behind the upper right
  27                 circle. The fill color of these circles is also animated, from white to
  28                 grey. The animations are triggered by the start of the corresponding
  29                 animation of the red square.
  30             </Paragraph>
  31                         <Paragraph>
  32                 The rendered picture should match the reference image, (except
  33                 for possible variations in the labeling text (per CSS2 rules))
  34                 after activating the link on the fade-in button the first time
  35                 and waiting three seconds for the animation to compete. The picture
  36                 should remain looking the same way indefinitely, until another
  37                 link is activated.
  38             </Paragraph>
  39                         <Paragraph>
  40                 With the second click on "fade in", however, the behavior might
  41                 be different. In the case of having a first click on "fade in",
  42                 waiting three seconds, and then immediately perform a first click
  43                 on "fade out", waiting three seconds, and then immediately perform
  44                 a second click on "fade in", you should see the following. After
  45                 the first click on "fade in", the red square goes from zero to 100%
  46                 opacity. After the first click on "fade out", the red square goes
  47                 from red to white. After the second click on "fade in",
  48                 however, the red square goes from white to red, and then
  49                 goes back from red to white. This is because of the
  50                 hyperlinking rules as they relate to resolved start times in the
  51                 SMIL Animation specification.
  52             </Paragraph>
  53                 </OperatorScript>
  54         </SVGTestCase>
  55         <title id="test-title">animate-elem-21-t</title>
  56         <desc id="test-desc">See if animation, tiggered by links, works.</desc>
  57         <!--======================================================================-->
  58         <!--Content of Test Case follows...                  =====================-->
  59         <!--======================================================================-->
  60         <g id="test-body-content">
  61                 <circle stroke="white" stroke-width="30" fill="none" cx="100" cy="200" r="60">
  62                         <animate id="fadein" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="indefinite" dur="3s" fill="freeze"/>
  63                         <animate id="fadeout" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="indefinite" dur="3s" fill="freeze"/>
  64                 </circle>
  65                 <rect id="pink" x="20" y="20" width="180" height="180" fill="#fff">
  66                         <animate id="fadein2" attributeName="fill" attributeType="auto" from="#fff" to="red" begin="fadein.begin" dur="3s" fill="freeze"/>
  67                         <animate id="fadeout2" attributeName="fill" attributeType="auto" from="red" to="#fff" begin="fadeout.begin" dur="3s" fill="freeze"/>
  68                 </rect>
  69                 <circle stroke="white" stroke-width="20" fill="none" cx="200" cy="110" r="80">
  70                         <animate id="fadein3" attributeName="stroke" attributeType="auto" from="white" to="#666" begin="fadein.begin" dur="3s" fill="freeze"/>
  71                         <animate id="fadeout3" attributeName="stroke" attributeType="auto" from="#666" to="white" begin="fadeout.begin" dur="3s" fill="freeze"/>
  72                 </circle>
  73                 <!-- ok so this is testing dynamic compositing as well -->
  74                 <g id="buttons">
  75                         <a xlink:href="#fadein">
  76                                 <rect x="320" y="0" width="160" height="180" fill="green"/>
  77                                 <text fill="white" font-size="30" font-weight="bold" x="330" y="90">Fade in</text>
  78                         </a>
  79                         <a xlink:href="#fadeout">
  80                                 <rect x="320" y="180" width="160" height="180" fill="maroon"/>
  81                                 <text fill="white" font-size="30" font-weight="bold" x="330" y="280">Fade out</text>
  82                         </a>
  83                 </g>
  84         </g>
  85         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.8 $</text>
  86         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  87 </svg>