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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Changing Keyframes Using CSSOM</title>
<style type="text/css" media="screen">
#box {
position: relative;
left: 0;
top: 0;
height: 100px;
width: 100px;
background-color: blue;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: anim;
}
@-webkit-keyframes anim {
from { left: 100px; }
10% { left: 200px; }
90% { left: 200px; }
to { left: 300px; }
}
</style>
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function findKeyframesRule(rule)
{
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
return ss[i].cssRules[j];
}
}
return null;
}
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
[0.5, "box", "left", 200, 10],
[1, "box", "top", 100, 10],
];
const callbacks = {
0.6: function() {
document.getElementById('box').style.webkitAnimationName = "none";
// a forced style-recalc aborts the previous animation
document.getElementById('box').offsetTop;
// change keyframes
var keyframes = findKeyframesRule("anim");
keyframes.deleteRule("0%");
keyframes.deleteRule("40%");
keyframes.deleteRule("60%");
keyframes.deleteRule("100%");
keyframes.appendRule("0% { top: 50px; }");
keyframes.appendRule("10% { top: 100px; }");
keyframes.appendRule("90% { top: 100px; }");
keyframes.appendRule("100% { top: 150px; }");
document.getElementById('box').style.webkitAnimationName = "anim";
}
}
// FIXME: Consider whether we can support this kind of test (staggered start) under the pause API
runAnimationTest(expectedValues, callbacks, null, 'do-not-use-pause-api');
</script>
</head>
<body>
This test performs an animation of the left property and makes sure it is animating. Then it stops
the animation, changes the keyframes to an animation of the top property, restarts the animation
and makes sure top is animating.
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>
|
