<!DOCTYPE html>
<!--
 | Test case which ensures that transitionend events are fired on transitions
 | that are removed from the transition set from another transitionend handler.
 |   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(250, 0, 0);
      font-size: 30px;
      transition-duration: 100ms;
    }
  </style>
</head>
<body>
  <div id="transform"></div>
  <div id="opacity"></div>

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

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

  // Setup animations on both the transform and opacity div element, and remove
  // the animation from the opacity div in the ontransitionend handler of the
  // transform div.

  var opacityDiv = document.getElementById('opacity');
  opacityDiv.className = 'block';
  opacityDiv.style.opacity = 0;
  // Start the opacity div in red.
  opacityDiv.addEventListener('transitionend', function (e) {
    e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName;
    // 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 transformDiv = document.getElementById('transform');
  transformDiv.className = 'block';
  transformDiv.style.transform = 'translateX(100px)';
  transformDiv.addEventListener('transitionend', function (e) {
    e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName;
    // Remove the 'opacity' from the transition set for the opacity div.
    opacityDiv.style.transitionProperty = 'color';
    s = window.getComputedStyle(opacityDiv);
    // Change the div to green when the handler is called.
    e.target.style.backgroundColor = 'rgb(0, 250, 0)'
  });

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

    if (window.testRunner) {
      // Do another layout to start the transitions.
      window.testRunner.DoNonMeasuredLayout();

      // Advance the clock to exactly the end of the transition
      // durations.
      window.testRunner.AdvanceClockByMs(100);
    }
  });
 </script>

</body>
</html>