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

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- =====================================================================-->
   3 <!-- animate-elem-41-t.svg                                                -->
   4 <!--                                                                      -->
   5 <!-- Graphics properties animation with the animate element.              -->
   6 <!--                                                                      -->
   7 <!-- Author : [author]                                -->
   8 <!-- =====================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   9
  10 <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">
  11     <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="Animation of the various graphics properties with the animate element." status="accepted" version="$Revision: 1.9 $" testname="$RCSfile: animate-elem-41-t.svg,v $">
  12         <OperatorScript>
  13             <Paragraph>
  14                 This test validates the operation of the animate element on the various graphics
  15                 properties. This test is very similar to animate-elem-78-t which uses the set element
  16                 instead of the animate element to modify graphics properties.
  17             </Paragraph>
  18
  19             <Paragraph>
  20                 For each graphics properties, there are three tests. One animates the graphics
  21                 property directly on an element (such as a rect or a line) which uses the
  22                 property. The other two tests apply the animation on a container element (g and
  23                 a), and validate that the animated property is inherited by elements which
  24                 are child of the container.
  25             </Paragraph>
  26
  27             <Paragraph>
  28                 For each animation test, the element on which the animation is applied is also
  29                 translated by an animation so that the various states of the animation can
  30                 be checked more easily. In most tests, there is a gray reference marker which shows
  31                 the expected animation state at the begining of the animation, mid-way, or at the
  32                 end of the animation.
  33             </Paragraph>
  34
  35             <Paragraph>
  36                 The following animations should show continuous changes: fill, stroke,
  37                 stroke-width, stroke-miterlimit, stroke-dashoffset and color. Note that
  38                 visually, stroke-miterlimit shows a sharp transition, but that is because
  39                 the miter is cut off when the animated miter limit reaches the test sharp
  40                 angle's miter value. The stroke-miterlimit value is changed continously
  41                 but that is not visible in this test.
  42             </Paragraph>
  43
  44             <Paragraph>
  45                 The following animations have a discrete behavior: fill-rule, stroke-linecap,
  46                 stroke-linejoin, display and visibility.
  47             </Paragraph>
  48         </OperatorScript>
  49     </SVGTestCase>
  50     <text text-anchor="middle" x="240" y="25" font-size="20">graphics</text>
  51
  52     <g transform="translate(80, 75)">
  53
  54         <g transform="translate(30,10)" text-anchor="end" font-size="12">
  55             <text>fill</text>
  56             <text y="20">fill-rule</text>
  57             <text y="40">stroke</text>
  58             <text y="60">stroke-width</text>
  59             <text y="80">stroke-linecap</text>
  60             <text y="100">stroke-linejoin</text>
  61             <text y="120">stroke-miterlimit</text>
  62             <text y="140">stroke-dashoffset</text>
  63             <text y="160">display</text>
  64             <text y="180">visibility</text>
  65             <text y="200">color</text>
  66         </g>
  67
  68         <g id="type" transform="translate(90, -20)" text-anchor="middle" font-size="14">
  69             <text x="20" y="3">element</text>
  70             <text x="130" y="3">&lt;g&gt;</text>
  71             <text x="235" y="3">&lt;a&gt;</text>
  72         </g>
  73
  74         <g transform="translate(80,0)" fill="rgb(204,0,102)">
  75             <g id="setZero">
  76                 <defs>
  77                     <g id="animateZeroRef">
  78                         <rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/>
  79                         <rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/>
  80                         <rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/>
  81                     </g>
  82                 </defs>
  83                 <use xlink:href="#animateZeroRef"/>
  84                 <use xlink:href="#animateZeroRef" x="110"/>
  85                 <use xlink:href="#animateZeroRef" x="220"/>
  86
  87                 <rect x="10" width="8" height="8" fill="rgb(204,0,102)">
  88                     <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
  89                     <animate attributeName="x" to="40" dur="3s" fill="freeze"/>
  90                 </rect>
  91
  92                 <g transform="translate(110, 0)">
  93                     <rect x="10" width="8" height="8"/>
  94                     <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
  95                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
  96                 </g>
  97
  98                 <a transform="translate(220, 0)">
  99                     <rect x="10" width="8" height="8"/>
 100                     <animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
 101                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 102                 </a>
 103
 104             </g>
 105
 106             <g id="setOne" transform="translate(5,15)" stroke="rgb(204,0,102)">
 107                 <defs>
 108                     <g id="setOneRef" fill="#ccc" stroke="none">
 109                         <polyline stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10"/>
 110                         <polyline fill-rule="evenodd" stroke-width="1" points="20,10,0,10,15,20,10,2,5,20,20,10" transform="translate(30,0)"/>
 111                     </g>
 112                 </defs>
 113                 <use xlink:href="#setOneRef"/>
 114                 <use xlink:href="#setOneRef" x="110"/>
 115                 <use xlink:href="#setOneRef" x="220"/>
 116
 117                 <polyline points="20,10,0,10,15,20,10,2,5,20,20,10">
 118                     <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/>
 119                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 120                 </polyline>
 121
 122                 <g transform="translate(110, 0)">
 123                     <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/>
 124                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 125                     <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/>
 126                 </g>
 127
 128                 <a transform="translate(220, 0)">
 129                     <animate attributeName="fill-rule" to="evenodd" dur="3s" fill="freeze"/>
 130                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 131                     <polyline points="20,10,0,10,15,20,10,2,5,20,20,10"/>
 132                 </a>
 133
 134             </g>
 135
 136             <g id="setTwo" transform="translate(0,45)" fill="none">
 137                 <defs>
 138                     <g id="setTwoRef" fill="none" stroke-width="4">
 139                         <rect x="10" width="8" height="8" stroke="rgb(204,0,102)"/>
 140                         <rect x="10" width="8" height="8" transform="translate(15,0)" stroke="rgb(230,82,51)"/>
 141                         <rect x="10" width="8" height="8" transform="translate(30,0)" stroke="rgb(255,165,0)"/>
 142
 143                     </g>
 144                 </defs>
 145                 <use xlink:href="#setTwoRef"/>
 146                 <use xlink:href="#setTwoRef" x="110"/>
 147                 <use xlink:href="#setTwoRef" x="220"/>
 148
 149                 <rect x="10" width="8" height="8" stroke-width="3">
 150                     <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
 151                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 152                 </rect>
 153
 154                 <g transform="translate(110, 0)">
 155                     <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
 156                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 157                     <rect x="10" width="8" height="8" stroke-width="3"/>
 158                 </g>
 159
 160                 <a transform="translate(220, 0)">
 161                     <animate attributeName="stroke" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s"/>
 162                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 163                     <rect x="10" width="8" height="8" stroke-width="3"/>
 164                 </a>
 165             </g>
 166
 167             <g id="setThree" transform="translate(0,60)">
 168                 <defs>
 169                     <g id="setThreeRef">
 170                         <line x1="10" y1="3" x2="20" y2="3" stroke-width="1" stroke="gray"/>
 171                         <line x1="10" y1="3" x2="20" y2="3" stroke-width="5" stroke="gray" transform="translate(30,0)"/>
 172                     </g>
 173                 </defs>
 174
 175                 <use xlink:href="#setThreeRef"/>
 176                 <use xlink:href="#setThreeRef" x="110"/>
 177                 <use xlink:href="#setThreeRef" x="220"/>
 178
 179                 <line x1="10" y1="8" x2="20" y2="8" stroke="gray">
 180                     <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
 181                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 182                 </line>
 183
 184                 <g transform="translate(110, 0)">
 185                     <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
 186                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 187                     <line x1="10" y1="8" x2="20" y2="8" stroke="gray"/>
 188                 </g>
 189
 190                 <a transform="translate(220, 0)">
 191                     <animate attributeName="stroke-width" from="1" to="5" dur="3s" fill="freeze"/>
 192                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 193                     <line x1="10" y1="8" x2="20" y2="8" stroke="gray"/>
 194                 </a>
 195             </g>
 196
 197             <g id="setFour" transform="translate(0,80)" stroke-width="4" stroke="rgb(204,0,102)">
 198                 <defs>
 199                     <g id="setFourRef" stroke-width="12">
 200                         <line x1="10" y1="8" x2="12" y2="8" stroke="#ccc"/>
 201                         <line x1="10" y1="8" x2="12" y2="8" stroke-linecap="round" stroke="#ccc" transform="translate(30,0)"/>
 202                     </g>
 203                 </defs>
 204                 <use xlink:href="#setFourRef"/>
 205                 <use xlink:href="#setFourRef" x="110"/>
 206                 <use xlink:href="#setFourRef" x="220"/>
 207
 208                 <line x1="10" y1="8" x2="12" y2="8" stroke-width="12">
 209                     <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
 210                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 211                 </line>
 212
 213                 <g transform="translate(110, 0)">
 214                     <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
 215                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 216                     <line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/>
 217                 </g>
 218
 219                 <a transform="translate(220, 0)">
 220                     <animate attributeName="stroke-linecap" from="butt" to="round" dur="3s" fill="freeze"/>
 221                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 222                     <line x1="10" y1="8" x2="12" y2="8" stroke-width="12"/>
 223                 </a>
 224             </g>
 225
 226             <g id="setFive" transform="translate(5,100)" fill="none" stroke-miterlimit="10" stroke-width="3" stroke="rgb(204,0,102)">
 227                 <defs>
 228                     <g id="setFiveRef">
 229                         <polyline stroke="#ccc" points="5,2,20,5,5,8"/>
 230                         <polyline stroke="#ccc" points="5,2,20,5,5,8" stroke-linejoin="bevel" transform="translate(30,0)"/>
 231                     </g>
 232                 </defs>
 233                 <use xlink:href="#setFiveRef"/>
 234                 <use xlink:href="#setFiveRef" x="110"/>
 235                 <use xlink:href="#setFiveRef" x="220"/>
 236
 237                 <polyline points="5,2,20,5,5,8">
 238                     <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
 239                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 240                 </polyline>
 241
 242                 <g transform="translate(110, 0)">
 243                     <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
 244                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 245                     <polyline points="5,2,20,5,5,8"/>
 246                 </g>
 247
 248                 <a transform="translate(220, 0)">
 249                     <animate attributeName="stroke-linejoin" from="miter" to="bevel" dur="3s" fill="freeze"/>
 250                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 251                     <polyline points="5,2,20,5,5,8"/>
 252                 </a>
 253             </g>
 254
 255             <g id="setSix" transform="translate(5,120)" stroke-miterlimit="1" fill="none" stroke-width="3" stroke="rgb(204,0,102)">
 256                 <defs>
 257                     <g id="setSixRef">
 258                         <polyline points="5,0,20,5,5,10" stroke="#ccc"/>
 259                         <polyline points="5,0,20,5,5,10" stroke="#ccc" stroke-miterlimit="10" transform="translate(30,0)"/>
 260                     </g>
 261                 </defs>
 262                 <use xlink:href="#setSixRef"/>
 263                 <use xlink:href="#setSixRef" x="110"/>
 264                 <use xlink:href="#setSixRef" x="220"/>
 265
 266                 <polyline points="5,0,20,5,5,10">
 267                     <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
 268                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 269                 </polyline>
 270
 271                 <g transform="translate(110, 0)">
 272                     <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
 273                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 274                     <polyline points="5,0,20,5,5,10"/>
 275                 </g>
 276
 277                 <a transform="translate(220, 0)">
 278                     <animate attributeName="stroke-miterlimit" from="1" to="10" dur="3s" fill="freeze"/>
 279                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 280                     <polyline points="5,0,20,5,5,10"/>
 281                 </a>
 282
 283             </g>
 284
 285             <g id="setSeven" transform="translate(-5,145)" stroke-dasharray="3,4,5" stroke-width="3" stroke="rgb(204,0,102)">
 286                 <defs>
 287                     <g id="setSevenRef">
 288                         <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc"/>
 289                         <line x1="0" y1="0" x2="25" y2="0" stroke="#ccc" stroke-dashoffset="5.5" transform="translate(40,0)"/>
 290                     </g>
 291                 </defs>
 292                 <use xlink:href="#setSevenRef"/>
 293                 <use xlink:href="#setSevenRef" x="110"/>
 294                 <use xlink:href="#setSevenRef" x="220"/>
 295
 296                 <line x1="0" y1="0" x2="25" y2="0">
 297                     <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
 298                     <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
 299                 </line>
 300
 301                 <g transform="translate(110, 0)">
 302                     <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
 303                     <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
 304                     <line x1="0" y1="0" x2="25" y2="0"/>
 305                 </g>
 306
 307                 <a transform="translate(220, 0)">
 308                     <animate attributeName="stroke-dashoffset" from="0" to="5.5" dur="3s" fill="freeze"/>
 309                     <animateTransform type="translate" attributeName="transform" from="0" to="40" dur="3s" fill="freeze" additive="sum"/>
 310                     <line x1="0" y1="0" x2="25" y2="0"/>
 311                 </a>
 312             </g>
 313
 314             <g id="setEight" transform="translate(0,160)">
 315                 <defs>
 316                     <g id="setEightRef">
 317                         <rect x="10" width="8" height="8" fill="#ccc"/>
 318                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)" display="none"/>
 319                     </g>
 320                 </defs>
 321                 <use xlink:href="#setEightRef"/>
 322                 <use xlink:href="#setEightRef" x="110"/>
 323                 <use xlink:href="#setEightRef" x="220"/>
 324                 <rect x="10" width="8" height="8">
 325                     <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
 326                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 327                 </rect>
 328
 329                 <g transform="translate(110, 0)">
 330                     <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
 331                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 332                     <rect x="10" width="8" height="8"/>
 333                 </g>
 334
 335                 <a transform="translate(220, 0)">
 336                     <animate attributeName="display" from="inline" to="none" dur="3s" fill="freeze"/>
 337                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 338                     <rect x="10" width="8" height="8"/>
 339                 </a>
 340             </g>
 341
 342             <g id="setNine" transform="translate(0,180)">
 343                 <defs>
 344                     <g id="setNineRef">
 345                         <rect x="10" width="8" height="8" fill="#ccc"/>
 346                         <rect x="10" width="8" height="8" fill="#ccc" transform="translate(30,0)"/>
 347                     </g>
 348                 </defs>
 349                 <use xlink:href="#setNineRef"/>
 350                 <use xlink:href="#setNineRef" x="110"/>
 351                 <use xlink:href="#setNineRef" x="220"/>
 352
 353                 <rect x="10" width="8" height="8">
 354                     <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
 355                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 356                 </rect>
 357
 358                 <g transform="translate(110, 0)">
 359                     <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
 360                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 361                     <rect x="10" width="8" height="8"/>
 362                 </g>
 363
 364                 <a transform="translate(220, 0)">
 365                     <animate attributeName="visibility" from="visible" to="hidden" dur="3s" fill="freeze"/>
 366                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 367                     <rect x="10" width="8" height="8"/>
 368                 </a>
 369             </g>
 370
 371             <g id="setTen" color="rgb(204,0,102)" transform="translate(0,200)">
 372                 <defs>
 373                     <g id="animateTenRef">
 374                         <rect x="10" y="-6" width="8" height="4" fill="rgb(204,0,102)"/>
 375                         <rect x="10" y="-6" width="8" height="4" fill="rgb(230,82,51)" transform="translate(15,0)"/>
 376                         <rect x="10" y="-6" width="8" height="4" fill="rgb(255,165,0)" transform="translate(30,0)"/>
 377                     </g>
 378                 </defs>
 379                 <use xlink:href="#animateTenRef"/>
 380                 <use xlink:href="#animateTenRef" x="110"/>
 381                 <use xlink:href="#animateTenRef" x="220"/>
 382
 383                 <rect x="10" width="8" height="8" fill="currentColor">
 384                     <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
 385                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 386                 </rect>
 387
 388                 <g transform="translate(110, 0)" fill="currentColor">
 389                     <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
 390                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 391                     <rect x="10" width="8" height="8"/>
 392                 </g>
 393
 394                 <a transform="translate(220, 0)" fill="currentColor">
 395                     <animate attributeName="color" from="rgb(204,0,102)" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
 396                     <animateTransform type="translate" attributeName="transform" from="0" to="30" dur="3s" fill="freeze" additive="sum"/>
 397                     <rect x="10" width="8" height="8"/>
 398                 </a>
 399             </g>
 400
 401         </g>
 402
 403     </g>
 404     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.9 $</text>
 405     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 406 </svg>