Intent to Ship: CSS <transform-function> and <transform-list> Syntax for registered Custom Properties

125 views
Skip to first unread message

Rune Lillesveen

unread,
Oct 20, 2023, 9:30:49 AM10/20/23
to blink-dev

Contact emails

fut...@chromium.org, and...@chromium.org

Explainer

None

Specification

https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-strings

Summary

Supports using the <transform-function> and <transform-list> syntaxes for custom properties registered with @property or registerProperty(). The syntax can be used to restrict values of the custom property to represent transforms. This also makes it possible to use transitions and animations directly on these registered custom properties.


<transform-list> and <transform-function> can have computed values that contain both pixel and percentage values. They are interpolated as pixels and percentages respectively. However, if transforms cannot be interpolated on a function by function basis because the function types do not match, they need to be interpolated by matrices which cannot represent percentage values. For instance when interpolating between a translate and a rotate with a percentage component in the translate function.

For those cases a mix() function is necessary to represent intermediate values. Chrome does not yet implement a mix() function. Instead we fall back to discrete interpolations to avoid non-representable computed values. This is only a problem for the standard 'transform' property in the typed om interfaces since getComputedStyle() returns the resolved value for the 'transform' property.


Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

None



Gecko: Positive Implementation behind a flag.

WebKit: Shipped/Shipping

Web developers: No signals

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

No additional devtools support necessary compared to existing syntaxes.



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

Yes

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

Yes

https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-list-type-mismatch.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-function.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-list-multiple-values.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-animation-transform-list-single-values.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-transition-transform-function.html https://wpt.fyi/css/css-properties-values-api/animation/custom-property-transition-transform-list.html https://wpt.fyi/css/css-properties-values-api/at-property.html https://wpt.fyi/css/css-properties-values-api/registered-property-computation.html https://wpt.fyi/css/css-properties-values-api/registered-property-initial.html https://wpt.fyi/css/css-properties-values-api/register-property-syntax-parsing.html https://wpt.fyi/css/css-properties-values-api/typedom.html



Flag name on chrome://flags

#enable-experimental-web-platform-features

Finch feature name

CSSVariables2TransformValues

Requires code in //chrome?

False

Tracking bug

https://crbug.com/911156

Estimated milestones

Shipping on desktop120
DevTrial on desktop115
Shipping on Android120
DevTrial on Android115
Shipping on WebView120


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/5184552188510208

This intent message was generated by Chrome Platform Status.


--
Rune Lillesveen

Mike Taylor

unread,
Oct 23, 2023, 7:58:07 PM10/23/23
to Rune Lillesveen, blink-dev

Hey Rune,

These 5 tests have a lot of failures, is that expected?

--
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 on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRL2cdKk0ES9dJS-CrA7oH-NcnUeJhAZ%2BLnWHkt7dq8yA%40mail.gmail.com.

Rune Lillesveen

unread,
Oct 24, 2023, 9:17:19 AM10/24/23
to Mike Taylor, blink-dev
Yes, sorry, interpolation CLs[1][2] are not in yet (but will be before shipping). The remaining failures will be:

1. iterationComposite (we don't ship this for animations in general)
2. Various pre-existing serialization differences for transforms (we serialize translateX(30px) in one test where the test and Safari serializes as translate(30px))
3. I am adding a tentative test where the mix() function, that none of the browsers implement/ship, is needed.



--
Rune Lillesveen

Mike Taylor

unread,
Oct 24, 2023, 11:27:36 AM10/24/23
to Rune Lillesveen, blink-dev

Understood - thanks!

LGTM1

Chris Harrelson

unread,
Oct 24, 2023, 11:28:39 AM10/24/23
to Mike Taylor, Rune Lillesveen, blink-dev
LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6b0c55bb-a691-4dbe-a08e-4d278e779640%40chromium.org.

Philip Jägenstedt

unread,
Oct 26, 2023, 4:19:02 AM10/26/23
to Chris Harrelson, Mike Taylor, Rune Lillesveen, blink-dev
LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9qyG4KtWTQpzecLJd7i%3DSDZ36y%2BDEjh-N031Qw7YByeQ%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages