Skip to content

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

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

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