| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <style> |
| .box { |
| position: relative; |
| left: 0; |
| height: 100px; |
| width: 100px; |
| margin: 10px; |
| background-color: blue; |
| -webkit-transition-property: width; |
| -webkit-transition-duration: 0.5s; |
| } |
| </style> |
| <script src="transition-end-event-helpers.js"></script> |
| <script src="../resources/js-test.js"></script> |
| <script type="text/javascript"> |
| function runAnimation() { |
| var box = document.getElementById('box1'); |
| box.style.width = '200px'; |
| } |
| </script> |
| </head> |
| <body onLoad="runAnimation()"> |
| <script type="text/javascript"> |
| description("Test to make sure that if prefixed transition events are modified we correctly modify unprefixed events."); |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var testContainer = document.createElement("div"); |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div id="box1" class="box"></div>'; |
| var box = document.getElementById('box1'); |
| |
| var transitionEventBox; |
| |
| function transitionEndEvent(e) |
| { |
| e.stopPropagation(); |
| transitionEventBox = e; |
| shouldBe("transitionEventBox.currentTarget", "transitionEventBox.target"); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| document.body.removeChild(testContainer); |
| } |
| |
| testContainer.addEventListener('webkitTransitionEnd', transitionEndEvent, false); |
| box.addEventListener('webkitTransitionEnd', transitionEndEvent, false); |
| </script> |
| </body> |
| </html> |
