LayoutTests/animations/change-keyframes-name.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 Name of A Keyframes Rule 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: 0.5s;
  17         -webkit-animation-timing-function: linear;
  18         -webkit-animation-name: "bar";
  19     }
  20     @-webkit-keyframes "foo" {
  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(expected)
  45     {
  46         if (result != "PASS")
  47             return;
  48
  49         var prop = parseInt(window.getComputedStyle(document.getElementById('box')).left);
  50         if (!isEqual(prop, expected))
  51             result = "FAIL('left' 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 name
  70         var keyframes = findKeyframesRule("foo");
  71         keyframes.name = "anim";
  72         document.getElementById('box').style.webkitAnimationName = "anim";
  73     }
  74
  75     function start()
  76     {
  77         document.removeEventListener('webkitAnimationStart', start, false);
  78         setTimeout("snapshot(200)", 250);
  79         window.setTimeout(function() {
  80             document.getElementById('result').innerHTML = result;
  81             if (window.layoutTestController)
  82                 layoutTestController.notifyDone();
  83         }, 300);
  84     }
  85
  86     document.addEventListener('webkitAnimationStart', start, false);
  87     setTimeout("snapshot(0)", 100);
  88     setTimeout("change()", 200);
  89
  90   </script>
  91 </head>
  92 <body>
  93 This test starts by making sure the animation is not running, because the animation-name and the
  94 name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they
  95 match and makes sure the animation is now running.
  96 <div id="box">
  97 </div>
  98 <div id="result">
  99 </div>
 100 </body>
 101 </html>