Description
I wrote three different tests that have different behaviour in various browsers. They all test what happens when you start an animation and then remove the animation's target and check the animation play state before and after.
css-animation.html
<body>
<style>
@keyframes anim {
from { margin-left: 0 }
to { margin-left: 100px }
}
div {
animation: anim 1s;
}
</style>
<script type="text/javascript">
const target = document.body.appendChild(document.createElement("div"));
const animation = target.getAnimations()[0];
console.log(`playState before removing the target: ${animation.playState}`);
target.remove();
console.log(`playState after removing the target: ${animation.playState}`);
</script>
</body>css-transition.html
<body>
<style>
div {
transition: margin-left 1s;
}
</style>
<script type="text/javascript">
const target = document.body.appendChild(document.createElement("div"));
requestAnimationFrame(() => {
target.style.marginLeft = "100px";
const animation = target.getAnimations()[0];
console.log(`playState before removing the target: ${animation.playState}`);
target.remove();
console.log(`playState after removing the target: ${animation.playState}`);
});
</script>
</body>web-animation.html
<body>
<script type="text/javascript">
const target = document.body.appendChild(document.createElement("div"));
const animation = target.animate({ marginLeft: "100px" }, 1000);
console.log(`playState before removing the target: ${animation.playState}`);
target.remove();
console.log(`playState after removing the target: ${animation.playState}`);
</script>
</body>Here are the results:
| Test | Firefox Nightly | Chrome Canary | WebKit ToT |
|---|---|---|---|
| css-animation.html | running → idle | pending → idle | running → idle |
| css-transition.html | running → idle | pending → idle | running → idle |
| web-animation.html | running → running | pending → pending | running → idle |
So it seems we have first some disagreements between browsers on what the initial state would be, Firefox and WebKit both thinking it's "running" and Chrome thinking it's "pending", although I assume this is just due to Chrome not having yet made the change to remove "pending" as one of the play states.
What I wonder about is why would removing the target of a CSS Animation or CSS Transition would result in the play state being "idle" for everyone, but not for a vanilla Web Animations. What spec says why that is the case?