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

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--======================================================================-->
   3 <!--=  Copyright 2004 World Wide Web Consortium, (Massachusetts          =-->
   4 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   5 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   6 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   7 <!--======================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   8
   9 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
  10     <SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="CN" owner="VH" desc="Test on the animateTransform type attribute" status="accepted" version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-80-t.svg,v $">
  11         <OperatorScript>
  12             <Paragraph>
  13                 This test demonstrates validates the operation of the
  14                 animateTransform element and validates the operation
  15                 of the different type attribute values.
  16             </Paragraph>
  17             <Paragraph>
  18                 There are 5 possible values for the type attribute and
  19                 there is one animateTransform for each type and two for
  20                 the translate type.
  21             </Paragraph>
  22             <Paragraph>
  23                 For each transform type, the test has a corresponding animateTransform.
  24                 The test uses references to show what the expected transform should be
  25                 at different points in the animation. For example, the top left
  26                 animateTransform, for type=rotate, shows circular markers which turn
  27                 orange at the time of corresponding transform value should be set by the
  28                 animateTransform.
  29                 The marker elements show the expected transform value on reference
  30                 markers in the test.
  31             </Paragraph>
  32         </OperatorScript>
  33     </SVGTestCase>
  34     <title id="test-title">$RCSfile: animate-elem-80-t.svg,v $</title>
  35
  36     <!--======================================================================-->
  37     <!--Content of Test Case follows...                  =====================-->
  38     <!--======================================================================-->
  39     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
  40     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  41
  42     <text text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
  43
  44     <defs>
  45         <g id="ref" stroke="rgb(192,192,192)" fill="none">
  46             <circle stroke-width="2" r="40"/>
  47             <line x1="-45" x2="45"/>
  48             <line y1="-45" y2="45"/>
  49          </g>
  50     </defs>
  51
  52     <g transform="translate(0,0)">
  53
  54         <g transform="translate(60,90)">
  55             <use xlink:href="#ref"/>
  56
  57             <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0)">
  58                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
  59             </line>
  60
  61             <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90)">
  62                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
  63             </line>
  64
  65             <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180)">
  66                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
  67             </line>
  68
  69             <line x1="40" x2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270)">
  70                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
  71             </line>
  72
  73             <line x2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
  74                 <animateTransform attributeName="transform" type="rotate" values="0;360;0" begin="2s" dur="4s"/>
  75             </line>
  76
  77             <text y="60" text-anchor="middle">type=rotate</text>
  78         </g>
  79
  80         <g transform="translate(180,110)">
  81             <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(0)">
  82                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
  83             </line>
  84
  85             <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(45)">
  86                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
  87             </line>
  88
  89             <line y2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewX(-45)">
  90                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
  91             </line>
  92
  93             <line y2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
  94                 <animateTransform attributeName="transform" type="skewX" values="0;45;-45;0" begin="2s" dur="4s"/>
  95             </line>
  96             <text y="40" text-anchor="middle">type=skewX</text>
  97         </g>
  98
  99         <g transform="translate(300,90)">
 100             <g transform="translate(15,0)">
 101                 <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(0)">
 102                     <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
 103                 </line>
 104
 105             <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(30)">
 106                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.333s" dur="0.2s"/>
 107             </line>
 108
 109             <line x2="-40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="skewY(-30)">
 110                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4.666s" dur="0.2s"/>
 111             </line>
 112
 113             <line x2="-40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
 114                 <animateTransform attributeName="transform" type="skewY" values="0;30;-30;0" begin="2s" dur="4s"/>
 115             </line>
 116             </g>
 117
 118             <text y="60" text-anchor="middle">type=skewY</text>
 119         </g>
 120
 121         <g transform="translate(420,90)">
 122             <circle stroke="rgb(192,192,192)" stroke-width="4" r="40" fill="none">
 123                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
 124             </circle>
 125
 126             <circle stroke="rgb(192,192,192)" stroke-width="4" r="30" fill="none">
 127                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
 128             </circle>
 129
 130             <circle stroke="rgb(192,192,192)" stroke-width="4" r="20" fill="none">
 131                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
 132             </circle>
 133
 134             <circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none">
 135                 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
 136             </circle>
 137
 138             <circle fill="rgb(200,80,80)" r="10" transform="scale(4)">
 139                 <animateTransform attributeName="transform" type="scale" values="4,4;3,3;2,2;1,1" begin="2s" dur="3s" fill="freeze"/>
 140             </circle>
 141             <text y="60" text-anchor="middle">type=scale</text>
 142             <text y="75" text-anchor="middle">(sx and sy)</text>
 143         </g>
 144
 145
 146         <g transform="translate(20,180)">
 147             <use xlink:href="#ref" x="40" y="40"/>
 148
 149             <line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(0,40,40)">
 150                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s;4s;6s" dur="0.2s"/>
 151             </line>
 152
 153             <line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(90,40,40)">
 154                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2.5s;5.5s" dur="0.2s"/>
 155             </line>
 156
 157             <line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(180,40,40)">
 158                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s;5s" dur="0.2s"/>
 159             </line>
 160
 161             <line x1="80" y1="40" x2="80" y2="40" stroke-width="15" stroke-linecap="round" stroke="rgb(192,192,192)" transform="rotate(270,40,40)">
 162                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3.5s;4.5s" dur="0.2s"/>
 163             </line>
 164
 165             <line x1="40" y1="40" x2="80" y2="40" stroke-width="10" stroke-linecap="round" stroke="rgb(200,80,80)">
 166                 <animateTransform attributeName="transform" type="rotate" values="0 40 40;360 40 40;0 40 40" begin="2s" dur="4s"/>
 167             </line>
 168
 169             <text y="100" x="40" text-anchor="middle">type=rotate</text>
 170             <text y="115" x="40" text-anchor="middle">(with cx/cy)</text>
 171         </g>
 172
 173         <g transform="translate(180,220)">
 174             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" r="10" fill="none">
 175                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
 176             </circle>
 177
 178             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" r="10" fill="none">
 179                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
 180             </circle>
 181
 182             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
 183                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
 184             </circle>
 185
 186             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" r="10" fill="none">
 187                 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
 188             </circle>
 189
 190             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" r="10" fill="none">
 191                 <set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
 192             </circle>
 193
 194             <circle fill="rgb(200,80,80)" r="6" transform="translate(-40,0)">
 195                 <animateTransform attributeName="transform" type="translate" values="-40;-20;0;20;40" begin="2s" dur="4s" fill="freeze"/>
 196             </circle>
 197             <text y="60" text-anchor="middle">type=translate</text>
 198             <text y="75" text-anchor="middle">(tx only)</text>
 199         </g>
 200
 201         <g transform="translate(300,220)">
 202             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-40" cy="30" r="10" fill="none">
 203                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
 204             </circle>
 205
 206             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="-20" cy="15" r="10" fill="none">
 207                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
 208             </circle>
 209
 210             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="0" r="10" fill="none">
 211                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
 212             </circle>
 213
 214             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="20" cy="-15" r="10" fill="none">
 215                 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
 216             </circle>
 217
 218             <circle stroke="rgb(192,192,192)" stroke-width="4" cx="40" cy="-30" r="10" fill="none">
 219                 <set attributeName="stroke" to="rgb(250,200,30)" begin="6s" dur="0.2s"/>
 220             </circle>
 221
 222             <circle fill="rgb(200,80,80)" r="6" transform="translate(-40,30)">
 223                 <animateTransform attributeName="transform" type="translate" values="-40,30;-20,15;0,0;20,-15;40,-30" begin="2s" dur="4s" fill="freeze"/>
 224             </circle>
 225             <text y="60" text-anchor="middle">type=translate</text>
 226             <text y="75" text-anchor="middle">(tx and ty)</text>
 227         </g>
 228
 229         <g transform="translate(420,220)">
 230             <circle stroke="rgb(192,192,192)" stroke-width="1" r="10" fill="none" transform="scale(4,4)">
 231                 <set attributeName="stroke" to="rgb(250,200,30)" begin="2s" dur="0.2s"/>
 232             </circle>
 233
 234             <circle stroke="rgb(192,192,192)" stroke-width="1.3333" r="10" fill="none" transform="scale(3,3)">
 235                 <set attributeName="stroke" to="rgb(250,200,30)" begin="3s" dur="0.2s"/>
 236             </circle>
 237
 238             <circle stroke="rgb(192,192,192)" stroke-width="2" r="10" fill="none" transform="scale(2,2)">
 239                 <set attributeName="stroke" to="rgb(250,200,30)" begin="4s" dur="0.2s"/>
 240             </circle>
 241
 242             <circle stroke="rgb(192,192,192)" stroke-width="4" r="10" fill="none" transform="scale(1,1)">
 243                 <set attributeName="stroke" to="rgb(250,200,30)" begin="5s" dur="0.2s"/>
 244             </circle>
 245
 246             <circle fill="rgb(200,80,80)" r="10" transform="scale(4,4)">
 247                 <animateTransform attributeName="transform" type="scale" values="4;3;2;1" begin="2s" dur="3s" fill="freeze"/>
 248             </circle>
 249             <text y="60" text-anchor="middle">type=scale</text>
 250             <text y="75" text-anchor="middle">(sx only)</text>
 251         </g>
 252
 253     </g>
 254 </svg>