play-state.html | Explore in Territory

<!DOCTYPE html>
<head>
  <title>Test of animation-play-state</title>
  <style>
    .target {
      height: 100px;
      width: 100px;
      animation-duration: 1000ms;
      animation-timing-function: linear;
    }
    #translate {
      background-color: blue;
    }
    #translate.started {
      animation-name: move1;
    }
    @keyframes move1 {
        from { transform: translateX(100px); }
        to   { transform: translateX(200px); }
    }
    #left {
      position: relative;
      background-color: red;
    }
    #left.started {
      animation-name: move2;
    }
    @keyframes move2 {
        from { left: 100px; }
        to   { left: 200px; }
    }
    .paused {
      animation-play-state: paused;
    }
    .quick {
      animation-duration: 100ms;
    }
  </style>
  <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  <script type="text/javascript">
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }

    function log(message) {
      var div = document.createElement('div');
      div.textContent = message;
      document.body.appendChild(div);
    }

    function logPassFail(expected, actual, id, description) {
      var didPass = expected === actual;
      log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + '  style ' + description);
    }

    function toggleClass(className) {
      var targets = document.getElementsByClassName('target');
      for (var i = 0; i < targets.length; ++i) {
        targets[i].classList.toggle(className);
      }
    }

    function start() {
      document.removeEventListener('animationstart', start, false);
      requestAnimationFrame(pause);
    }

    var transform;
    var left;
    var paused = false;
    function pause() {
      paused = true;
      toggleClass('paused');
      // Transitioning the play state from running to paused is asynchronous.
      // The animation is paused once the user agent signals that the animation
      // is ready.
      requestAnimationFrame(() => {
        transform = getComputedStyle(document.getElementById('translate')).transform;
        left = getComputedStyle(document.getElementById('left')).left;
        requestAnimationFrame(resume);
      });
    }

    function resume() {
      logPassFail(transform, getComputedStyle(document.getElementById('translate')).transform, 'translate', 'when paused');
      logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
      toggleClass('paused');
      toggleClass('quick');
    }

    function end() {
      document.removeEventListener('animationend', end, false);
      if (!paused)
        log('Missed frame in which to pause animation');
      logPassFail('none', getComputedStyle(document.getElementById('translate')).transform, 'translate', 'at end');
      logPassFail('0px', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
      if (window.testRunner) {
        testRunner.notifyDone();
      }
    }

    // Wait until the page has loaded and painted to start the animations to
    // ensure we will have enough main frames to pause the animation.
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        document.addEventListener('animationstart', start, false);
        document.addEventListener('animationend', end, false);
        toggleClass('started');
      });
    });
  </script>
</head>
<body>
<p>
  This tests the operation of animation-play-state. We test style
  while the animations are paused and once unpaused.
</p>
<div class="target" id="translate">transform</div>
<div class="target" id="left">left</div>
</body>
</html>
chromium/third_party/blink/web_tests/animations/play-state.html
