[web-animations-1] Animatable.animate() should not flush

[birtles]

From Mozilla bug 1524480:

It turns out that whether or not Element.animate flushes is observable (and it doesn't flush in Blink but does in Gecko and WebKit).

Suppose we have:

div {
  opacity: 0.1;
  transition: 1s opacity linear;
}

And then we do:

getComputedStyle(div).opacity;

At this point the computed opacity of div is 0.1.

Now, suppose we update the specified opacity to 0.2 but DON'T flush style:

div.style.opacity = '0.2';

Then trigger an animation on the same element:

div.animate({ opacity: [0.6, 1] }, 1000);

At this point if Element.animate() flushes style it will cause us to trigger a transition from 0.1 to 0.2.

However, if Element.animate() does NOT flush style we will:

• Generate a new Animation animating from 0.6 to 1.
• Then on the next restyle we will have a before-change style opacity of 0.6 (since we bring declarative animations up-to-date as part of calculating the before-change style).
• And we we also have an after-change style of 0.6 (for the same reason).

Since the before-change style and after-change style have not changed, no transition will be generated.

Test case: https://codepen.io/birtles/pen/YBxxBd

I propose we spec that Animatable.animate() (and similarly KeyframeEffect.setKeyframes(), etc.) do not flush style (or, in CSS transitions spec terms, trigger a style change event).

The reason is that if we require UAs to flush, it would mean that Element.animate() both flushes AND dirties style. As a result, if the author triggers a number of animations in a single animation frame, the browser would be required to flush multiple times per frame.

[birtles]

Discussed this with Google, Apple, and Microsoft folk and agreed animate() should not flush. I suspect all mutating methods should not flush (except CSSAnimation.pause() etc.) in general but I need to verify that this makes sense and check what engines currently do before writing the spec text and WPT for this.

[birtles]

WPT for this have been written and will be landed via Mozilla bug 1525809.