<!DOCTYPE html>
<div class="target">all 10ms</div><br>
<div class="target">transform-origin 10ms</div><br>
<div class="target">-webkit-transform-origin 10ms</div><br>
<div class="target">-webkit-transform-origin-x 10ms</div><br>
<div class="target">-webkit-transform-origin-y 10ms</div><br>
<div class="target">-webkit-transform-origin-z 10ms</div><br>
<script>
if (window.testRunner) {
  testRunner.dumpAsText();
  testRunner.waitUntilDone();
}

document.addEventListener('transitionend', function(e) {
  var result = document.createElement('div');
  result.textContent = 'fired transitionend with propertyName: ' + e.propertyName;
  e.target.appendChild(result);
  if (window.testRunner) {
    // All events should be fired by next frame.
    requestAnimationFrame(function() {
      testRunner.notifyDone();
    });
  }
});

onload = function() {
  var targets = document.querySelectorAll('.target');
  for (var i = 0; i < targets.length; i++) {
    targets[i].offsetTop;
    targets[i].style.transition = targets[i].textContent;
    targets[i].style.webkitTransformOriginX = '10px';
    targets[i].style.webkitTransformOriginY = '10px';
    targets[i].style.webkitTransformOriginZ = '10px';
    targets[i].style.transformOrigin = '10px 10px 10px';
  }
};
</script>