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:
- Get the composited value for "from":
100px + 100px
=200px
. - Get the composited value for "to":
100px + auto
=100px
, because discrete is not additive andVresult = 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