keyframes-cssom-change-name-updates-animation.html

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

  #target {
      animation: anim 1s paused;
      left: 0px;
  }

</style>
<div id="target"></div>
<script>
  test(function() {
    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    var keyframes = rules[0];

    assert_equals(parseInt(getComputedStyle(target).left), 100, 'left offset');
    keyframes.name = 'foobar';
    assert_equals(parseInt(getComputedStyle(target).left), 0,  'left offset');
    keyframes.name = 'anim';
    assert_equals(parseInt(getComputedStyle(target).left), 100,  'left offset');

  }, "Check that changes to @keyframes name updates the animating element accordingly");
</script>

chromium/third_party/blink/web_tests/animations/keyframes-cssom-change-name-updates-animation.html