Skip to content

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

Closed
@BorisChiou

Description

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

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

        翻译: