| <!DOCTYPE html> |
| <!-- |
| | Test case which ensures that transitionend events are fired on transitions |
| | and they all resolve in the correct order. |
| --> |
| <html> |
| <head> |
| <style> |
| .block { |
| width: 200px; |
| padding: 5px 5px 5px 5px; |
| margin: 2px 2px 2px 2px; |
| height: 50px; |
| opacity: 0; |
| background-color: rgb(150, 50, 255); |
| font-size: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="container"></div> |
| |
| <script> |
| var transitionsEnded = 0; |
| |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| // First create all the divs and attach them to the container. |
| var NUM_DIVS = 5; |
| var containerDiv = document.getElementById('container'); |
| var divs = [] |
| for (var i = 0; i < NUM_DIVS; ++i) { |
| var newDiv = document.createElement('div'); |
| newDiv.className = 'block'; |
| newDiv.style.transitionDuration = (NUM_DIVS - i) * 10 + 'ms'; |
| newDiv.addEventListener('transitionend', function (e) { |
| e.target.innerHTML = ++transitionsEnded + ' ' + e.propertyName; |
| if (transitionsEnded == NUM_DIVS) { |
| // Take a snapshot after all the divs have finished transitioning. |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| }); |
| containerDiv.appendChild(newDiv); |
| divs.push(newDiv); |
| } |
| |
| window.addEventListener('load', function() { |
| if (window.testRunner) { |
| // Do a layout upon the load event so that we setup our source styles |
| // that we will be transitioning from. |
| window.testRunner.DoNonMeasuredLayout(); |
| } |
| |
| // Now go through each of them and start their transitions. |
| for (var i = 0; i < NUM_DIVS; ++i) { |
| divs[i].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(NUM_DIVS * 10); |
| } |
| }); |
| </script> |
| |
| </body> |
| </html> |
