<!DOCTYPE html>
<!--
 | Test case which ensures that animationend events are fired on animations
 | that are removed from another animationend handler.
 |   https://drafts.csswg.org/date/2015-03-02/web-animations-css-integration/#css-animations-events
 -->
<html>
<head>
  <style>
    @keyframes testAnimation{
      0% { transform: translate(100px,0); }
      100% { transform: translate(0, 0); }
    }
    .block {
      width: 200px;
      padding: 5px 5px 5px 5px;
      margin: 2px 2px 2px 2px;
      height: 50px;
      background-color: rgb(150, 50, 255);
      font-size: 30px;
      animation: testAnimation 0.1s forwards;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="block1" class="block"></div>
  <div id="block2" class="block"></div>

  <script>
    var animationsEnded = 0;

    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    var block2Div = document.getElementById('block2');
    block2Div.addEventListener('animationend', function (e) {
      e.target.innerHTML = ++animationsEnded + ' ' + e.target.id;
      // Change the div to green when the handler is called.
      e.target.style.backgroundColor = 'rgb(0, 250, 0)'
      // Take a snapshot after all the divs have finished transitioning.
      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    });

    var block1Div = document.getElementById('block1');
    block1Div.addEventListener('animationend', function (e) {
      e.target.innerHTML = ++animationsEnded + ' ' + e.target.id;
      block2Div.style.animation = 'none';
      s = window.getComputedStyle(block2Div);
      // Change the div to green when the handler is called.
      e.target.style.backgroundColor = 'rgb(0, 250, 0)'
    });

    window.addEventListener('load', function() {
      if (window.testRunner) {
        // Run the transition then measure the result.
        window.testRunner.AdvanceClockByMs(100);
      }
    });
  </script>

</body>
</html>