Summary:
The progress() CSS function computes the position of a value relative to a start and an end. For values that are between the start and end, progress() returns a number between 0 and 1. For values outside of the range, progress() will default to clamping the returned value to between 0 and 1. The no-clamp keyword can be used to disable clamping if desired.
We intend to enable this by default in Firefox Nightly builds behind the layout.css.progress-function.enabled pref.
Bug:
Bug 1975530 - [css-values-5] Implement "progress()" function syntax
Specification:
https://drafts.csswg.org/css-values-5/#progress
Standards Body:
CSSWG / W3C
Platform Coverage:
All
Preference:
layout.css.progress-function.enabled — Bug 2047015 to enable by default in Nightly
DevTools Bug:
N/A
Extensions Bug:
N/A
Use Counter:
N/A
Standards-Positions Discussion:
N/A
Other Browsers:
- Blink: Shipped since Chrome 138
- WebKit: Shipped since Safari 26
Note: The specification was recently updated (#11825) to introduce the no-clamp keyword and to clarify rules around handling cases where start and end are the same. These changes are not yet present in Blink or WebKit, but are being shipped in Gecko as part of this Intent to Prototype.
web-platform-tests:
Three progress()-specific test suites already existed (https://wpt.fyi/results/css/css-values?q=progress). As part of this work, additional tests were added for the new no-clamp keyword and for the new edge case behaviors.