[css-shapes-1] basic-shape interpolation not interoperable with omitted positions.

[emilio]

TLDR:

• In Gecko and WebKit, clip-path: circle(0%) and circle(0% at center) is not interpolable, but it is in Chrome.
• This is because, for offset-path, an omitted <position> value is different from a non-omitted one, see this, which is for ray() but also applies to circle() and ellipse(), afaict. On clip-path, an omitted position will always be resolved to center, but at used value time.

In Blink, it seems they allow interpolating this for clip-path (haven't checked if they deal with offset-path correctly yet).

To me, it feels weird that <basic-shape>s would interpolate differently in offset-path and clip-path, specially if they don't e.g. serialize differently (you could argue that clip-path: circle(0% at center) should serialize to clip-path: circle(0%) otherwise).

So I think the WebKit and Firefox behavior is the most reasonable one, but since this is not tested and not super well specified, I think I'd bring it to the group...

cc @BorisChiou @smfr.

[smfr]

See also #12381

[noamr]

As a web-developer I'd expect circles to always interpolate, interpolating both the computed center and the radius. Is there a reason not to do that?

[css-meeting-bot]

The CSS Working Group just discussed [css-shapes-1] basic-shape interpolation not interoperable with omitted positions..

The full IRC log of that discussion

<kbabbitt> emilio: main issue here is that we found an issue where depending on whether you omit position in circle or some other shapes
<kbabbitt> ... Blink does allow interpolating but Gecko and Webkit don't
<kbabbitt> ... trick here is that omitted position is special, different value at least for offset-path
<kbabbitt> ... in clip-path, omitted at center behaves the same
<kbabbitt> ... in clip-path if you omit position, it behaves same as at center
<kbabbitt> ... but in offset-path it doesn't
<kbabbitt> ... seems clear to me we shouldn't allow interpolating it in offset-path, doesn't make sense
<noamr> q+
<kbabbitt> ... for clip-path I could see an argument for allowing interpolation, but doesn't make sense to do different in different properties
<kbabbitt> ... woudl rather take webkit/firefox behavior
<kbabbitt> ... noamr mentioned expected to interpolate but no way to express mix
<kbabbitt> ... initial value of offset-path is computed at layout
<kbabbitt> astearns: sounds like a mistake
<kbabbitt> ... that offset-path is not expressible
<kbabbitt> emilio: probably
<kbabbitt> astearns: even if we do express it, it may not be interpolable
<astearns> ack noamr
<kbabbitt> noamr: from web dev perspective, I would rather have them interpolate than ? if we could
<kbabbitt> ... don't think difference between clip-path and offset-path is relevant
<kbabbitt> ... many people don't use offset-path, expect no position to behave as `at center`
<flackr> q+
<kbabbitt> ... can separately think about offset-path default position
<kbabbitt> ... start of path, how to represent that in layout terms and interpolate that
<kbabbitt> ... suggest that's separate, think about web devs first, say clip-path interpolates with center omitted
<ydaniv> +1 to noamr
<emilio> q+
<astearns> ack flackr
<kbabbitt> flackr: for interpolating other properties like transform
<kbabbitt> .. we try to coerce value at a given keyframe to be interpolable to neighboring keyframes
<kbabbitt> ... sometimes even turn into different format
<kbabbitt> ... intermediate can take on different shape just to be interpolable
<astearns> ack emilio
<kbabbitt> ... I think that's a good argument for trying to be interpolable here like noamr is asking for
<kbabbitt> emilio: main difference here is that interpolation of two transform lists is not property dependent
<kbabbitt> ... doesn't matter whether it's in a custom prop or what, they interpolate the same
<kbabbitt> ... this would add property dependency to interpolation which sounds a bit sketchy to me
<kbabbitt> ... don't think there's a precedent for that
<kbabbitt> ... I know we interpolate some values in contexts where we may not know which prop it applies to
<kbabbitt> ... agree in principle but would be good for someone in Blink to double check what is happening
<kbabbitt> ... feels weird to have property dependency without being explicit
<dbaron> I'm trying to look at the blink code now -- I don't see any explicit property dependency in what I think is the relevant code, but I do see code that passes around "HasExplicitCenter" values.
<kbabbitt> ... would be good to check what Blink is doing, is it what's being proposed here or do we need more tests for this
<dbaron> https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/animation/basic_shape_interpolation_functions.cc
<dbaron> https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/animation/css_basic_shape_interpolation_type.cc
<kbabbitt> ... other thing is, maybe we should make offset path default position at least representable
<kbabbitt> ... with auto or whatever
<kbabbitt> astearns: simon linked to another issue about unifying some grammars but it doesn't mention offset-path
<kbabbitt> ... likely need another issue about how to express default value for offset-path
<kbabbitt> ... omitted value
<kbabbitt> ... dbaron you are looking at code, do you have a conclusion?
<kbabbitt> dbaron: don't know the code well enough to come to a conclusion yet
<kbabbitt> noamr: seems like it animates to a discrete center
<kbabbitt> emilio: to be clear this is some of the view transitions demos that chrome devrel wrote depend on this behavior, that's how I found out about this
<kbabbitt> ... I can come back with test cases
<kbabbitt> astearns: we'll go back to the issue then, get some test cases for what interpolation of clip-path in Chrome is actually doing
<kbabbitt> ... need a separate issue on being able to express omitted value in offset-path
<kbabbitt> ... I'd like it if we could interpolate both cases but who knows if that's even possible
<kbabbitt> ... anything more for this issue?
<noamr> emilio, feel free to ping me about this outside of github