Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: timelapse
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 89 lines (79 sloc) 2.691 kb
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
<!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">
    
    const expectedValues = [
      // [animation-name, time, element-id, property, expected-value, tolerance]
      [null, 0.5, "box", "left", 200, 10],
      [null, 1, "box", "top", 100, 10],
    ];

    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;
    }
        
    function change()
    {
        // change keyframes
        var keyframes = findKeyframesRule("anim");
        keyframes.deleteRule("0%");
        keyframes.deleteRule("40%");
        keyframes.deleteRule("60%");
        keyframes.deleteRule("100%");
        keyframes.insertRule("0% { top: 50px; }");
        keyframes.insertRule("10% { top: 100px; }");
        keyframes.insertRule("90% { top: 100px; }");
        keyframes.insertRule("100% { top: 150px; }");
        document.getElementById('box').style.webkitAnimationName = "anim";
    }
    
    function startChange()
    {
        document.getElementById('box').style.webkitAnimationName = "none";
        setTimeout("change()", 0);
    }
    
    function setup()
    {
        setTimeout("startChange()", 600);
    }
    
    runAnimationTest(expectedValues, setup);
    
  </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>
Something went wrong with that request. Please try again.