Intent to Prototype: CSS progress() function

101 views
Skip to first unread message

Sajid Anwar

unread,
Jun 13, 2026, 12:28:51 AM (4 days ago) Jun 13
to dev-pl...@mozilla.org

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.


Reply all
Reply to author
Forward
0 new messages