change-keyframes.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  #box {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: blue;
    animation-name: anim;
    animation-duration: 1s;
    animation-delay: -0.5s;
    animation-play-state: paused;
    animation-timing-function: linear;
  }

  @keyframes anim {
    from { left: 100px; }
    to   { left: 200px; }
  }
</style>
<div id="box"></div>
<script>
  function findKeyframesRule(rule) {
    var ss = document.styleSheets;
    for (var i = 0; i < ss.length; ++i) {
      for (var j = 0; j < ss[i].cssRules.length; ++j) {
        if (ss[i].cssRules[j].type == CSSRule.KEYFRAMES_RULE &&
            ss[i].cssRules[j].name == rule) {
          return ss[i].cssRules[j];
        }
      }
    }

    return null;
  }

  test(function() {
    var box = document.getElementById('box');

    // The left property should be animating initially.
    assert_equals(getComputedStyle(box).left, '150px', 'left');

    // A forced style-recalc aborts the previous animation.
    box.style.animationName = "none";
    assert_equals(getComputedStyle(box).left, '0px', 'left');

    // Change keyframes.
    var keyframes = findKeyframesRule("anim");
    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");
    keyframes.appendRule("0% { top: 50px; }");
    keyframes.appendRule("100% { top: 150px; }");
    box.style.animationName = "anim";

    // The left property should reset and top should be animating.
    assert_equals(getComputedStyle(box).left, '0px', 'left');
    assert_equals(getComputedStyle(box).top, '100px', 'top');
  }, "Check that changes to keyframe rules take effect");
</script>
chromium/third_party/blink/web_tests/animations/change-keyframes.html
