third_party/WebKit/LayoutTests/animations/keyframes-cssom-duplicate-offsets.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% { background-color: red; }
   7     50% { left: 50px; background-color: green; }
   8     100% { background-color: red; }
   9   }
  10
  11   #target {
  12     width: 100px;
  13     height: 100px;
  14     position: relative;
  15   }
  16 </style>
  17 <div id="target"></div>
  18 <script>
  19   test(function() {
  20     var rules = document.styleSheets[0].rules;
  21     for (var i = 0; i < rules.length; i++) {
  22       if (rules[i].type == CSSRule.KEYFRAMES_RULE) {
  23         rules[i].appendRule('50% { left: 0px; }');
  24
  25         assert_equals(rules[i].cssRules.length, 4);
  26         assert_equals(rules[i].cssRules[0].cssText, '0% { background-color: red; }');
  27         assert_equals(rules[i].cssRules[1].cssText, '50% { left: 50px; background-color: green; }');
  28         assert_equals(rules[i].cssRules[2].cssText, '100% { background-color: red; }');
  29         assert_equals(rules[i].cssRules[3].cssText, '50% { left: 0px; }');
  30       }
  31     }
  32
  33     target.style.animation = 'anim 2s -1s paused';
  34     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  35     assert_equals(getComputedStyle(target).left, '0px', 'left offset');
  36   }, "Check that duplicate keyframe offsets are correctly merged");
  37 </script>