third_party/WebKit/LayoutTests/animations/keyframes-append-rule.html

   1 <!doctype html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5   @keyframes anim {
   6   }
   7
   8   #target {
   9     width: 100px;
  10     height: 100px;
  11     background-color: red;
  12   }
  13 </style>
  14 <div id="target"></div>
  15 <script>
  16   test(function() {
  17     var rules = document.styleSheets[0].rules;
  18     for (var i = 0; i < rules.length; i++) {
  19       if (rules[i].type == CSSRule.KEYFRAMES_RULE) {
  20         rules[i].appendRule('100% { background-color: green; }');
  21       }
  22     }
  23
  24     target.style.animation = 'anim 0s forwards';
  25     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  26   }, "Check that appendRule is working");
  27 </script>