third_party/WebKit/LayoutTests/animations/keyframes-style-declaration-updates-animation.html

   1 <!doctype html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5   @keyframes anim {
   6     0% { left: 0px; }
   7     50% { left: 500px; }
   8     100% { left: 100px; }
   9   }
  10
  11   #target1 {
  12     animation: anim 10s -3s linear paused;
  13     background-color: rgb(0, 0, 0);
  14     left: 0px;
  15   }
  16
  17   #target2 {
  18     animation: anim 10s -6s linear paused;
  19     background-color: rgb(0, 0, 0);
  20     left: 100px;
  21   }
  22 </style>
  23 <div id="target1"></div>
  24 <div id="target2"></div>
  25 <script>
  26   test(function() {
  27     assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
  28     assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
  29
  30     var sheet = document.styleSheets[0];
  31     var rules = sheet.rules;
  32     var keyframes = rules[0];
  33
  34     assert_equals(keyframes.cssRules.length, 3);
  35     var keyframe = keyframes[1];
  36     assert_equals(keyframe.keyText, '50%');
  37     keyframe.style.setProperty('background-color', 'rgb(200, 100, 50)');
  38     assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(120, 60, 30)');
  39     assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(160, 80, 40)');
  40
  41     keyframe.style.removeProperty('background-color');
  42     assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(0, 0, 0)');
  43     assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 0, 0)');
  44
  45     keyframe.style.left = '200px';
  46     assert_equals(parseInt(getComputedStyle(target1).left), 120, 'left offset');
  47     assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');
  48
  49     keyframe.style.left = '500px';
  50     keyframe.keyText = '20%';
  51     assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
  52     assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
  53
  54   }, "Check that changes to keyframe style declarations update the animation accordingly");
  55 </script>