| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/ui-helper.js"></script> |
| <style> |
| #target { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| height: 100px; |
| width: 100px; |
| background: green; |
| animation: fadeIn 30ms; |
| } |
| |
| @keyframes fadeIn { |
| 0% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| |
| .transition { |
| transition: transform 60ms; |
| transform: translateX(200%); |
| } |
| |
| .no-transition { |
| transition: none; |
| transform: translateX(0); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="target"></div> |
| <script> |
| jsTestIsAsync = true; |
| target = document.getElementById("target"); |
| |
| description("The test passes if the animationend event is followed by two transitionend events."); |
| |
| target.addEventListener("transitionend", async () => { |
| testPassed("Observed first 'transitionend' event. Starting second transition..."); |
| target.classList.replace("transition", "no-transition"); |
| |
| await UIHelper.renderingUpdate(); |
| await UIHelper.renderingUpdate(); |
| |
| target.classList.replace("no-transition", "transition"); |
| target.addEventListener("transitionend", () => { |
| testPassed("Observed second 'transitionend' event."); |
| finishJSTest(); |
| }); |
| }, { once: true }); |
| |
| target.addEventListener("animationend", () => { |
| testPassed("Observed 'animationend' event. Starting first transition..."); |
| target.classList.add("transition"); |
| }); |
| </script> |
| </body> |
| </html> |
