LayoutTests/animations/change-keyframes.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   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">
   9     #box {
  10         position: relative;
  11         left: 0;
  12         top: 0;
  13         height: 100px;
  14         width: 100px;
  15         background-color: blue;
  16         -webkit-animation-duration: 1s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "anim";
  19     }
  20     @-webkit-keyframes "anim" {
  21         from { left: 100px; }
  22         40%  { left: 200px; }
  23         60%  { left: 200px; }
  24         to   { left: 300px; }
  25     }
  26     </style>
  27     <script type="text/javascript" charset="utf-8">
  28     if (window.layoutTestController) {
  29         layoutTestController.dumpAsText();
  30         layoutTestController.waitUntilDone();
  31     }
  32
  33     result = "PASS";
  34     const defaultTolerance = 10;
  35
  36     function isEqual(actual, desired, tolerance)
  37     {
  38         if (tolerance == undefined || tolerance == 0)
  39             tolerance = defaultTolerance;
  40         var diff = Math.abs(actual - desired);
  41         return diff < tolerance;
  42     }
  43
  44     function snapshot(property, expected)
  45     {
  46         if (result != "PASS")
  47             return;
  48
  49         var prop = parseInt(window.getComputedStyle(document.getElementById('box'))[property]);
  50         if (!isEqual(prop, expected))
  51             result = "FAIL('"+property+"' property was:"+prop+", expected:"+expected+")";
  52     }
  53
  54     function findKeyframesRule(rule)
  55     {
  56         var ss = document.styleSheets;
  57         for (var i = 0; i < ss.length; ++i) {
  58             for (var j = 0; j < ss[i].cssRules.length; ++j) {
  59                 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
  60                     return ss[i].cssRules[j];
  61             }
  62         }
  63
  64         return null;
  65     }
  66
  67     function change()
  68     {
  69         // change keyframes
  70         var keyframes = findKeyframesRule("anim");
  71         keyframes.deleteRule("0%");
  72         keyframes.deleteRule("40%");
  73         keyframes.deleteRule("60%");
  74         keyframes.deleteRule("100%");
  75         keyframes.insertRule("0% { top: 50px; }");
  76         keyframes.insertRule("40% { top: 100px; }");
  77         keyframes.insertRule("60% { top: 100px; }");
  78         keyframes.insertRule("100% { top: 150px; }");
  79         document.getElementById('box').style.webkitAnimationName = "anim";
  80
  81         setTimeout("snapshot('top', 100)", 500);
  82
  83         window.setTimeout(function() {
  84             document.getElementById('result').innerHTML = result;
  85             if (window.layoutTestController)
  86                 layoutTestController.notifyDone();
  87         }, 600);
  88     }
  89
  90     function startChange()
  91     {
  92         document.getElementById('box').style.webkitAnimationName = "none";
  93         setTimeout("change()", 0);
  94     }
  95
  96     function start()
  97     {
  98         document.removeEventListener('webkitAnimationStart', start, false);
  99         setTimeout("snapshot('left', 200)", 500);
 100         setTimeout("startChange()", 600);
 101     }
 102
 103     document.addEventListener('webkitAnimationStart', start, false);
 104
 105   </script>
 106 </head>
 107 <body>
 108 This test performs an animation of the left property and makes sure it is animating. Then it stops
 109 the animation, changes the keyframes to an animation of the top property, restarts the animation
 110 and makes sure top is animating.
 111 <div id="box">
 112 </div>
 113 <div id="result">
 114 </div>
 115 </body>
 116 </html>