Skip to content

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

Closed

Description

@BorisChiou

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

Activity

  1. birtles commented on Jul 15, 2023

    @birtles
    Contributor

    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).

  2. tabatkins commented on Oct 23, 2023

    @tabatkins
    Member

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

  3. tabatkins commented on Oct 23, 2023

    @tabatkins
    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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions