Skip to content

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

Closed
@tabatkins

Description

@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.)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions