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
|
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for moving animations between time containers</title>
<script type="text/javascript" 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="svga" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
onload="this.pauseAnimations()">
<circle cx="-20" cy="20" r="15" fill="blue" id="circlea"/>
</svg>
<svg id="svgb" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"
onload="this.pauseAnimations()">
<circle cx="-20" cy="20" r="15" fill="blue" id="circleb">
<set attributeName="cy" to="120" begin="4s" dur="1s" id="syncb"/>
</circle>
</svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
/** Test for moving animations between time containers **/
SimpleTest.waitForExplicitFinish();
function main() {
var svga = getElement("svga");
ok(svga.animationsPaused(), "should be paused by <svg> load handler");
is(svga.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
svga.setCurrentTime(1);
var svgb = getElement("svgb");
ok(svgb.animationsPaused(), "should be paused by <svg> load handler");
is(svgb.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");
svgb.setCurrentTime(1);
// Create animation and check initial state
var anim = createAnim();
ok(noStart(anim), "Animation has start time before attaching to document");
// Attach animation to first container
var circlea = getElement("circlea");
var circleb = getElement("circleb");
circlea.appendChild(anim);
// Check state after attaching
is(anim.getStartTime(), 2,
"Unexpected start time after attaching animation to target");
is(circlea.cx.animVal.value, -20,
"Unexpected animated value for yet-to-start animation");
is(circleb.cx.animVal.value, -20,
"Unexpected animated value for unanimated target");
// Move animation from first container to second
circleb.appendChild(anim);
// Advance first container and check animation has no effect
svga.setCurrentTime(2);
is(anim.getStartTime(), 2,
"Unexpected start time after moving animation");
is(circlea.cx.animVal.value, -20,
"Unexpected animated value for non-longer-animated target");
is(circleb.cx.animVal.value, -20,
"Unexpected animated value for now yet-to-start animation");
// Advance second container and check the animation only affects it
svgb.setCurrentTime(2);
is(anim.getStartTime(), 2, "Start time changed after time container seek");
is(circlea.cx.animVal.value, -20,
"Unanimated target changed after seek on other container");
is(circleb.cx.animVal.value, 100, "Animated target not animated after seek");
// Remove animation so that it belongs to no container and check that
// advancing the second container to the next milestone doesn't cause a crash
// (when the animation controller goes to run the next milestone sample).
anim.parentNode.removeChild(anim);
svgb.setCurrentTime(3);
// Do likewise with syncbase relationships
// Create the syncbase relationship
anim.setAttribute('begin', 'syncb.begin');
// Attach to second time container (where t=3s)
circleb.appendChild(anim);
is(anim.getStartTime(), 4,
"Unexpected start time for cross-time container syncbase dependency");
// Move to first time container (where t=1s).
// Because we're dealing with different time containers and both are paused,
// future times are effectively unresolved.
circlea.appendChild(anim);
ok(noStart(anim), "Unexpected start time for paused time container");
SimpleTest.finish();
}
function createAnim() {
const svgns="http://www.w3.org/2000/svg";
var anim = document.createElementNS(svgns,'set');
anim.setAttribute('attributeName','cx');
anim.setAttribute('to','100');
anim.setAttribute('begin','2s');
anim.setAttribute('dur','1s');
return anim;
}
function noStart(elem) {
var exceptionCaught = false;
try {
elem.getStartTime();
} catch(e) {
exceptionCaught = true;
is (e.name, "InvalidStateError",
"Unexpected exception from getStartTime.");
is (e.code, DOMException.INVALID_STATE_ERR,
"Unexpected exception code from getStartTime");
}
return exceptionCaught;
}
window.addEventListener("load", main, false);
]]>
</script>
</pre>
</body>
</html>
|
