[web-animations-1] Compositing animations with empty keyframes are not clearly specified

[shengha2]

Problem

We use the same html
test_animation.html.tar.gz in Chrome and Firefox and they show different animation behaviors.

    const keyframe1 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 1 )"},
    ];
    const keyframe2 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 2 )"},
      {"transform":"none"},
      {},
    ];

    const animation1 = div.animate(keyframe1, {
                              "duration":3000,
                              "easing":"linear",
      });
    const animation2 = div.animate(keyframe2, {
                              "duration":3000,
                              "easing":"linear",
      });

The animation2 starts simultaneously as the animation1. Both animations start from a translateX 200 px and rotate 360 degrees to translate 100 px and scale of 2. Then to the “none” which is a no operation(identity matrix). The default composition of two animations, playing at the same time, is the replace operation which means the result of compositing the effect value with the underlying value is simply the effect value.

The duration of the animation is 3 seconds. In the first two seconds, Firefox and Chrome have the same rendered animation. However, in the last second, we can see the square starts rotating in the Chrome but does not rotate in the Firefox.

Potential Explaination

We believe the empty keyframe “{}” is taking its underlying value from animation1 first keyframe, but we are not able to find this behavior in the spec. The confusion comes from whether the underlying style should be a neutral keyframe or the initial keyframe of animation1.

It appears that Chrome and Firefox are resolving the empty keyframe based on the initial keyframe of animation1; however, Chrome is resolving to the transform list

{"transform":"translateX( 200px ) rotate( 360deg )"}

whereas Firefox is resolving to a matrix representation

[1   0   0 200]
[0   1   0   0]
[0   0   1   0]
[0   0   0   1]

[birtles]

Here's a simplified test case:

https://codepen.io/birtles/pen/YzzoOPW

I believe what is happening is that while the underlying animation is paused at currentTime 0 it should produce an underlying value of the result of interpolating translateX(200px) rotate(360deg) and translateX(100%) scale(1) at p = 0.0.

Since those don't have matching transform functions for the rotate() / scale() parts, that part is going to end up with a matrix() value there so that the rotate(360deg) effectively becomes rotate(0deg). As a result there is no rotation when interpolating from none.

I suspect Chrome is applying special case behavior for p == 0.0 and simply returning the first keyframe value, translateX(200px) rotate(360deg) and hence interpolating from none produces rotation.

I believe this was resolved on recently in #3290.