| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script src="resources/lifecycle-utilities.js"></script> |
| <style> |
| div#target { |
| color: red; |
| opacity: 0; |
| |
| } |
| div#target.active { |
| color: blue; |
| opacity: 1; |
| |
| transition-property: opacity; |
| transition-duration: 400ms; |
| transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.4); |
| transition-delay: 100ms; |
| } |
| </style> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("Animation.Lifecycle"); |
| |
| suite.addTestCase({ |
| name: "Animation.Lifecycle.CSSTransition", |
| description: "Check that Web Inspector is notified whenever CSS transitions are created/destroyed.", |
| async test() { |
| InspectorTest.expectEqual(WI.animationManager.animationCollection.size, 0, "There should not be any animations."); |
| |
| let [animation] = await Promise.all([ |
| InspectorTest.AnimationLifecycleUtilities.awaitAnimationCreated(WI.Animation.Type.CSSTransition), |
| InspectorTest.evaluateInPage(`document.getElementById("target").classList.add("active")`), |
| ]); |
| |
| await Promise.all([ |
| InspectorTest.AnimationLifecycleUtilities.awaitAnimationDestroyed(animation.animationId), |
| InspectorTest.AnimationLifecycleUtilities.destroyAnimations(), |
| InspectorTest.evaluateInPage(`document.getElementById("target").classList.remove("active")`), |
| ]); |
| }, |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the Animation.animationCreated and Animation.animationDestroyed events.</p> |
| <div id="target"></div> |
| </body> |
| </html> |
