<!DOCTYPE html>
<meta charset="utf-8">
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="container"></div>
<script>
'use strict';

var transitionValues = [
  '-webkit-transform 10ms',
  'transform 10ms',
  'transform 10ms, -webkit-transform 10ms',
  '-webkit-transform 10ms, transform 10ms',
  'all 10ms',
  'all 10ms, -webkit-transform 10ms',
  '-webkit-transform 10ms, all 10ms'
];

async_test(t => {
  var remaining = transitionValues.length;
  for (let i = 0; i < transitionValues.length; i++) {
    const element = document.createElement('div');
    container.appendChild(element);

    element.addEventListener('transitionend', e => {
      t.step(() => {
        assert_equals(e.target, element);
        assert_equals(e.type, 'transitionend');
        assert_equals(e.propertyName, 'transform');
        assert_greater_than(remaining, 0);

        remaining -= 1;
        if (!remaining) {
          // Delay provides opportunity to detect excess events.
          setTimeout(() => {
            t.done();
          }, 50);
        }
      });
    });

    requestAnimationFrame(() => {
      element.offsetTop;
      element.style.transition = transitionValues[i];
      element.style.webkitTransform = 'rotate(360deg)';
      element.style.transform = 'rotate(360deg)';
    });
  }
}, 'Transition on the prefixed and/or unprefixed transform property causes a single transitionend event for the unprefixed transform property.');
</script>