<!DOCTYPE html>
<!--
 | Test case which ensures that transitionend events are fired on transitions
 | and they all resolve in the correct order.
 -->
<html>
<head>
  <style>
    .block {
      width: 200px;
      padding: 5px 5px 5px 5px;
      margin: 2px 2px 2px 2px;
      height: 50px;
      opacity: 0;
      background-color: rgb(150, 50, 255);
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="container"></div>

<script>
  var transitionsEnded = 0;

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

  // First create all the divs and attach them to the container.
  var NUM_DIVS = 5;
  var containerDiv = document.getElementById('container');
  var divs = []
  for (var i = 0; i < NUM_DIVS; ++i) {
    var newDiv = document.createElement('div');
    newDiv.className = 'block';
    newDiv.style.transitionDuration = (NUM_DIVS - i) * 10 + 'ms';
    newDiv.addEventListener('transitionend', function (e) {
      e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName;
      if (transitionsEnded == NUM_DIVS) {
        // Take a snapshot after all the divs have finished transitioning.
        if (window.testRunner) {
          window.testRunner.notifyDone();
        }
      }
    });
    containerDiv.appendChild(newDiv);
    divs.push(newDiv);
  }

  window.addEventListener('load', function() {
    if (window.testRunner) {
      // Do a layout upon the load event so that we setup our source styles
      // that we will be transitioning from.
      window.testRunner.DoNonMeasuredLayout();
    }

    // Now go through each of them and start their transitions.
    for (var i = 0; i < NUM_DIVS; ++i) {
      divs[i].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(NUM_DIVS * 10);
    }
  });
</script>

</body>
</html>