<!DOCTYPE html>
<!--
 | Test case which ensures that transitionend events are not fired on
 | transitions that are canceled by being removed from the transition set before
 | they are finished.
 |   https://drafts.csswg.org/date/2015-03-02/web-animations-css-integration/#css-transitions-events
 -->
<html>
<head>
  <style>
    .block {
      width: 200px;
      padding: 5px 5px 5px 5px;
      margin: 2px 2px 2px 2px;
      height: 50px;
      background-color: rgb(0, 0, 250);
      font-size: 30px;
      transition-duration: 100ms;
    }
  </style>
</head>
<body>
  <div id="opacity"></div>

 <script>
  var start = Date.now();
  var transitionsEnded = 0;

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

  var opacityDiv = document.getElementById('opacity');
  opacityDiv.className = 'block';
  opacityDiv.style.opacity = 0;
  opacityDiv.addEventListener('transitionend', function (e) {
    e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName;
    // Change the div to red when the handler is called.
    e.target.style.backgroundColor = 'rgb(250, 0, 0)'
    if (window.testRunner) {
      // Do another layout to update the text.
      window.testRunner.DoNonMeasuredLayout();
    }
  });

  window.addEventListener('load', function() {
    // Start the transitions.
    opacityDiv.style.transitionProperty = 'opacity';
    opacityDiv.style.opacity = 1;

    setTimeout( () => {
      // Cancel the opacity transition by removing it from the transition set.
      opacityDiv.style.transitionProperty = 'color';
      opacityDiv.innerHTML = "canceled"
      // Change the div to green when the transition is canceled.
      opacityDiv.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 transitionend would have fired.
     if (window.testRunner) {
       window.testRunner.notifyDone();
     }
    }, 200);

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

</body>
</html>