change-keyframes-name.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Changing Name of A Keyframes Rule Using CSSOM</title>
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
    #target {
      position: absolute;
      left: 0;
      top: 0;
      height: 100px;
      width: 100px;
      background-color: blue;
      animation-duration: 0.05s;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
      animation-name: bar;
    }
    @keyframes foo {
      from { left: 100px; }
      to   { left: 200px; }
    }
  </style>
</head>
<body>
  <div id="target"></div>
  <script>
    'use strict';

    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 == window.CSSRule.KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
            return ss[i].cssRules[j];
        }
      }

      return null;
    }

    async_test(t => {
      target.offsetTop; // Force style recalc

      document.addEventListener('animationend', t.step_func_done(() => {
        assert_equals(getComputedStyle(target).left, '200px');
      }));

      t.step(() => {

        // change keyframes name
        var keyframes = findKeyframesRule('foo');
        assert_not_equals(keyframes, null);
        keyframes.name = 'anim';
        target.style.animationName = 'anim';

        assert_equals(getComputedStyle(target).left, '100px', 'animation not started');
      });
    }, 'Changing Name of A Keyframes Rule Using CSSOM starts animation');
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/change-keyframes-name.html
