| <!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> |
