1289049 - Add animation support for shape-outside

Status: RESOLVED FIXED

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

Description

[Ting-Yu Lin [:TYLin] (UTC-8)]

Bug 1288626 will add the shape-outside support to the style system without considering animation. Let's complete the animation support here.

Comment 1

[Ting-Yu Lin [:TYLin] (UTC-8)]

Per spec shape-outside [1] and clip-path [2] spec, both properties are animatable on <basic-shape> values, and we already support animation for clip-path on Gecko.

To make shape-outisde animatable on Gecko, I think we'll need to make [3] eStyleAnimType_Custom, and refactor functions deal with StyleShapeSource in layout/style/StyleAnimationValue.cpp to support both clip-path and shape-outside.

Boris Chiou (:boris) should know more animation part than I do. 

[1] https://drafts.csswg.org/css-shapes/#propdef-shape-outside
[2] https://drafts.fxtf.org/css-masking-1/#the-clip-path
[3] http://searchfox.org/mozilla-central/rev/3291398f10dcbe192fb52e74974b172616c018aa/layout/style/nsCSSPropList.h#3745

Comment 2

[Ting-Yu Lin [:TYLin] (UTC-8)]

Attachment: Bug 1289049 Part 1 - Use shape source instead of clip path in naming.

This function can be used to implement animation for <basic-shape> for
shape-outside, so I remove the clip path in naming to make it more general.

Review commit: https://reviewboard.mozilla.org/r/181624/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/181624/

Comment 3

[Ting-Yu Lin [:TYLin] (UTC-8)]

Attachment: Bug 1289049 Part 2 - Extract a helper function ExtractComputedValueFromShapeSource().

Review commit: https://reviewboard.mozilla.org/r/181626/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/181626/

Comment 4

[Ting-Yu Lin [:TYLin] (UTC-8)]

Attachment: Bug 1289049 Part 3 - Add CSS_PROPERTY_STORES_CALC flag to "shape-outside" property.

This makes "shape-outside" be able to transition between percent and pixel
shape-coordinates. This patch is similar to what bug 1266570 fixed for
"clip-path".

This will fix failures in layout/style/test/test_transitions_per_property.html
after introducing Part 4.

Review commit: https://reviewboard.mozilla.org/r/181628/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/181628/

Comment 5

[Ting-Yu Lin [:TYLin] (UTC-8)]

Attachment: Bug 1289049 Part 4 - Make <basic-shape> animatable for shape-outside for gecko style system.

Review commit: https://reviewboard.mozilla.org/r/181630/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/181630/

Comment 6

[Ting-Yu Lin [:TYLin] (UTC-8)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=094b73d2dbd6da61c109c08486f6d47cd6b3d5d8

Comment 7

[Boris Chiou [:boris]]

Comment on attachment 8910138 [details]
Bug 1289049 Part 4 - Make <basic-shape> animatable for shape-outside for gecko style system.

https://reviewboard.mozilla.org/r/181630/#review186966

Comment 8

[Boris Chiou [:boris]]

Comment on attachment 8910137 [details]
Bug 1289049 Part 3 - Add CSS_PROPERTY_STORES_CALC flag to "shape-outside" property.

https://reviewboard.mozilla.org/r/181628/#review186968

Comment 9

[Boris Chiou [:boris]]

Comment on attachment 8910135 [details]
Bug 1289049 Part 1 - Use shape source instead of clip path in naming.

https://reviewboard.mozilla.org/r/181624/#review186988

Comment 10

[Boris Chiou [:boris]]

Comment on attachment 8910136 [details]
Bug 1289049 Part 2 - Extract a helper function ExtractComputedValueFromShapeSource().

https://reviewboard.mozilla.org/r/181626/#review186994

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1d5f95ad941e
Part 1 - Use shape source instead of clip path in naming. r=boris
https://hg.mozilla.org/integration/autoland/rev/132a940e3e5f
Part 2 - Extract a helper function ExtractComputedValueFromShapeSource(). r=boris
https://hg.mozilla.org/integration/autoland/rev/92bb93a96a44
Part 3 - Add CSS_PROPERTY_STORES_CALC flag to "shape-outside" property. r=boris
https://hg.mozilla.org/integration/autoland/rev/f599f522b02e
Part 4 - Make <basic-shape> animatable for shape-outside for gecko style system. r=boris

Comment 12

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/1d5f95ad941e
https://hg.mozilla.org/mozilla-central/rev/132a940e3e5f
https://hg.mozilla.org/mozilla-central/rev/92bb93a96a44
https://hg.mozilla.org/mozilla-central/rev/f599f522b02e

Comment 13

[Chris Mills [:cmills]]

I've documented this by adding a note to the shape-outside browser compat table and experimental features page:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside#Browser_compatibility
https://developer.mozilla.org/en-US/Firefox/Experimental_features#CSS

I've not mentioned it yet in the rel notes because it is still preffed off by default.