<!DOCTYPE html>
<!--
 | Test case which ensures that animationend events are not fired on animations
 | that are canceled by being removed before they are finished.
 |   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="block" class="block"></div>

  <script>
    var animationsEnded = 0;

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

    var blockDiv = document.getElementById('block');
    blockDiv.addEventListener('animationend', function (e) {
      e.target.innerHTML = ++animationsEnded + ' ' + e.target.id;
      // Change the div to red when the handler is called.
      e.target.style.backgroundColor = 'rgb(250, 0, 0)'
      // Take a snapshot after all the divs have finished transitioning.
      if (window.testRunner) {
        // Do another layout to update the text.
        window.testRunner.DoNonMeasuredLayout();
      }
    });

    window.addEventListener('load', function() {
      setTimeout( () => {
        // Cancel the animation by setting it to none.
        blockDiv.style.animation = 'none';
        s = window.getComputedStyle(blockDiv);
        blockDiv.innerHTML = "canceled"
       // Change the div to green when the animation is canceled.
        blockDiv.style.backgroundColor = 'rgb(0, 250, 0)'
        if (window.testRunner) {
          // Do another layout to update the text.
          window.testRunner.DoNonMeasuredLayout();
        }
      }, 50);

      setTimeout( () => {
      // Take a snapshot after the animationend would have fired.
       if (window.testRunner) {
         window.testRunner.notifyDone();
       }
      }, 200);

      if (window.testRunner) {
        // Do another layout to start the animation.
        window.testRunner.DoNonMeasuredLayout();
      }
    });
  </script>

</body>
</html>