third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-29-b.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.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 <!--                                                                      -->
  11 <!-- animation-href-BE-02.svg                                             -->
  12 <!-- renamed for 1.1 suite to animate-elem-21-t                           -->
  13 <!--                                                                      -->
  14 <!-- a quick animation test                                               -->
  15 <!--                                                                      -->
  16 <!-- Author : Chris lilley  22-Mar-2000                                   -->
  17 <!--                                                                      -->
  18 <!-- History:                                                             -->
  19 <!--  22 March 2000, CL, created                                          -->
  20 <!--  05 April 2000, LH, "animation" name and minor editorials; ser#2.    -->
  21 <!--  17 May 2000, LH, chg opacity 50% to 0.5; ser#3.                     -->
  22 <!--  19 May 2000, LH, make both "to" and "from" explicit; ser#4.         -->
  23 <!--  03-Aug-2000, LH: update DOCTYPE for CR DTD, 20000802; ser# .        -->
  24 <!--  14-Nov-2000, LH: move defs into test-body-content.                  -->
  25 <!--                                                                      -->
  26 <!--======================================================================-->
  27 <!--======================================================================-->
  28 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
  29 <!--= log messages, and therefore is no longer in the preceding preamble.=-->
  30 <!--======================================================================-->
  31 <svg version="1.1" 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">
  32         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  33                 <OperatorScript version="$Revision: 1.5 $" testname="animate-elem-29-b.svg">
  34                         <Paragraph>
  35                 Test compositing of animated fill opacity.
  36             </Paragraph>
  37                         <Paragraph>
  38                 The assumption is that you will first click on "fade in" and
  39                 then click on "fade out", each exactly once. The first time you
  40                 select the link 'fade in', you should see a red square appearing,
  41                 gradually and smoothly fading from zero to 100% opacity over the
  42                 course of three seconds. This square is in front of and thus
  43                 obscures the lower left circle, but is behind the upper right
  44                 circle which is thus is composited on top of the animated red
  45                 square. Then, when you click on "fade out", the red square will
  46                 gradually disappear, smoothly fading from 100% to zero opacity
  47                 over the course of three seconds.
  48             </Paragraph>
  49                         <Paragraph>
  50                 The rendered picture should match the reference image, (except
  51                 for possible variations in the labelling text (per CSS2 rules))
  52                 after activating the link on the fade-in button the first time
  53                 and waiting three seconds for the animation to compete. The picture
  54                 should remain looking the same way indefinitely, until another
  55                 link is activated.
  56             </Paragraph>
  57                         <Paragraph>
  58                 With the second click on "fade in", however, the behavior might
  59                 be different. In the case of having a first click on "fade in",
  60                 waiting three seconds, and then immediately perform a first click
  61                 on "fade out", waiting three seconds, and then immediately perform
  62                 a second click on "fade in", you should see the following. After
  63                 the first click on "fade in", the red square goes from zero to 100%
  64                 opacity. After the first click on "fade out", the red square goes
  65                 from 100% to zero opacity. After the second click on "fade in",
  66                 however, the red square goes from zero to 100% opacity, and then
  67                 goes back from 100% to zero opacity. This is because of the
  68                 hyperlinking rules as they relate to resolved start times in the
  69                 SMIL Animation specification.
  70             </Paragraph>
  71                 </OperatorScript>
  72         </SVGTestCase>
  73         <title id="test-title">animate-elem-29-b</title>
  74         <desc id="test-desc">See if animation, tiggered by links, works.</desc>
  75         <!--======================================================================-->
  76         <!--Content of Test Case follows...                  =====================-->
  77         <!--======================================================================-->
  78         <g id="test-body-content">
  79                 <circle stroke="#666" stroke-width="30" fill="none" cx="100" cy="200" r="60"/>
  80                 <rect id="pink" x="20" y="20" width="180" height="180" fill="#f00" fill-opacity="0">
  81                         <animate id="fadein" attributeName="fill-opacity" attributeType="auto" from="0" to="1"  begin="indefinite" dur="3s" fill="freeze"/>
  82                         <animate id="fadeout" attributeName="fill-opacity" attributeType="auto" from="1" to="0"  begin="indefinite" dur="3s" fill="freeze"/>
  83                 </rect>
  84                 <circle stroke="#666" stroke-width="20" fill="none" cx="200" cy="110" r="80"/>
  85                 <g id="buttons">
  86                         <a xlink:href="#fadein">
  87                                 <rect x="320" y="0" width="160" height="180" fill="green"/>
  88                                 <text fill="white" font-size="30" font-weight="bold" x="330" y="90">Fade in</text>
  89                         </a>
  90                         <a xlink:href="#fadeout">
  91                                 <rect x="320" y="180" width="160" height="180" fill="maroon"/>
  92                                 <text fill="white" font-size="30" font-weight="bold" x="330" y="280">Fade out</text>
  93                         </a>
  94                 </g>
  95         </g>
  96         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.5 $</text>
  97         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  98 </svg>