third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-63-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 multiple on multiple end conditions in the end attribute" status="accepted" version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-63-t.svg,v $">
  12
  13         <OperatorScript>
  14
  15             <Paragraph>
  16
  17                 This tests validates multiple end conditions in the end attribute,
  18
  19                 assuming support for the &lt;set&gt; element and setting the
  20
  21                 dur attribute to 'indefinite'.
  22
  23             </Paragraph>
  24
  25             <Paragraph>
  26
  27                 The test validates the various possibilities for the end attribute
  28
  29                 value: multiple offset values, multiple event base values, multiple sync base
  30
  31                 values, multiple repeat values, and multiple accessKey values. Finally,
  32
  33                 the test validates that end values of different kinds can be mixed.
  34
  35             </Paragraph>
  36
  37
  38
  39             <Paragraph>
  40
  41                 The test shows 6 rows where a red rectangle's  x attribute is animated
  42
  43                 with &lt;set&gt; elements.
  44
  45             </Paragraph>
  46
  47
  48
  49             <Paragraph>
  50
  51                 On the first three rows, the red rectangles should show on the left from
  52
  53                 0 to 1s. From 1 to 2s, the rectangles should show on the right. Then
  54
  55                 the rectangles should show on the left from 2 to 4s, then on the right
  56
  57                 again from 4 to 5s and come back to the left position and stay there
  58
  59                 after 5s.
  60
  61             </Paragraph>
  62
  63             <Paragraph>
  64
  65                 On the fourth row, the rectangle's end condition is event based
  66
  67                 and requires a user click. One of the end condition is defined
  68
  69                 to be 5 seconds prior to the click and one is defined to be 5
  70
  71                 seconds after the click. If the user clicks on the rectangle
  72
  73                 before 5 seconds (in document time), the red rectangle we move
  74
  75                 to the left position 5 seconds after the click (because the
  76
  77                 'click - 5s' end time resolves to a time prior to the begin
  78
  79                 time). If the user clicks after 5 seconds (in document time),
  80
  81                 then the red rectangle moves to the left position immediately because
  82
  83                 the 'click - 5s' time resolves to a time after the begin time.
  84
  85             </Paragraph>
  86
  87             <Paragraph>
  88
  89                 On the fifth row, the rectangle's end condition is accessKey based
  90
  91                 and requires a user to press the 'a' key. The behavior is exactly the
  92
  93                 same as for the previous row, except that the triggering event
  94
  95                 is the 'a' key press.
  96
  97             </Paragraph>
  98
  99             <Paragraph>
 100
 101                 The last row's rectangle has a end condition with two offset values
 102
 103                 (1s;4s) and should behave like the rectangles of the first three
 104
 105                 rows for the first 5 seconds of the document's timeline. In addition,
 106
 107                 the end condition has a click event base and thus, the rectangle
 108
 109                 should immediately move to the left position if the user everytime the user
 110
 111                 clicks clicks on the rectangle when it is on the right position.
 112
 113                 Finally, the end condition also has an accessKey condition
 114
 115                 for the 'b' character. Thus, the rectangle should move to the left
 116
 117                 position every time the user presses the 'b' key and the rectangle is
 118
 119                 on the right position.
 120
 121             </Paragraph>
 122
 123         </OperatorScript>
 124
 125     </SVGTestCase>
 126
 127     <title id="test-title">$RCSfile: animate-elem-63-t.svg,v $</title>
 128
 129
 130
 131     <!--======================================================================-->
 132
 133     <!--Content of Test Case follows...                  =====================-->
 134
 135     <!--======================================================================-->
 136
 137     <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
 138
 139     <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 140
 141
 142
 143     <text text-anchor="middle" x="240" y="30" font-size="20">multiple end</text>
 144
 145
 146
 147     <g transform="translate(100, 100)">
 148
 149
 150
 151         <g transform="translate(80,25)" text-anchor="end" font-size="14">
 152
 153             <text>2 offsets</text>
 154
 155             <text y="25">2 sync bases</text>
 156
 157             <text y="50">2 repeat</text>
 158
 159
 160
 161             <text y="100">2 event base</text>
 162
 163             <text y="125">2 accessKeys</text>
 164
 165
 166
 167             <text y="150">misc</text>
 168
 169         </g>
 170
 171
 172
 173         <g id="timeMarkersText" transform="translate(150, 5)" text-anchor="middle" font-size="14">
 174
 175             <text>0-1s</text>
 176
 177             <text y="-20">2s-4s</text>
 178
 179             <text y="-40">&gt; 5s</text>
 180
 181
 182
 183             <g transform="translate(40,0)">
 184
 185                 <text>1-2s</text>
 186
 187                 <text y="-20">4-5s</text>
 188
 189             </g>
 190
 191         </g>
 192
 193
 194
 195         <g transform="translate(150,20)" stroke="black">
 196
 197             <defs>
 198
 199                 <rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>
 200
 201             </defs>
 202
 203
 204
 205             <g id="setOne">
 206
 207                 <use xlink:href="#shadow" x="0"/>
 208
 209                 <use xlink:href="#shadow" x="40"/>
 210
 211
 212
 213                 <rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 214
 215                     <set id="firstSet" attributeName="x" to="34" begin="1s; 4s" end="2s; 5s" dur="indefinite"/>
 216
 217                 </rect>
 218
 219             </g>
 220
 221
 222
 223             <g id="setTwo" transform="translate(0, 25)">
 224
 225                 <set id="syncBase" attributeName="display" to="inline" begin="0s" dur="indefinite"/>
 226
 227
 228
 229                 <use xlink:href="#shadow" x="0"/>
 230
 231                 <use xlink:href="#shadow" x="40"/>
 232
 233
 234
 235                 <rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 236
 237                     <set attributeName="x" to="34" begin="1s; 4s" end="syncBase.begin+2s;syncBase.begin + 5s" dur="indefinite"/>
 238
 239                 </rect>
 240
 241             </g>
 242
 243
 244
 245             <g id="setThree" transform="translate(0, 50)">
 246
 247                 <set id="repeatBase" attributeName="display" to="inline" begin="0s" dur="1s" repeatDur="indefinite"/>
 248
 249
 250
 251                 <use xlink:href="#shadow" x="0"/>
 252
 253                 <use xlink:href="#shadow" x="40"/>
 254
 255
 256
 257                 <rect x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 258
 259                     <set attributeName="x" to="34" begin="1s; 4s" end="repeatBase.repeat(2);repeatBase.repeat(5)" dur="indefinite"/>
 260
 261                 </rect>
 262
 263             </g>
 264
 265
 266
 267             <g id="setFour" transform="translate(0, 100)">
 268
 269                 <use xlink:href="#shadow" x="0"/>
 270
 271                 <use xlink:href="#shadow" x="40"/>
 272
 273
 274
 275                 <rect id="setFourTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 276
 277                     <set attributeName="x" to="34" begin="0s" end="setFourTarget.click -5s; setFourTarget.click + 5s" dur="indefinite"/>
 278
 279                 </rect>
 280
 281             </g>
 282
 283
 284
 285             <g id="setFive" transform="translate(0, 125)">
 286
 287                 <use xlink:href="#shadow" x="0"/>
 288
 289                 <use xlink:href="#shadow" x="40"/>
 290
 291
 292
 293                 <rect id="setFiveTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 294
 295                     <set attributeName="x" to="34" begin="0s" end="accessKey(a) - 5s;accessKey(a)+5s" dur="indefinite"/>
 296
 297                 </rect>
 298
 299             </g>
 300
 301
 302
 303             <g id="setSix" transform="translate(0, 150)">
 304
 305                 <use xlink:href="#shadow" x="0"/>
 306
 307                 <use xlink:href="#shadow" x="40"/>
 308
 309
 310
 311                 <rect id="setSixTarget" x="-6" y="-6" width="12" height="12" fill="rgb(204,0,102)">
 312
 313                     <set attributeName="x" to="34" begin="1s;4s" end="2s;5s;setSixTarget.click;accessKey(b)" dur="indefinite"/>
 314
 315                 </rect>
 316
 317             </g>
 318
 319         </g>
 320
 321     </g>
 322
 323 </svg>