<!DOCTYPE html>
<head>
  <title>Test of animation-play-state</title>
  <style>
    .target {
      height: 100px;
      width: 100px;
      animation-duration: 40ms;
      animation-timing-function: linear;
    }
    #translate {
      background-color: blue;
      animation-name: move1;
    }
    @keyframes move1 {
        from { transform: translateX(100px); }
        to   { transform: translateX(200px); }
    }
    #left {
      position: relative;
      background-color: red;
      animation-name: move2;
    }
    @keyframes move2 {
        from { left: 100px; }
        to   { left: 200px; }
    }
    .paused {
      animation-play-state: paused;
    }
  </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 togglePaused() {
      var targets = document.getElementsByClassName('target');
      for (var i = 0; i < targets.length; ++i) {
        targets[i].classList.toggle('paused');
      }
    }

    var start = function() {
      document.removeEventListener('animationstart', start, false);
      setTimeout(pause, 20);
    }

    var transform;
    var left;
    function pause() {
      togglePaused();
      transform = getComputedStyle(document.getElementById('translate')).transform;
      left = getComputedStyle(document.getElementById('left')).left;
      setTimeout(resume, 20);
    }

    function resume() {
      logPassFail(transform, getComputedStyle(document.getElementById('translate')).transform, 'translate', 'when paused');
      logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
      togglePaused();
      setTimeout(end, 100);
    }

    function end() {
      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();
      }
    }

    document.addEventListener('animationstart', start, false);
  </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>