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

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] [web-animations] Question about "not additive" for discrete animation ==
Per the definition of [discrete animation](https://drafts.csswg.org/web-animations-1/#discrete), it is [not additive](https://drafts.csswg.org/css-values-4/#not-additive). The spec says:
> If a value type does not define a specific procedure for [addition](https://drafts.csswg.org/css-values-4/#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](https://drafts.csswg.org/web-animations-1/#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](https://github.com/web-platform-tests/wpt/blob/master/css/css-sizing/animation/width-composition.html#L65-L76) 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](https://github.com/web-platform-tests/wpt/blob/master/css/css-grid/animation/grid-template-rows-composition.html#L120-L131):
```
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](https://drafts.csswg.org/css-values-4/#not-additive) in [css-values-4] to use `Vresult = Vb` or effect value? Or perhaps we have similar definition in [web-animations]?

cc @birtles 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9070 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 14 July 2023 22:11:39 UTC