Intent to Ship: Interpolation progress functional notations: CSS *progress() functions

[Chromestatus]

Contact emails

sakh...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-values-5/#progress

Summary

The progress(), media-progress(), and container-progress() functional notations represent the proportional distance of a given value (the progress value) from one value (the progress start value) to another value (the progress end value). They allow drawing a progress ratio from math functions, media features, and container features, respectively.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: Shipped/Shipping

Web developers: Strongly positive Mostly for calc() hacks like getting rid of units

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/css/css-values/progress-computed.tentative.html https://wpt.fyi/css/css-values/media-progress-computed.tentative.html https://wpt.fyi/css/css-values/container-progress-computed.tentative.html

Flag name on about://flags

CSSProgressNotation

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40944203

Estimated milestones

Shipping on desktop	135
Shipping on Android	135
Shipping on WebView	135

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5112558941634560?gate=5096732792455168

This intent message was generated by Chrome Platform Status.

[Mike Taylor]

On 2/18/25 12:15 PM, Chromestatus wrote:

Contact emails

sakh...@chromium.org

Explainer

None

Could you describe what these features allow for (beyond what you have in the summary), maybe with some example code? It's not obvious to me what it means practically to represent proportional distance of a container feature, for example.

Specification

https://drafts.csswg.org/css-values-5/#progress

Summary

The progress(), media-progress(), and container-progress() functional notations represent the proportional distance of a given value (the progress value) from one value (the progress start value) to another value (the progress end value). They allow drawing a progress ratio from math functions, media features, and container features, respectively.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal

Can we request one please?

WebKit: Shipped/Shipping

Web developers: Strongly positive Mostly for calc() hacks like getting rid of units

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/css/css-values/progress-computed.tentative.html https://wpt.fyi/css/css-values/media-progress-computed.tentative.html https://wpt.fyi/css/css-values/container-progress-computed.tentative.html

These tests are all failing in Chromium. Any reason why? Also, they shouldn't be considered tentative tests now, correct?

Flag name on about://flags

CSSProgressNotation

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40944203

Estimated milestones

Shipping on desktop	135
Shipping on Android	135
Shipping on WebView	135

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5112558941634560?gate=5096732792455168

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com.

[Daniil Sakhapov]

I imagine the use case example would be using e.g. container-progress inside color(), so that you can change the color, based on some ancestor parent's size - 'color: rgb(container-progress(width of my-container, var(--container-min-size), var(--container-max-size)), ..., ...);'

Ah, for some reason we don't have 'In Progress' option for Gecko, only for Webkit, and the tool didn't copy my comment on that here, but they are working on it.

The test is failing as there has been minor synax change and it's been addressed on Monday, WPT hasn't been updated yet.

вторник, 18 февраля 2025 г. в 20:24:40 UTC+1, Mike Taylor:

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Daniel Bratell]

I also find it a bit hard to understand what it is meant to accomplish and how it does so. I might be missing some basic knowledge block here, but ... why?

Maybe when the tests are updated I can look at those, but if you were to explain this to someone like ... I don't know, a manager, how would you explain what it does?

/Daniel

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org.

[Penelope McLachlan]

Some other example use cases:

- Trigger layout changes as the user scrolls for storytelling or creative direction e.g. Create gradients that smoothly shift colors or positions based on scroll progress or container size, or apply filter effects like blur or saturation based on scroll position or container dimensions, creating dynamic visual effects.

- Progress bars based on scroll position or container layout 

- Adjust font sizes based on the viewport width or container size, for example to improve readability across different screen sizes.  

e.g. h1 { font-size: calc(1rem + 2rem * media-progress(width, 320px, 1200px)); }

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4702f132-3736-4b4d-bb41-5d52d7f33e5d%40gmail.com.

--

Penny McLachlan (she/her) Senior Product Manager pjmcl...@google.com Google Chrome

[Daniel Clark]

The spec section https://drafts.csswg.org/css-values-5/#progress still has this warning at the top: “This section is an exploratory draft, and not yet approved by the CSSWG [Issue #6245]”.

 

Scanning through the linked issue I’m unclear on whether that warning still applies or whether the CSSWG resolved at some point on the subset of behavior that’s proposed to ship here. Can you help me understand the degree to which the discussion around these has reached a conclusion? I see that there are still new posts happening in that issue in the past week.

 

Thanks,

Dan

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFuQ4YtoM_-2eu8n%3DTNZJvVKTMRTVTn4iDffHHAfVsbq1MTN7g%40mail.gmail.com.

[Daniil Sakhapov]

The discussion for *progress() functions is finished, with WebKit already supporting it and Gecko implementing.

The warning is about *mix() functions and the discussion in the issue is about only them as well.

среда, 19 февраля 2025 г. в 20:43:15 UTC+1, dan...@microsoft.com:

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4702f132-3736-4b4d-bb41-5d52d7f33e5d%40gmail.com.

 

--

Penny McLachlan (she/her) Senior Product Manager pjmcl...@google.com Google Chrome

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Daniel Bratell]

LGTM1

/Daniel

[Mike Taylor]

LGTM2, but can you remove inline issue 3 from the spec if it's no longer relevant? It's confusing otherwise.

[Dan Clark]

LGTM3, seconding the request to remove Issue 3 or move/update it so it's clear which parts it still covers.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4702f132-3736-4b4d-bb41-5d52d7f33e5d%40gmail.com.

 

--

Penny McLachlan (she/her) Senior Product Manager pjmcl...@google.com Google Chrome

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Daniil Sakhapov]

Created PR to move issue warning https://github.com/w3c/csswg-drafts/pull/11794

[Anders Hartvoll Ruud]

Note that we are discussing dropping media-progress() and container-progress() from the spec. https://github.com/w3c/csswg-drafts/issues/11826

We should probably keep those variants behind a flag until the issue is resolved.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/50a2aa0c-e1d6-4df6-8cc3-5ca716a5f469n%40chromium.org.

[Daniel Clark]

Thanks for flagging that.

 

I was surprised to see this since WebKit was listed in this Intent as having already shipped, but looking again at the WPTs it seems they have not yet shipped in Safari Stable, only in Experimental.

https://wpt.fyi/results/css/css-values/progress-computed.tentative.html?label=master&product=chrome%5Bexperimental%5D&product=edge%5Bexperimental%5D&product=firefox%5Bexperimental%5D&product=safari%5Bstable%5D&aligned

https://wpt.fyi/results/css/css-values/media-progress-computed.tentative.html?label=master&product=chrome%5Bexperimental%5D&product=edge%5Bexperimental%5D&product=firefox%5Bexperimental%5D&product=safari%5Bstable%5D&aligned

https://wpt.fyi/results/css/css-values/container-progress-computed.tentative.html?label=master&product=chrome%5Bexperimental%5D&product=edge%5Bexperimental%5D&product=firefox%5Bexperimental%5D&product=safari%5Bstable%5D&aligned

 

Is there any other info that shows WebKit is definitely shipping the three variants?

If Blink was to go ahead and ship all three, would the other engines be likely to follow?

 

If the answer to both of those isn’t a “yes” then I would consider delaying these to 136 to leave time for the conversation in the CSSWG to play out.

 

-- Dan

[Daniil Sakhapov]

Please note, that I had to cancel shipping it in the original milestone, as it produced a number of crashes. Now they are all fixed and it will be reshipped in M138.