[css-values][css-easing] No definition for values animated past valid range

[tabatkins]

A cubic-bezier() easing function can, if the provided points are outside the unit square, produce progress values outside the [0,1] range. This means that, at certain points in a transition, the interpolated result might not be between the start and end values, but beyond either of them.

Many properties have restricted ranges for their values; for instance, width does not accept negative lengths. The general rules of CSS mean that a transition's start and end values are valid for the property in question, but due to the above-mentioned effect, the interpolated result might be outside the start->end range, meaning it might be outside the valid range of the property. That is, given an appropriate cubic-bezier(), a width transition from 0px to 100px might output a value of -20px at some point.

As far as I can tell, the behavior for this case is not defined anywhere - I've followed definitions as far as I can across Transitions, Animations, Easing, V&U, and Web Animations, and nothing even acknowledges this as a potential problem, let alone defines how to handle it.

I think there's an obvious answer - the value should be clamped to the valid range, just like a math function that outputs something outside the range - but we should define this. I think V&U is the right place for the definition, specifically just adding a sentence to https://drafts.csswg.org/css-values-4/#combining-values saying something similar to what https://drafts.csswg.org/css-values-4/#calc-range says for math functions.

(I ran into this while reviewing web-platform-tests/wpt#28036, which happens to test that the 'perspective' property can handle 0px as a value; the test structure actually tests an interpolation that goes deep into negative values, tho.)

[dbaron]

There used to be text saying this in css-transitions-1, but it appears to have gotten lost in the refactoring of that section into css-values (perhaps via css-easing as an intermediate step?):

However, if this value (Vres) is outside the allowed range of values for the property, then it is clamped to that range. This can occur if p is outside of the range 0 to 1, which can occur if a timing function is specified with a y1 or y2 that is outside the range 0 to 1.

[dbaron]

(That text was originally added in e58ba4a.)

[dbaron]

... and removed in 7b816b2.

[birtles]

Oops, sorry about that. I think the intention was that it would be added to V&U as part of the edits @fantasai and I made there, but I guess I overlooked it.

For what it's worth, SMIL has this:

Some attributes that support additive animation have a defined legal range for values (e.g., an opacity attribute may allow values between 0 and 1). In some cases, an animation function may yield out of range values. It is recommended that implementations clamp the results to the legal range as late as possible, before applying them to the presentation value. Ideally, the effect of all the animations active or frozen at a given point should be combined, before any clamping is performed. Although individual animation functions may yield out of range values, the combination of additive animations may still be legal. Clamping only the final result and not the effect of the individual animation functions provides support for these cases. Intermediate results may be clamped when necessary although this is not optimal. The host language must define the clamping semantics for each attribute that can be animated.

[tabatkins]

Ah okay, if the text originally existed and the intent is clear, then I'm happy to mark this as Obvious Bugfix and just re-add the text myself.