55 lines
1.7 KiB
HTML
55 lines
1.7 KiB
HTML
<!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>
|