search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.51k stars 669 forks source link

[css-properties-values-api] Interpolations for registered properties <transform-list>/<transform-function>/none #9522

Open lilles opened 1 year ago

lilles commented 1 year ago

During code reviews for implementing interpolation of <transform-function> and <transform-list>, a question came up about none and also the compatibility of <transform-function> and <transform-list>.

My conclusion, which is matching Safari's implementation is that none is not magical, so that for a syntax none|<transform-list> or none|<transform-function>, none is not a transform value that can be interpolated to or from if the other end point is a <transform-list> (or function).

The other part is if you have a syntax <transform-function>|<transform-list>, you cannot interpolate between a single function and a list of functions. However, if you flip the syntax to <transform-list>|<transform-function>, the values will always match the first part, and they will interpolate. This matches the implementation in Safari and the in-progress implementation in Chrome.

This issue is to confirm my interpretation is correct. What can be confusing is that the spec says <transform-function> and <transform-list> should interpolate as the standard transform property.

@tabatkins @andruud @kevers-google

zrhoffman commented 8 months ago

Agreed that value none should be animated discretely for syntaxes none|<transform-list> or none|<transform-function>, but I think none should be interpolated for syntaxes <transform-list>|none or <transform-function>|none.

From css-properties-values-api <https://github.com/w3c/css-houdini-drafts/blob/808c87a30bea/css-properties-values-api/Overview.bs#L306-L308>:

For syntaxes specified with the | combinator, the computed value is given by applying the computed-value rules for the first clause that matches the value.

If so, the expectations for WPT <https://github.com/web-platform-tests/wpt/blob/1a18de6ee35d/css/css-properties-values-api/animation/custom-property-animation-transform-none.tentative.html> should be updated, and testcases added for syntaxes none|<transform-list> and none|<transform-function>.

tabatkins commented 8 months ago

Ooh, I'd forgotten there was an order dependency there. Yes, I agree this is the specified behavior.

Weird that transform-function and transform-list can't interpolate. We should probably special-case that.

but I think none should be interpolated for syntaxes |none or |none.

none isn't a transform function at all, so it shouldn't work either way, as currently written.

zrhoffman commented 8 months ago

but I think none should be interpolated for syntaxes |none or |none.

none isn't a transform function at all, so it shouldn't work either way, as currently written.

Ah okay. I misunderstood this part <https://github.com/w3c/csswg-drafts/blob/d661b595fde4/css-transforms-2/Overview.bs#L726-L728>:

When translate, rotate or scale are animating or transitioning, and the from value or to value (but not both) is none, the value none is replaced by the equivalent identity value (0px for translate, 0deg for rotate, 1 for scale).

But yeah, it should still only animate discretely.