Repository navigation
[css-values][css-easing] No definition for values animated past valid range #6097
Description
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.)
Activity
dbaron commentedon Mar 13, 2021
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?):
dbaron commentedon Mar 13, 2021
(That text was originally added in e58ba4a.)
dbaron commentedon Mar 13, 2021
... and removed in 7b816b2.
birtles commentedon Mar 13, 2021
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:
tabatkins commentedon Mar 15, 2021
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.