1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for hyperlinking</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content" style="display:none">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
onload="this.pauseAnimations()">
<circle cx="-100" cy="20" r="15" fill="blue" id="circle"/>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for SMIL keySplines **/
/* Global Variables */
const SVGNS="http://www.w3.org/2000/svg";
var gSvg = document.getElementById("svg");
var gAnim;
var gTestStages =
[ testActive,
testSeekToFirst,
testKickStart,
testKickStartWithUnresolved,
testFiltering
];
SimpleTest.waitForExplicitFinish();
function continueTest()
{
if (!gTestStages.length) {
SimpleTest.finish();
return;
}
window.location.hash = "";
if (gAnim) {
gAnim.remove();
}
gAnim = createAnim();
gSvg.setCurrentTime(0);
gTestStages.shift()();
}
function createAnim() {
var anim = document.createElementNS(SVGNS,'animate');
anim.setAttribute('attributeName','cx');
anim.setAttribute('from','0');
anim.setAttribute('to','100');
anim.setAttribute('dur','1s');
anim.setAttribute('begin','indefinite');
anim.setAttribute('id','anim');
return document.getElementById('circle').appendChild(anim);
}
// Traversing a hyperlink, condition 1:
//
// "If the target element is active, seek the document time back to the
// (current) begin time of the element. If there are multiple begin times, use
// the begin time that corresponds to the current "begin instance"."
//
function testActive() {
gAnim.setAttribute('begin','2s; 4s');
gSvg.setCurrentTime(2.5);
fireLink(rewindActiveInterval1);
}
function rewindActiveInterval1() {
is(gSvg.getCurrentTime(), 2,
"Unexpected time after activating link to animation in the middle of " +
"first active interval");
// Seek to second interval
gSvg.setCurrentTime(4.5);
fireLink(rewindActiveInterval2);
}
function rewindActiveInterval2() {
is(gSvg.getCurrentTime(), 4,
"Unexpected time after activating link to animation in the middle of " +
"second active interval");
// Try a negative time
gAnim.setAttribute("begin", "-0.5");
gSvg.setCurrentTime(0.2);
fireLink(rewindActiveIntervalAtZero);
}
function rewindActiveIntervalAtZero() {
is(gSvg.getCurrentTime(), 0,
"Unexpected time after activating link to animation in the middle of " +
"an active interval that overlaps zero");
continueTest();
}
// Traversing a hyperlink, condition 2:
//
// "Else if the target element begin time is resolved (i.e., there is any
// resolved time in the list of begin times, or if the begin time was forced by
// an earlier hyperlink or a beginElement() method call), seek the document time
// (forward or back, as needed) to the earliest resolved begin time of the
// target element. Note that the begin time may be resolved as a result of an
// earlier hyperlink, DOM or event activation. Once the begin time is resolved,
// hyperlink traversal always seeks."
//
function testSeekToFirst() {
// Seek forwards
gAnim.setAttribute('begin','2s');
gSvg.setCurrentTime(0);
fireLink(forwardToInterval1);
}
function forwardToInterval1() {
is(gSvg.getCurrentTime(), 2,
"Unexpected time after activating link to animation scheduled to start " +
"the future");
// Seek backwards
gSvg.setCurrentTime(3.5);
fireLink(backwardToInterval1);
}
function backwardToInterval1() {
is(gSvg.getCurrentTime(), 2,
"Unexpected time after activating link to animation that ran in the past");
// What if the first begin instance is negative?
gAnim.setAttribute('begin','-0.5s');
gSvg.setCurrentTime(1);
fireLink(backwardToZero);
}
function backwardToZero() {
is(gSvg.getCurrentTime(), 0,
"Unexpected time after activating link to animation that ran in the " +
"past with a negative time");
continueTest();
}
// Traversing a hyperlink, condition 3:
//
// "Else (animation begin time is unresolved) just resolve the target animation
// begin time at current document time. Disregard the sync-base or event base of
// the animation, and do not "back-propagate" any timing logic to resolve the
// child, but rather treat it as though it were defined with begin="indefinite"
// and just resolve begin time to the current document time."
//
function testKickStart() {
gSvg.setCurrentTime(1);
fireLink(startedAt1s);
}
function startedAt1s() {
is(gSvg.getCurrentTime(), 1,
"Unexpected time after kick-starting animation with indefinite start " +
"by hyperlink");
is(gAnim.getStartTime(), 1,
"Unexpected start time for kick-started animation");
continueTest();
}
function testKickStartWithUnresolved() {
gAnim.setAttribute("begin", "circle.click");
gSvg.setCurrentTime(3);
fireLink(startedAt3s);
}
function startedAt3s() {
is(gSvg.getCurrentTime(), 3,
"Unexpected time after kick-starting animation with unresolved start " +
"by hyperlink");
is(gAnim.getStartTime(), 3,
"Unexpected start time for kick-started animation with unresolved begin " +
"condition");
continueTest();
}
function testFiltering() {
gAnim.setAttribute('begin','-3s; 1s; 2s; 3s; 4s; 5s; 6s; 7s; 8s; 9s; 10s');
gSvg.setCurrentTime(12);
fireLink(rewindToFirst);
}
function rewindToFirst() {
is(gSvg.getCurrentTime(), 1,
"Unexpected time after triggering animation with a hyperlink after " +
"numerous intervals have passed");
continueTest();
}
function fireLink(callback) {
// First we need to reset the hash because otherwise the redundant hashchange
// events will be suppressed
if (window.location.hash === '') {
fireLinkPart2(callback);
} else {
window.location.hash = '';
window.addEventListener("hashchange",
function() {
window.setTimeout(fireLinkPart2, 0, callback);
}, {once: true});
}
}
function fireLinkPart2(callback) {
window.addEventListener("hashchange",
function() {
window.setTimeout(callback, 0);
}, {once: true});
window.location.hash = '#anim';
}
window.addEventListener("load", continueTest);
]]>
</script>
</pre>
</body>
</html>
|
