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.)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3