| <!DOCTYPE html> |
| |
| <script src="../../resources/js-test-pre.js"></script> |
| |
| <style> |
| #before:before, |
| #after:after { |
| content: ""; |
| display: block; |
| height: 50px; |
| width: 50px; |
| -webkit-transition: width 1ms; |
| transition: width 1ms; |
| } |
| |
| #before.transition:before, |
| #after.transition:after { |
| height: 10px; |
| width: 10px; |
| } |
| |
| #before, |
| #after { |
| display: inline-block; |
| border: 1px solid black; |
| background: red; |
| } |
| |
| #after.transition, |
| #before.transition { |
| background: green; |
| } |
| </style> |
| |
| <div id="before"></div> |
| <div id="after"></div> |
| |
| <script> |
| description('Transitions on :before and :after pseudo elements should run and fire DOM events'); |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var expectedEvents = [ ["width", "before", "::before"] , ["width", "after", "::after"] ]; |
| var currentEvent = 0; |
| |
| function recordTransitionEvent() |
| { |
| shouldBe("event.propertyName", "expectedEvents[currentEvent][0]"); |
| shouldBe("event.target.id", "expectedEvents[currentEvent][1]"); |
| shouldBe("event.pseudoElement", "expectedEvents[currentEvent][2]"); |
| if (currentEvent == 1) { |
| isSuccessfullyParsed(); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } else { |
| currentEvent++; |
| testTransition('after'); |
| } |
| } |
| |
| function testTransition(id) |
| { |
| var div = document.getElementById(id); |
| div.className = 'transition'; |
| } |
| |
| onload = function() { |
| document.addEventListener( 'transitionend', recordTransitionEvent); |
| testTransition('before'); |
| }; |
| </script> |
