keyframes-append-rule.html | Explore in Territory

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
  }

  #target {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div id="target"></div>
<script>
  test(function() {
    var rules = document.styleSheets[0].rules;
    for (var i = 0; i < rules.length; i++) {
      if (rules[i].type == CSSRule.KEYFRAMES_RULE) {
        rules[i].appendRule('100% { background-color: green; }');
      }
    }

    target.style.animation = 'anim 0s forwards';
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
  }, "Check that appendRule is working");
</script>

chromium/third_party/blink/web_tests/animations/keyframes-append-rule.html