third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-62-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
  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="Test on the various end attribute values" status="accepted" version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-62-t.svg,v $">
  12
  13         <OperatorScript>
  14
  15             <Paragraph>
  16
  17                 This test performs basic test on the end attribute,
  18
  19                 assuming support for the &lt;set&gt; element and setting the
  20
  21                 fill attribute on a &lt;rect&gt; element.
  22
  23             </Paragraph>
  24
  25             <Paragraph>
  26
  27                 The test validates the various possibilities for the end attribute
  28
  29                 value: no specified value, offset value, event base value, sync base
  30
  31                 value, indefinite value, repeat value, accessKey value and wallclock.
  32
  33             </Paragraph>
  34
  35             <Paragraph>
  36
  37                 There are one or several &lt;set&gt; elements for each of the possible end
  38
  39                 values. For each test, the &lt;set&gt; element(s) has (or have) an indefinite
  40
  41                 duration and no other timing attribute specified other than end
  42
  43                 and dur.
  44
  45             </Paragraph>
  46
  47             <Paragraph>
  48
  49                 There are two sets of vertical markers which help check that the test
  50
  51                 is handled properly by the user agent. The first set, on the left, shows
  52
  53                 markers from 0s to 8s, where the times are offset from the document's load time.
  54
  55                 The rectangles in that area should turn green at the time corresponding
  56
  57                 to the column they are in. From example, the first rectangle (going left to right)
  58
  59                 on the "sync base" line should turn green 2 seconds after the document's load.
  60
  61                 The second set of time vertical markers shows offset from a particular event.
  62
  63                 For example, for the event base, the markers show an offset to the time
  64
  65                 the first event base rectangle (the left-most one) is clicked on. For the
  66
  67                 accessKey line, the times show offsets from the time the 'a' key is pressed
  68
  69                 and the document has focus.
  70
  71             </Paragraph>
  72
  73             <Paragraph>
  74
  75                 The first &lt;set&gt; has an unspecified end attribute. That value
  76
  77                 defaults to an offset of 0s so the animation should apply as soon as
  78
  79                 the document is loaded.
  80
  81             </Paragraph>
  82
  83             <Paragraph>
  84
  85                 The second &lt;set&gt; has its end attribute set to '2s'. So its
  86
  87                 target rectangle should turn green two seconds after the document is
  88
  89                 loaded.
  90
  91             </Paragraph>
  92
  93             <Paragraph>
  94
  95                 The third &lt;set&gt; has its end attribute set to an event base
  96
  97                 value 'click'. The user has to click on the left-most target red rectangle
  98
  99                 to make the &lt;set&gt; target turn green. There are two rectangles
 100
 101                 with associated &lt;set&gt; elements. The left most ones has a simple
 102
 103                 value (no offset) and the second one is offset from the event time by 2 seconds.
 104
 105             </Paragraph>
 106
 107             <Paragraph>
 108
 109                 The fourth &lt;set&gt; elements have their end attributes set to a sync base
 110
 111                 value. The first two rectangles have &lt;set&gt; elements synchronized on their sync base
 112
 113                 end. The left-most one has no offset and the following one has a 2 seconds offset.
 114
 115                 The last two rectangles have &lt;set&gt; elements synchronized on their sync base end.
 116
 117                 The first one (i.e., the third from left to right on that line), has a 2 seconds
 118
 119                 negative offset. The second one (i.e., the last one on the line) has no offset and should
 120
 121                 end at the time its sync base ends.
 122
 123             </Paragraph>
 124
 125             <Paragraph>
 126
 127                 The fifth &lt;set&gt; has its end attribute set to indefinite and
 128
 129                 should not turn red and stay green.
 130
 131             </Paragraph>
 132
 133             <Paragraph>
 134
 135                 The sixth &lt;set&gt;s have their end attributes have their end attributes
 136
 137                 based on the repeat() function. The repeat they are synchronized on happens
 138
 139                 at 3s. The first &lt;set&gt;, which has no offset, should end at 3s. The
 140
 141                 second &lt;set&gt;, which has a 2 seconds offset, should start at 5s.
 142
 143             </Paragraph>
 144
 145             <Paragraph>
 146
 147                 The seventh &lt;set&gt;s have their end attributes set to 'accessKey(a)'.
 148
 149                 The first one has no offset and should become active (and turn the rectangle
 150
 151                 green), as soon as the key 'a' is pressed in the user agent. The second &lt;set&gt;
 152
 153                 has a 2s offset and should become active 2 seconds after the 'a' key is pressed in
 154
 155                 the user agent.
 156
 157             </Paragraph>
 158
 159             <Paragraph>
 160
 161                 The eight's &lt;set&gt; target has its end attribute set to
 162
 163                 'wallclock()'. Therefore, the target should never turn green because the
 164
 165                 target wallclock time is in the very distant future, so the animation
 166
 167                 should not end (unless this test is used for close to two hundred years,
 168
 169                 in which case the end date should be updated for an additional two or
 170
 171                 three hundred years).
 172
 173             </Paragraph>
 174
 175         </OperatorScript>
 176
 177     </SVGTestCase>
 178
 179     <title id="test-title">$RCSfile: animate-elem-62-t.svg,v $</title>
 180
 181
 182
 183     <!--======================================================================-->
 184
 185     <!--Content of Test Case follows...                  =====================-->
 186
 187     <!--======================================================================-->
 188
 189     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
 190
 191     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 192
 193
 194
 195     <text text-anchor="middle" x="240" y="30" font-size="20">end</text>
 196
 197
 198
 199     <g transform="translate(100, 80)">
 200
 201
 202
 203         <g transform="translate(80,5)" text-anchor="end" font-size="14">
 204
 205             <text>unspecified</text>
 206
 207             <text y="25">offset</text>
 208
 209             <text y="50">event base</text>
 210
 211             <text y="75">sync base</text>
 212
 213             <text y="100">indefinite</text>
 214
 215             <text y="125">repeat()</text>
 216
 217             <text y="150">accessKey()</text>
 218
 219             <text y="175">wallclock()</text>
 220
 221         </g>
 222
 223
 224
 225         <g id="timeMarkersText" transform="translate(100, -15)" text-anchor="middle" font-size="8">
 226
 227             <text>0s</text>
 228
 229             <text x="12">1s</text>
 230
 231             <text x="24">2s</text>
 232
 233             <text x="36">3s</text>
 234
 235             <text x="48">4s</text>
 236
 237             <text x="60">5s</text>
 238
 239             <text x="72">6s</text>
 240
 241             <text x="84">7s</text>
 242
 243             <text x="96">8s</text>
 244
 245
 246
 247             <text x="120">0s</text>
 248
 249             <text x="132">1s</text>
 250
 251             <text x="144">2s</text>
 252
 253         </g>
 254
 255
 256
 257         <g id="timeMarkers" transform="translate(94, -10) scale(1, 8)">
 258
 259             <rect width="12" height="25" fill="#eee"/>
 260
 261             <rect x="12" width="12" height="25" fill="#ddd"/>
 262
 263             <rect x="24" width="12" height="25" fill="#eee"/>
 264
 265             <rect x="36" width="12" height="25" fill="#ddd"/>
 266
 267             <rect x="48" width="12" height="25" fill="#eee"/>
 268
 269             <rect x="60" width="12" height="25" fill="#ddd"/>
 270
 271             <rect x="72" width="12" height="25" fill="#eee"/>
 272
 273             <rect x="84" width="12" height="25" fill="#ddd"/>
 274
 275             <rect x="96" width="12" height="25" fill="#eee"/>
 276
 277
 278
 279             <rect x="120" width="12" height="25" fill="#eee"/>
 280
 281             <rect x="132" width="12" height="25" fill="#ddd"/>
 282
 283             <rect x="144" width="12" height="25" fill="#eee"/>
 284
 285         </g>
 286
 287
 288
 289         <g transform="translate(100,0)">
 290
 291             <g id="setOne">
 292
 293                 <rect x="-6" y="-6" width="12" height="12" fill="#F33">
 294
 295                     <set attributeName="fill" to="#3F3" begin="0s" dur="indefinite"/>
 296
 297                 </rect>
 298
 299             </g>
 300
 301
 302
 303             <g id="setTwo" transform="translate(0, 25)">
 304
 305                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(24,0)">
 306
 307                     <set id="secondSet" attributeName="fill" to="#F33" begin="0s" end="2s" dur="indefinite"/>
 308
 309                 </rect>
 310
 311             </g>
 312
 313
 314
 315             <g id="setThree" transform="translate(0, 50)">
 316
 317                 <rect id="setThreeTarget" x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(120,0)">
 318
 319                     <set attributeName="fill" id="thirdSet" to="#F33" end="setThreeTarget.click" dur="indefinite"/>
 320
 321                 </rect>
 322
 323
 324
 325                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
 326
 327                     <set attributeName="fill" id="thirdSetOffset" to="#3F3" begin="setThreeTarget.click + 2s" dur="indefinite"/>
 328
 329                 </rect>
 330
 331             </g>
 332
 333
 334
 335             <g id="setFour" transform="translate(0, 75)">
 336
 337                 <set id="endBase" attributeName="display" to="inline" begin="7s" dur="1s"/>
 338
 339                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(24,0)">
 340
 341                     <set attributeName="fill" to="#F33" end="secondSet.begin + 2s" dur="indefinite"/>
 342
 343                 </rect>
 344
 345
 346
 347                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(48,0)">
 348
 349                     <set attributeName="fill" to="#F33" end="secondSet.begin + 4s" dur="indefinite"/>
 350
 351                 </rect>
 352
 353
 354
 355                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(72,0)">
 356
 357                     <set attributeName="fill" to="#F33" end="endBase.end - 2s" dur="indefinite"/>
 358
 359                 </rect>
 360
 361
 362
 363                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(96,0)">
 364
 365                     <set attributeName="fill" to="#F33" end="endBase.end" dur="indefinite"/>
 366
 367                 </rect>
 368
 369             </g>
 370
 371
 372
 373             <g id="setFive" transform="translate(0, 100)">
 374
 375                 <rect x="-6" y="-6" width="12" height="12" fill="#F33">
 376
 377                     <set attributeName="fill" to="#3F3" end="indefinite" dur="indefinite"/>
 378
 379                 </rect>
 380
 381             </g>
 382
 383
 384
 385             <g id="setSix" transform="translate(0, 125)">
 386
 387                 <set id="repeatingSet" attributeName="display" to="inline" begin="0s" dur="1s" repeatCount="4"/>
 388
 389                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(36,0)">
 390
 391                     <set attributeName="fill" to="#F33" end="repeatingSet.repeat(3)" dur="indefinite"/>
 392
 393                 </rect>
 394
 395
 396
 397                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(60,0)">
 398
 399                     <set attributeName="fill" to="#F33" end="repeatingSet.repeat(3) + 2s" dur="indefinite"/>
 400
 401                 </rect>
 402
 403             </g>
 404
 405
 406
 407             <g id="setSeven" transform="translate(0, 150)">
 408
 409                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(120,0)">
 410
 411                     <set attributeName="fill" to="#F33" end="accessKey(a)" dur="indefinite"/>
 412
 413                 </rect>
 414
 415
 416
 417                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3" transform="translate(144,0)">
 418
 419                     <set attributeName="fill" to="#F33" end="accessKey(a) + 2s" dur="indefinite"/>
 420
 421                 </rect>
 422
 423             </g>
 424
 425
 426
 427             <g id="setEight" transform="translate(0, 175)">
 428
 429                 <rect x="-6" y="-6" width="12" height="12" fill="#F33">
 430
 431                     <set attributeName="fill" to="#3F3" end="wallclock(2200-06-10T12:34:56Z)" dur="indefinite"/>
 432
 433                 </rect>
 434
 435             </g>
 436
 437         </g>
 438
 439     </g>
 440
 441 </svg>