keyframes-cssom-duplicate-offsets.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    0% { background-color: red; }
    50% { left: 50px; background-color: green; }
    100% { background-color: red; }
  }

  #target {
    width: 100px;
    height: 100px;
    position: relative;
  }
</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('50% { left: 0px; }');

        assert_equals(rules[i].cssRules.length, 4);
        assert_equals(rules[i].cssRules[0].cssText, '0% { background-color: red; }');
        assert_equals(rules[i].cssRules[1].cssText, '50% { left: 50px; background-color: green; }');
        assert_equals(rules[i].cssRules[2].cssText, '100% { background-color: red; }');
        assert_equals(rules[i].cssRules[3].cssText, '50% { left: 0px; }');
      }
    }

    target.style.animation = 'anim 2s -1s paused';
    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
    assert_equals(getComputedStyle(target).left, '0px', 'left offset');
  }, "Check that duplicate keyframe offsets are correctly merged");
</script>
chromium/third_party/blink/web_tests/animations/keyframes-cssom-duplicate-offsets.html
