third_party/WebKit/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       // [time, element-id, property, expected-value, tolerance]
  32       [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, null, null, 'do-not-use-pause-api');
  56     }
  57
  58     function setup()
  59     {
  60         if (window.testRunner) {
  61             testRunner.dumpAsText();
  62             testRunner.waitUntilDone();
  63         }
  64         setTimeout(change, 200);
  65     }
  66
  67   </script>
  68 </head>
  69 <body onload="setup()">
  70 This test changes the name of the @keyframes rule so that it matches
  71 and makes sure the animation starts running.
  72 <div id="box">
  73 </div>
  74 <div id="pre-result">
  75 </div>
  76 <div id="result">
  77 </div>
  78 </body>
  79 </html>