src/third_party/WebKit/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         10%  { left: 200px; }
  23         90%  { 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     function findKeyframesRule(rule)
  31     {
  32         var ss = document.styleSheets;
  33         for (var i = 0; i < ss.length; ++i) {
  34             for (var j = 0; j < ss[i].cssRules.length; ++j) {
  35                 if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
  36                     return ss[i].cssRules[j];
  37             }
  38         }
  39
  40         return null;
  41     }
  42
  43     const expectedValues = [
  44       // [time, element-id, property, expected-value, tolerance]
  45       [0.5, "box", "left", 200, 10],
  46       [1, "box", "top", 100, 10],
  47     ];
  48
  49     const callbacks = {
  50       0.6: function() {
  51           document.getElementById('box').style.webkitAnimationName = "none";
  52           // a forced style-recalc aborts the previous animation
  53           document.getElementById('box').offsetTop;
  54           // change keyframes
  55           var keyframes = findKeyframesRule("anim");
  56           keyframes.deleteRule("0%");
  57           keyframes.deleteRule("40%");
  58           keyframes.deleteRule("60%");
  59           keyframes.deleteRule("100%");
  60           keyframes.insertRule("0% { top: 50px; }");
  61           keyframes.insertRule("10% { top: 100px; }");
  62           keyframes.insertRule("90% { top: 100px; }");
  63           keyframes.insertRule("100% { top: 150px; }");
  64           document.getElementById('box').style.webkitAnimationName = "anim";
  65       }
  66     }
  67
  68     // FIXME: Consider whether we can support this kind of test (staggered start) under the pause API
  69     runAnimationTest(expectedValues, callbacks, null, 'do-not-use-pause-api');
  70   </script>
  71 </head>
  72 <body>
  73 This test performs an animation of the left property and makes sure it is animating. Then it stops
  74 the animation, changes the keyframes to an animation of the top property, restarts the animation
  75 and makes sure top is animating.
  76 <div id="box">
  77 </div>
  78 <div id="result">
  79 </div>
  80 </body>
  81 </html>