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