1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Test Changing Keyframes Using CSSOM</title>
8 <style type="text/css" media="screen">
15 background-color: blue;
16 -webkit-animation-duration: 1s;
17 -webkit-animation-timing-function: linear;
18 -webkit-animation-name: "anim";
20 @-webkit-keyframes "anim" {
27 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
28 <script type="text/javascript" charset="utf-8">
30 const expectedValues = [
31 // [animation-name, time, element-id, property, expected-value, tolerance]
32 [null, 0.5, "box", "left", 200, 10],
33 [null, 1, "box", "top", 100, 10],
36 function findKeyframesRule(rule)
38 var ss = document.styleSheets;
39 for (var i = 0; i < ss.length; ++i) {
40 for (var j = 0; j < ss[i].cssRules.length; ++j) {
41 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
42 return ss[i].cssRules[j];
52 var keyframes = findKeyframesRule("anim");
53 keyframes.deleteRule("0%");
54 keyframes.deleteRule("40%");
55 keyframes.deleteRule("60%");
56 keyframes.deleteRule("100%");
57 keyframes.insertRule("0% { top: 50px; }");
58 keyframes.insertRule("10% { top: 100px; }");
59 keyframes.insertRule("90% { top: 100px; }");
60 keyframes.insertRule("100% { top: 150px; }");
61 document.getElementById('box').style.webkitAnimationName = "anim";
64 function startChange()
66 document.getElementById('box').style.webkitAnimationName = "none";
67 setTimeout("change()", 0);
72 setTimeout("startChange()", 600);
75 runAnimationTest(expectedValues, setup);
80 This test performs an animation of the left property and makes sure it is animating. Then it stops
81 the animation, changes the keyframes to an animation of the top property, restarts the animation
82 and makes sure top is animating.