third_party/WebKit/LayoutTests/animations/keyframes-cssom-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     20% { left: 500px; }
   8     100% { left: 100px; }
   9   }
  10
  11   #target1 {
  12     animation: anim 10s -3s linear paused;
  13     left: 0px;
  14   }
  15
  16   #target2 {
  17     animation: anim 10s -6s linear paused;
  18     left: 100px;
  19   }
  20 </style>
  21 <div id="target1"></div>
  22 <div id="target2"></div>
  23 <script>
  24   test(function() {
  25     assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
  26     assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');
  27
  28     var sheet = document.styleSheets[0];
  29     var rules = sheet.rules;
  30     var keyframes = rules[0];
  31     keyframes.appendRule('50% { left: 500px; }');
  32     keyframes.deleteRule('20%');
  33
  34     assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
  35     assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
  36
  37     var newKeyframeRuleIndex = sheet.rules.length;
  38     sheet.insertRule('@keyframes anim { 0% { left: 0px; } 100% { left: 300px; } }', newKeyframeRuleIndex); // Should override 'anim'
  39
  40     assert_equals(parseInt(getComputedStyle(target1).left), 90, 'left offset');
  41     assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');
  42
  43     sheet.deleteRule(newKeyframeRuleIndex); // Should revert to original 'anim'
  44
  45     assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
  46     assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
  47
  48     newStyle = document.createElement('style');
  49     newStyle.appendChild(document.createTextNode('@keyframes anim { 0% { left: 100px; } 100% { left: 400px; } }'));
  50     document.head.appendChild(newStyle);
  51
  52     assert_equals(parseInt(getComputedStyle(target1).left), 190, 'left offset');
  53     assert_equals(parseInt(getComputedStyle(target2).left), 280, 'left offset');
  54
  55     newStyle.innerHTML = '@keyframes anim { 0% { left: 200px; } 100% { left: 400px; } }';
  56
  57     assert_equals(parseInt(getComputedStyle(target1).left), 260, 'left offset');
  58     assert_equals(parseInt(getComputedStyle(target2).left), 320, 'left offset');
  59
  60     document.head.removeChild(newStyle); // Should revert to original 'anim' with 50% { left: 500px; } replacing 20%.
  61
  62     assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
  63     assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');
  64
  65   }, "Check that changes to animation via CSSOM update it accordingly");
  66 </script>