keyframes-cssom-updates-animation.html

<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    0% { left: 0px; }
    20% { left: 500px; }
    100% { left: 100px; }
  }

  #target1 {
    animation: anim 10s -3s linear paused;
    left: 0px;
  }

  #target2 {
    animation: anim 10s -6s linear paused;
    left: 100px;
  }
</style>
<div id="target1"></div>
<div id="target2"></div>
<script>
  test(function() {
    assert_equals(parseInt(getComputedStyle(target1).left), 450, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 300, 'left offset');

    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    var keyframes = rules[0];
    keyframes.appendRule('50% { left: 500px; }');
    keyframes.deleteRule('20%');

    assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

    var newKeyframeRuleIndex = sheet.rules.length;
    sheet.insertRule('@keyframes anim { 0% { left: 0px; } 100% { left: 300px; } }', newKeyframeRuleIndex); // Should override 'anim'

    assert_equals(parseInt(getComputedStyle(target1).left), 90, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 180, 'left offset');

    sheet.deleteRule(newKeyframeRuleIndex); // Should revert to original 'anim'

    assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

    newStyle = document.createElement('style');
    newStyle.appendChild(document.createTextNode('@keyframes anim { 0% { left: 100px; } 100% { left: 400px; } }'));
    document.head.appendChild(newStyle);

    assert_equals(parseInt(getComputedStyle(target1).left), 190, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 280, 'left offset');

    newStyle.innerHTML = '@keyframes anim { 0% { left: 200px; } 100% { left: 400px; } }';

    assert_equals(parseInt(getComputedStyle(target1).left), 260, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 320, 'left offset');

    document.head.removeChild(newStyle); // Should revert to original 'anim' with 50% { left: 500px; } replacing 20%.

    assert_equals(parseInt(getComputedStyle(target1).left), 300, 'left offset');
    assert_equals(parseInt(getComputedStyle(target2).left), 420, 'left offset');

  }, "Check that changes to animation via CSSOM update it accordingly");
</script>
chromium/third_party/blink/web_tests/animations/keyframes-cssom-updates-animation.html
