third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-82-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 additive behavior" status="accepted" version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-82-t.svg,v $">
  11         <OperatorScript>
  12             <Paragraph>
  13                 This test demonstrates validates the operation of
  14                 animateTransform with regards to the rotation center
  15                 and with regards to paced animation.
  16             </Paragraph>
  17             <Paragraph>
  18                 The following descriptions describe the various animations,
  19                 going top bottom, left to right. For each animation, orange
  20                 rectangle markers show the expected position for the animated rectangle
  21                 halfway through the animation. The markers are drawn with a thick
  22                 stroke for 0.2s, starting at the time when they reflect the
  23                 expected position.
  24             </Paragraph>
  25             <Paragraph>
  26                 The first animateTransform has type='rotate' and goes from
  27                 45 degrees to 90 degrees over a period of 3s. The rotation
  28                 center for the from and to values is 0, 0. At 0 seconds, the
  29                 expected transform should be rotate(45). At 1.5 seconds, the
  30                 expected transform is rotate(0.5 * (90 + 45)) = rotate(67.5).
  31                 At 3s, the expected transform is rotate(90).
  32             </Paragraph>
  33
  34             <Paragraph>
  35                 The second animateTransform has type='rotate' but has a
  36                 rotation center that varies between the from and to values.
  37                 The rotation goes from rotate(45,0,0) to rotate(90,-15,-15).
  38                 At 0s, the expected transform is rotate(45,0,0).
  39                 At 1.5s, the expected transform is rotate(67.5, -7.5, -7.5).
  40                 At 3s, the expected transform is rotate(90, -15, -15).
  41             </Paragraph>
  42
  43             <Paragraph>
  44                 The third animateTransform has type='translate' and calcMode='paced'.
  45                 The animation goes from translate(-40,40) to translate(-20,20) to
  46                 translate(40,-40).
  47                 At 0s, the expected transform is translate(-40,40).
  48                 At 1.5s, the expected transform is translate(0,0).
  49                 At 3s, the expected transform is translate(40,-40).
  50             </Paragraph>
  51
  52             <Paragraph>
  53                 The fourth animateTransform has type='translate' and calcMode='linear'.
  54                 The animation goes from translate(-40,40) to translate(-20,-20) to
  55                 translate(40,-40).
  56                 At 0s, the expected transform is translate(-40,40).
  57                 At 1.5s, the expected transform is translate(-20,-20).
  58                 At 3s, the expected transform is translate(40,-40).
  59             </Paragraph>
  60
  61             <Paragraph>
  62                 The fifth animateTransform has type='scale' and calcMode='paced'.
  63                 The animation goes from scale(1,2) to scale(3,2) to
  64                 scale(1,1). The total length along the sx component is 2 + 2 = 4.
  65                 The total length along the sy component is 0 + 1 = 1.
  66                 At 0s, the expected transform is scale(1,2).
  67                 At 1.5s, the expected transform is scale(3,1.5) so that a length of
  68                 2 has been run on the sx component and a length of 0.5 has been
  69                 run on the sy component.
  70                 At 3s, the expected transform is scale(3,2).
  71             </Paragraph>
  72
  73             <Paragraph>
  74                 The sixth animateTransform has type='scale' and calcMode='linear'.
  75                 The animation goes from scale(1,2) to scale(3,2) to
  76                 scale(1,1).
  77                 At 0s, the expected transform is scale(1,2).
  78                 At 1.5s, the expected transform is scale(3,2).
  79                 At 3s, the expected transform is scale(1,1).
  80             </Paragraph>
  81
  82             <Paragraph>
  83                 The seventh animateTransform has type="rotate" and calcMode='paced'.
  84                 The animation goes from rotate(0,0,0) to rotate(45,-15,-20) to
  85                 rotate(180,30,50). The total length along the rotation angle component
  86                 is (45 - 0) + (180 - 45) = 180. The total length along the rotation
  87                 center along the x axis is (0 - (-15)) + (30 - (-15)) = 45 + 15 = 60.
  88                 The total length along the rotation center along the y axis is
  89                 (0 - (-20)) + (50 - (-20)) = 20 + 70 = 90.
  90                 At 0s, the expected transform is rotate(45,-15,-20).
  91                 At 1.5s, the expected transform is rotate(90,0,5) to achieve constant
  92                 velocity along the rotation angle component, the x-axis rotation center
  93                 component and the y-axis rotation center component. At 1.5s, half the
  94                 distance has been run on each component. For the rotation angle, this
  95                 means that 45 has been reached and that 45 more degrees in the (45 &lt;= r &lt; 180)
  96                 interval have been consumed. For the x-axis rotation center, this means
  97                 that 30 units have been run: the (0 &gt;= x &gt; -15) interval has been fully consumed
  98                 (15 units long) and 15 units on the (-15 &lt;= x &lt; 30) interval have been consumed,
  99                 which explains the computed 0 value. For the y-axis rotation center, this
 100                 means that 45 units have been run: the (0 &gt;= y &gt; -20) interval has been fully
 101                 consumed and 25 units have been consumed in the (-20 &lt;= y &lt; 50) interval, which
 102                 explains the computed 5 value.
 103                 At 3s, the expected transform is rotate(180,30,50).
 104             </Paragraph>
 105         </OperatorScript>
 106     </SVGTestCase>
 107     <title id="test-title">$RCSfile: animate-elem-82-t.svg,v $</title>
 108
 109     <!--======================================================================-->
 110     <!--Content of Test Case follows...                  =====================-->
 111     <!--======================================================================-->
 112     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
 113     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 114
 115     <text text-anchor="middle" x="240" y="25" font-size="16">&lt;animateTransform&gt;</text>
 116
 117     <defs>
 118         <g id="ref" stroke="rgb(192,192,192)" fill="none">
 119             <circle stroke-width="2" r="40"/>
 120             <line x1="-45" x2="45"/>
 121             <line y1="-45" y2="45"/>
 122          </g>
 123     </defs>
 124
 125     <g transform="translate(0,0)">
 126
 127         <g transform="translate(60,90)">
 128             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 129                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45" to="90" dur="3s" additive="replace" fill="freeze"/>
 130             </rect>
 131
 132             <rect x="-15" y="-15" width="30" height="30" transform="rotate(45)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 133                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 134             </rect>
 135
 136             <rect x="-15" y="-15" width="30" height="30" transform="rotate(67.5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 137                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 138             </rect>
 139
 140             <rect x="-15" y="-15" width="30" height="30" transform="rotate(90)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 141                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 142             </rect>
 143
 144             <text y="60" text-anchor="middle">same rotation</text>
 145             <text y="75" text-anchor="middle">center</text>
 146         </g>
 147
 148         <g transform="translate(180,90)">
 149             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 150                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="45,0,0" to="90,-15,-15" dur="3s" additive="replace" fill="freeze"/>
 151             </rect>
 152             <rect x="-15" y="-15" width="30" height="30" transform="rotate(45,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 153                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 154             </rect>
 155
 156             <rect x="-15" y="-15" width="30" height="30" transform="rotate(67.5,-7.5,-7.5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 157                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 158             </rect>
 159
 160             <rect x="-15" y="-15" width="30" height="30" transform="rotate(90,-15,-15)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 161                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 162             </rect>
 163
 164             <text y="60" text-anchor="middle">different rotation</text>
 165             <text y="75" text-anchor="middle">centers</text>
 166         </g>
 167
 168         <g transform="translate(300,90)">
 169             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 170                 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="-40,40;-20,20;40,-40" dur="3s" calcMode="paced" additive="replace" fill="freeze"/>
 171             </rect>
 172             <rect x="-15" y="-15" width="30" height="30" transform="translate(-40,40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 173                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 174             </rect>
 175
 176             <rect x="-15" y="-15" width="30" height="30" transform="translate(0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 177                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 178             </rect>
 179
 180             <rect x="-15" y="-15" width="30" height="30" transform="translate(40,-40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 181                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 182             </rect>
 183
 184             <text y="75" text-anchor="middle">paced translation</text>
 185         </g>
 186
 187         <g transform="translate(420,90)">
 188             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 189                 <animateTransform attributeName="transform" attributeType="XML" type="translate" values="-40,40;-20,-20;40,-40" dur="3s" calcMode="linear" additive="replace" fill="freeze"/>
 190             </rect>
 191             <rect x="-15" y="-15" width="30" height="30" transform="translate(-40,40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 192                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 193             </rect>
 194
 195             <rect x="-15" y="-15" width="30" height="30" transform="translate(-20,-20)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 196                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 197             </rect>
 198
 199             <rect x="-15" y="-15" width="30" height="30" transform="translate(40,-40)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 200                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 201             </rect>
 202
 203             <text y="75" text-anchor="middle">linear translation</text>
 204
 205         </g>
 206
 207         <g transform="translate(60,220)">
 208             <rect x="-15" y="-15" width="30" height="30" stroke="none" fill="rgb(230,230,230)">
 209                 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,2;3,2;1,1" dur="3s" calcMode="paced" fill="freeze"/>
 210             </rect>
 211
 212             <rect x="-15" y="-30" width="30" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 213                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 214             </rect>
 215
 216             <rect x="-45" y="-22.5" width="90" height="45" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 217                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 218             </rect>
 219
 220             <rect x="-15" y="-15" width="30" height="30" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 221                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 222             </rect>
 223
 224             <text y="60" text-anchor="middle">paced scale</text>
 225         </g>
 226
 227         <g transform="translate(180,220)">
 228             <rect x="-15" y="-15" width="30" height="30" stroke="none" fill="rgb(230,230,230)">
 229                 <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,2;3,2;1,1" dur="3s" calcMode="linear" fill="freeze"/>
 230             </rect>
 231
 232             <rect x="-15" y="-30" width="30" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 233                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 234             </rect>
 235
 236             <rect x="-45" y="-30" width="90" height="60" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 237                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 238             </rect>
 239
 240             <rect x="-15" y="-15" width="30" height="30" transform="scale(1,1)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 241                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 242             </rect>
 243
 244             <text y="60" text-anchor="middle">linear scale</text>
 245         </g>
 246
 247         <g transform="translate(300,220)">
 248             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 249                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,0,0;45,-15,-20;180,30,50" dur="3s" calcMode="paced" additive="replace" fill="freeze"/>
 250             </rect>
 251             <rect x="-15" y="-15" width="30" height="30" transform="rotate(0,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 252                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 253             </rect>
 254
 255             <rect x="-15" y="-15" width="30" height="30" transform="rotate(90,0,5)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 256                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 257             </rect>
 258
 259             <rect x="-15" y="-15" width="30" height="30" transform="rotate(180,30,50)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 260                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 261             </rect>
 262
 263             <text y="75" text-anchor="middle">paced rotation</text>
 264         </g>
 265
 266         <g transform="translate(420,220)">
 267             <rect x="-15" y="-15" width="30" height="30" stroke="gray" stroke-width="4" fill="rgb(230,230,230)">
 268                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0,0,0;45,-15,-20;180,30,50" dur="3s" calcMode="linear" additive="replace" fill="freeze"/>
 269             </rect>
 270             <rect x="-15" y="-15" width="30" height="30" transform="rotate(0,0,0)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 271                 <set attributeName="stroke-width" to="4" begin="0s" dur="0.2s"/>
 272             </rect>
 273
 274             <rect x="-15" y="-15" width="30" height="30" transform="rotate(45,-15,-20)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 275                 <set attributeName="stroke-width" to="4" begin="1.5s" dur="0.2s"/>
 276             </rect>
 277
 278             <rect x="-15" y="-15" width="30" height="30" transform="rotate(180,30,50)" stroke="rgb(255,180,0)" stroke-width="1" fill="none">
 279                 <set attributeName="stroke-width" to="4" begin="3s" dur="0.2s"/>
 280             </rect>
 281
 282             <text y="75" text-anchor="middle">linear rotation</text>
 283         </g>
 284
 285
 286     </g>
 287 </svg>