| <!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-pre.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 transitionEventContainer; |
| var transitionEventBox; |
| |
| function innerTransitionEndEvent(e) |
| { |
| transitionEventBox = e; |
| } |
| |
| function outerTransitionEndEvent(e) |
| { |
| transitionEventContainer = e; |
| shouldBe("transitionEventContainer.type", "transitionEventBox.type"); |
| shouldBe("transitionEventContainer.bubbles", "transitionEventBox.bubbles"); |
| shouldBe("transitionEventContainer.timeStamp", "transitionEventBox.timeStamp"); |
| shouldBe("transitionEventContainer.cancelable", "transitionEventBox.cancelable"); |
| shouldBe("transitionEventContainer.srcElement", "transitionEventBox.srcElement"); |
| shouldBe("transitionEventContainer.returnValue", "transitionEventBox.returnValue"); |
| shouldBe("transitionEventContainer.cancelBubble", "transitionEventBox.cancelBubble"); |
| shouldBe("transitionEventContainer.defaultPrevented", "transitionEventBox.defaultPrevented"); |
| shouldBe("transitionEventContainer.target", "transitionEventBox.target"); |
| shouldBe("transitionEventContainer.currentTarget", "testContainer"); |
| // TransitionEnd event specific properties. |
| shouldBe("transitionEventContainer.pseudoElement", "transitionEventBox.pseudoElement"); |
| shouldBe("transitionEventContainer.elapsedTime", "transitionEventBox.elapsedTime"); |
| shouldBe("transitionEventContainer.propertyName", "transitionEventBox.propertyName"); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| document.body.removeChild(testContainer); |
| } |
| |
| testContainer.addEventListener('webkitTransitionEnd', outerTransitionEndEvent, false); |
| box.addEventListener('webkitTransitionEnd', innerTransitionEndEvent, false); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
