| <!DOCTYPE html> |
| <!-- |
| | Test case which ensures that transitionend events are fired on transitions |
| | that are removed from the transition set from another transitionend handler. |
| | https://drafts.csswg.org/date/2015-03-02/web-animations-css-integration/#css-transitions-events |
| --> |
| <html> |
| <head> |
| <style> |
| .block { |
| width: 200px; |
| padding: 5px 5px 5px 5px; |
| margin: 2px 2px 2px 2px; |
| height: 50px; |
| background-color: rgb(250, 0, 0); |
| font-size: 30px; |
| transition-duration: 100ms; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="transform"></div> |
| <div id="opacity"></div> |
| |
| <script> |
| var start = Date.now(); |
| var transitionsEnded = 0; |
| |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| // Setup animations on both the transform and opacity div element, and remove |
| // the animation from the opacity div in the ontransitionend handler of the |
| // transform div. |
| |
| var opacityDiv = document.getElementById('opacity'); |
| opacityDiv.className = 'block'; |
| opacityDiv.style.opacity = 0; |
| // Start the opacity div in red. |
| opacityDiv.addEventListener('transitionend', function (e) { |
| e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName; |
| // Change the div to green when the handler is called. |
| e.target.style.backgroundColor = 'rgb(0, 250, 0)' |
| // Take a snapshot after all the divs have finished transitioning. |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| }); |
| |
| var transformDiv = document.getElementById('transform'); |
| transformDiv.className = 'block'; |
| transformDiv.style.transform = 'translateX(100px)'; |
| transformDiv.addEventListener('transitionend', function (e) { |
| e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName; |
| // Remove the 'opacity' from the transition set for the opacity div. |
| opacityDiv.style.transitionProperty = 'color'; |
| s = window.getComputedStyle(opacityDiv); |
| // Change the div to green when the handler is called. |
| e.target.style.backgroundColor = 'rgb(0, 250, 0)' |
| }); |
| |
| window.addEventListener('load', function() { |
| // Start the transitions. |
| transformDiv.style.transitionProperty = 'transform'; |
| transformDiv.style.transform = ''; |
| opacityDiv.style.transitionProperty = 'opacity'; |
| opacityDiv.style.opacity = 1; |
| |
| if (window.testRunner) { |
| // Do another layout to start the transitions. |
| window.testRunner.DoNonMeasuredLayout(); |
| |
| // Advance the clock to exactly the end of the transition |
| // durations. |
| window.testRunner.AdvanceClockByMs(100); |
| } |
| }); |
| </script> |
| |
| </body> |
| </html> |
