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 src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  28     <script type="text/javascript" charset="utf-8">
  29
  30     const expectedValues = [
  31       // [animation-name, time, element-id, property, expected-value, tolerance]
  32       [null, 0.25, "box", "left", 200, 20],
  33     ];
  34
  35     function findKeyframesRule(rule)
  36     {
  37         var ss = document.styleSheets;
  38         for (var i = 0; i < ss.length; ++i) {
  39             for (var j = 0; j < ss[i].cssRules.length; ++j) {
  40                 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
  41                     return ss[i].cssRules[j];
  42             }
  43         }
  44
  45         return null;
  46     }
  47
  48     function change()
  49     {
  50         // change keyframes name
  51         var keyframes = findKeyframesRule("foo");
  52         keyframes.name = "anim";
  53         document.getElementById('box').style.webkitAnimationName = "anim";
  54
  55         runAnimationTest(expectedValues);
  56     }
  57
  58     function setup()
  59     {
  60         if (window.layoutTestController) {
  61           layoutTestController.dumpAsText();
  62           layoutTestController.waitUntilDone();
  63           if (layoutTestController.pauseAnimationAtTimeOnElementWithId("bar", 0.5, "box"))
  64               document.getElementById("pre-result").innerHTML = "FAIL: animation is running";
  65           else
  66               document.getElementById("pre-result").innerHTML = "PASS: animation is not running";
  67         }
  68
  69         setTimeout(change, 200);
  70     }
  71
  72   </script>
  73 </head>
  74 <body onload="setup()">
  75 This test starts by making sure the animation is not running, because the animation-name and the
  76 name of they @keyframes rule do not match. Then it changes the name of the @keyframes rule so they
  77 match and makes sure the animation is now running.
  78 <div id="box">
  79 </div>
  80 <div id="pre-result">
  81 </div>
  82 <div id="result">
  83 </div>
  84 </body>
  85 </html>