Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-values] [web-animations] Question about "not additive" for discrete animation #9070

Closed
BorisChiou opened this issue Jul 14, 2023 · 3 comments

Comments

@BorisChiou
Copy link
Contributor

Per the definition of discrete animation, it is not additive. The spec says:

If a value type does not define a specific procedure for addition or is defined as not additive, its addition operation is simply Vresult = Va.

Because addition is not commutative, and I expect Va is the underlying value, and Vb is the value to combine (i.e. the keyframe effect value), per the-effect-value-of-a-keyframe-animation-effect.

So for example:

test_composition({
  property: 'width',
  underlying: '100px',
  addFrom: '100px',
  addTo: 'auto',
}

The expected behavior per the spec is:

  1. Get the composited value for "from": 100px + 100px = 200px.
  2. Get the composited value for "to": 100px + auto = 100px, because discrete is not additive and Vresult = Va.

Therefore, this becomes an interpolation from 200px to 100px. However, this mismatches the wpt and the current behavior of all the browsers. The interpolation is something like from 200px to auto:

test_composition({
  property: 'width',
  underlying: '100px',
  addFrom: '100px',
  addTo: 'auto',
}, [
  {at: -0.3, expect: '200px'},
  {at: 0, expect: '200px'},
  {at: 0.5, expect: 'auto'},
  {at: 1, expect: 'auto'},
  {at: 1.5, expect: 'auto'},
]);

And there are other examples:

test_composition({
  property: 'grid-template-rows',
  underlying: '1fr 1fr',
  addFrom: '1fr [a b] 1fr [d]',
  addTo: '3fr [c] 3fr',
}, [
  {at: -0.5, expect: '1fr [ a b ] 1fr [d]'},
  {at: 0, expect: '2fr [ a b ] 2fr [d]'},
  {at: 0.5, expect: '3fr [c] 3fr'},
  {at: 1, expect: '4fr [c] 4fr'},
  {at: 1.5, expect: '5fr [c] 5fr'},
]);

We use discrete for <line-names>, and we use the keyframe value (i.e. Vb) as the composited <line-names> values in this test case.

I guess I may miss something. However, per these examples and current behaviors of all browsers, should we change the spec words for non-additive in [css-values-4] to use Vresult = Vb or effect value? Or perhaps we have similar definition in [web-animations]?

cc @birtles

@birtles
Copy link
Contributor

birtles commented Jul 15, 2023

should we change the spec words for non-additive in [css-values-4] to use Vresult = Vb or effect value?

That seems to make sense to me. I can't recall why we made it Va in the first place.

I looked up the SMIL spec to see if it came from there, but even it has:

If the animation is additive, F(t,u) = u + ff(t).
If the animation is non-additive, F(t,u) = ff(t).

@tabatkins
Copy link
Member

We edited the spec to match (it's now Vb).

@tabatkins
Copy link
Member

(Since the editors, impls, and WPTs all agree, this is as open-and-shut of an edit as we can really get.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment