1313619 - Cannot do interpolation between two basic shapes with an explicit reference-box and a default one

Status: NEW

(Core :: DOM: Animation, defect, P3)

Description

[Boris Chiou [:boris]]

While doing interpolation between two basic shapes, we have to make sure that both use the same reference box [1], and the default reference box is "margin-box" [2].

There is an example:

@keyframes anim {
  from {clip-path: circle(50%);}
  to   {clip-path: circle(30%);}
}
This animation works perfectly.

However, if we add a reference-box:
@keyframes anim {
  from {clip-path: circle(50%) margin-box;}
  to   {clip-path: circle(30%);}
}
We don't do interpolation now.

I think both keyframes use the same reference-box, because the default reference-box is also margin-box. We could fix this either by adding more conditions at AddShapeFunction [3] or fill the empty reference-box with margin-box, and I prefer the former one because it keeps the original information.

[1] https://drafts.csswg.org/css-shapes/#basic-shape-interpolation
[2] https://drafts.csswg.org/css-shapes/#valdef-shape-outside-basic-shape
[3] http://searchfox.org/mozilla-central/rev/4012e61cc38758ffa1f7ce26039173f67b048853/layout/style/StyleAnimationValue.cpp#2170-2172

Comment 1

[Boris Chiou [:boris]]

(In reply to Boris Chiou [:boris] from comment #0)
> While doing interpolation between two basic shapes, we have to make sure
> that both use the same reference box [1], and the default reference box is
> "margin-box" [2].

Sorry, the default value is dependent on the css property. The default reference box of clip-path is 'border-box' [3], and the default reference box of shape-outside is 'margin-box'.

[3] https://drafts.fxtf.org/css-masking-1/#the-clip-path

Comment 2

[Boris Chiou [:boris]]

(In reply to Boris Chiou [:boris] from comment #1)
> (In reply to Boris Chiou [:boris] from comment #0)
> > While doing interpolation between two basic shapes, we have to make sure
> > that both use the same reference box [1], and the default reference box is
> > "margin-box" [2].
> 
> Sorry, the default value is dependent on the css property. The default
> reference box of clip-path is 'border-box' [3], and the default reference
> box of shape-outside is 'margin-box'.
> 
> [3] https://drafts.fxtf.org/css-masking-1/#the-clip-path

And I prefer to finish this bug after shape-outside is ready.

Comment 3

[Boris Chiou [:boris]]

After obsoleting StyleAnimationValue, I will check this again (and may close this after the verification).

Comment 4

[Boris Chiou [:boris]]

This still happened after using servo interpolation. It seems we derive Animate directly, which doesn't check the default reference-box for interpolation [1]. Maybe need to manually implement this. :(

[1] https://searchfox.org/mozilla-central/rev/4606c7974a68cab416c038acaedcae49eed93822/servo/components/style/values/generics/basic_shape.rs#77,92