[css-animations-1] Removing the target of an animati... | w3c/csswg-drafts

Nobody has claimed this yet.

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?

@flackr @stephenmcgruer @birtles

Start with the inline css-animation.html, css-transition.html, and web-animation.html cases and compare their reported playState values across the listed browsers. Trace the relevant animation-target removal behavior in the applicable specifications, then document why CSS animations and transitions differ from Web Animations and what interoperable result is expected.

Written by the indexing model from the issue text.

[css-animations-1] Removing the target of an animation has different behaviour between CSS Animations, CSS Transitions and Web Animations

Description

Contributor guide

First steps

Research direction

Assessment