third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-60-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 various begin attribute values" status="accepted" version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-60-t.svg,v $">
  12
  13         <OperatorScript>
  14
  15             <Paragraph>
  16
  17                 This test performs basic test on the begin 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 begin 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 is one or several &lt;set&gt; elements for each of the possible begin
  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 begin
  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 begin 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 begin 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 begin 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 begin 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                 begin. 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                 begin at the time its sync base ends.
 122
 123             </Paragraph>
 124
 125             <Paragraph>
 126
 127                 The fifth &lt;set&gt; has its begin 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 begin attributes have their begin 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 begin 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 begin 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 begin attribute set to
 162
 163                 'wallclock()'. Therefore, the target should never turn red because the
 164
 165                 target wallclock time is in the past.
 166
 167             </Paragraph>
 168
 169         </OperatorScript>
 170
 171     </SVGTestCase>
 172
 173     <title id="test-title">$RCSfile: animate-elem-60-t.svg,v $</title>
 174
 175
 176
 177     <!--======================================================================-->
 178
 179     <!--Content of Test Case follows...                  =====================-->
 180
 181     <!--======================================================================-->
 182
 183     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
 184
 185     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 186
 187
 188
 189     <text text-anchor="middle" x="240" y="30" font-size="20">begin</text>
 190
 191
 192
 193     <g transform="translate(100, 80)">
 194
 195
 196
 197         <g transform="translate(80,5)" text-anchor="end" font-size="14">
 198
 199             <text>unspecified</text>
 200
 201             <text y="25">offset</text>
 202
 203             <text y="50">event base</text>
 204
 205             <text y="75">sync base</text>
 206
 207             <text y="100">indefinite</text>
 208
 209             <text y="125">repeat()</text>
 210
 211             <text y="150">accessKey()</text>
 212
 213             <text y="175">wallclock()</text>
 214
 215         </g>
 216
 217
 218
 219         <g id="timeMarkersText" transform="translate(100, -15)" text-anchor="middle" font-size="8">
 220
 221             <text>0s</text>
 222
 223             <text x="12">1s</text>
 224
 225             <text x="24">2s</text>
 226
 227             <text x="36">3s</text>
 228
 229             <text x="48">4s</text>
 230
 231             <text x="60">5s</text>
 232
 233             <text x="72">6s</text>
 234
 235             <text x="84">7s</text>
 236
 237             <text x="96">8s</text>
 238
 239
 240
 241             <text x="120">0s</text>
 242
 243             <text x="132">1s</text>
 244
 245             <text x="144">2s</text>
 246
 247         </g>
 248
 249
 250
 251         <g id="timeMarkers" transform="translate(94, -10) scale(1, 8)">
 252
 253             <rect width="12" height="25" fill="#eee"/>
 254
 255             <rect x="12" width="12" height="25" fill="#ddd"/>
 256
 257             <rect x="24" width="12" height="25" fill="#eee"/>
 258
 259             <rect x="36" width="12" height="25" fill="#ddd"/>
 260
 261             <rect x="48" width="12" height="25" fill="#eee"/>
 262
 263             <rect x="60" width="12" height="25" fill="#ddd"/>
 264
 265             <rect x="72" width="12" height="25" fill="#eee"/>
 266
 267             <rect x="84" width="12" height="25" fill="#ddd"/>
 268
 269             <rect x="96" width="12" height="25" fill="#eee"/>
 270
 271
 272
 273             <rect x="120" width="12" height="25" fill="#eee"/>
 274
 275             <rect x="132" width="12" height="25" fill="#ddd"/>
 276
 277             <rect x="144" width="12" height="25" fill="#eee"/>
 278
 279         </g>
 280
 281
 282
 283         <g transform="translate(100,0)">
 284
 285             <g id="setOne">
 286
 287                 <rect x="-6" y="-6" width="12" height="12" fill="#F33">
 288
 289                     <set attributeName="fill" to="#3F3" dur="indefinite"/>
 290
 291                 </rect>
 292
 293             </g>
 294
 295
 296
 297             <g id="setTwo" transform="translate(0, 25)">
 298
 299                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(24,0)">
 300
 301                     <set id="secondSet" attributeName="fill" to="#3F3" begin="2s" dur="indefinite"/>
 302
 303                 </rect>
 304
 305             </g>
 306
 307
 308
 309             <g id="setThree" transform="translate(0, 50)">
 310
 311                 <rect id="setThreeTarget" x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(120,0)">
 312
 313                     <set attributeName="fill" id="thirdSet" to="#3F3" begin="setThreeTarget.click" dur="indefinite"/>
 314
 315                 </rect>
 316
 317
 318
 319                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
 320
 321                     <set attributeName="fill" id="thirdSetOffset" to="#3F3" begin="setThreeTarget.click + 2s" dur="indefinite"/>
 322
 323                 </rect>
 324
 325             </g>
 326
 327
 328
 329             <g id="setFour" transform="translate(0, 75)">
 330
 331                 <set id="endBase" attributeName="display" to="inline" begin="7s" dur="1s"/>
 332
 333                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(24,0)">
 334
 335                     <set attributeName="fill" to="#3F3" begin="secondSet.begin" dur="indefinite"/>
 336
 337                 </rect>
 338
 339
 340
 341                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(48,0)">
 342
 343                     <set attributeName="fill" to="#3F3" begin="secondSet.begin + 2s" dur="indefinite"/>
 344
 345                 </rect>
 346
 347
 348
 349                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(72,0)">
 350
 351                     <set attributeName="fill" to="#3F3" begin="endBase.end - 2s" dur="indefinite"/>
 352
 353                 </rect>
 354
 355
 356
 357                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(96,0)">
 358
 359                     <set attributeName="fill" to="#3F3" begin="endBase.end" dur="indefinite"/>
 360
 361                 </rect>
 362
 363             </g>
 364
 365
 366
 367             <g id="setFive" transform="translate(0, 100)">
 368
 369                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3">
 370
 371                     <set attributeName="fill" to="#F33" begin="indefinite" dur="indefinite"/>
 372
 373                 </rect>
 374
 375             </g>
 376
 377
 378
 379             <g id="setSix" transform="translate(0, 125)">
 380
 381                 <set id="repeatingSet" attributeName="display" to="inline" begin="0s" dur="1s" repeatCount="4"/>
 382
 383                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(36,0)">
 384
 385                     <set attributeName="fill" to="#3F3" begin="repeatingSet.repeat(3)" dur="indefinite"/>
 386
 387                 </rect>
 388
 389
 390
 391                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(60,0)">
 392
 393                     <set attributeName="fill" to="#3F3" begin="repeatingSet.repeat(3) + 2s" dur="indefinite"/>
 394
 395                 </rect>
 396
 397             </g>
 398
 399
 400
 401             <g id="setSeven" transform="translate(0, 150)">
 402
 403                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(120,0)">
 404
 405                     <set attributeName="fill" to="#3F3" begin="accessKey(a)" dur="indefinite"/>
 406
 407                 </rect>
 408
 409
 410
 411                 <rect x="-6" y="-6" width="12" height="12" fill="#F33" transform="translate(144,0)">
 412
 413                     <set attributeName="fill" to="#3F3" begin="accessKey(a) + 2s" dur="indefinite"/>
 414
 415                 </rect>
 416
 417             </g>
 418
 419
 420
 421             <g id="setEight" transform="translate(0, 175)">
 422
 423                 <rect x="-6" y="-6" width="12" height="12" fill="#3F3">
 424
 425                     <set attributeName="fill" to="#F33" begin="wallclock(2000-06-10T12:34:56Z)" dur="indefinite"/>
 426
 427                 </rect>
 428
 429             </g>
 430
 431         </g>
 432
 433     </g>
 434
 435 </svg>