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

graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animations-1] Removing the target of an animation has different behaviour between CSS Animations, CSS Transitions and Web Animations ==
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**
```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**
```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**
```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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2948 using your GitHub account

Received on Tuesday, 24 July 2018 14:16:20 UTC