1429299 - Implement offset-distance for motion path

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Boris Chiou [:boris]]

We implement offset-distance [1] in this bug. Bug 1429298 implements offset-path, and we use offset-distance to specify the position of the box as a distance along the offset-path. In this bug, we haven't implemented offset-rotate yet, so we could assume <auto> offset-rotate, which indicates that the object is rotated by the directional tangent vector of offset-path.

offset-distance is an animatable property, but for simplicity, we could make it non-animatable for now.

[1] https://drafts.fxtf.org/motion-1/#offset-distance-property

Comment 1

[Boris Chiou [:boris]]

Still keep this P3 because this is not hard and it's worth to do for the simple useful motion animations on HTML elements.

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1429299 - Part 2: Implement offset-distance.

Define the offset-distance property in style system.

Comment 3

[Boris Chiou [:boris]]

Attachment: Bug 1429299 - Part 3: Layout update for offset-distance.

Just need to take offset-distance into account to get the final matrix.

Comment 4

[Boris Chiou [:boris]]

Attachment: Bug 1429299 - Part 4: Make offset-distance animatable.

Use ComputedValue to animate offset-distance.

Comment 6

[Boris Chiou [:boris]]

Attachment: Bug 1429299 - Part 1: Unpack StyleMotion and use cbindgen for OffsetPath.

Unpack StyleMotion and move its members into nsStyleDisplay.

Comment 7

[Boris Chiou [:boris]]

Based on the pahole results and the upper limit of nsStyleDisplay should be 512 bytes, I will add an extra patch here to make sure we have enough space to use cbindgen for offset-path and add offset-distance.

Comment 8

[Boris Chiou [:boris]]

Attachment: Bug 1429299 - Reorder nsStyleDisplay members to minimize padding.

In order to use cbindgen for offset-path and add offset-distance in the
following patches, we need to repack nsStyleDisplay to make sure
nsStyleDisplay doesn't exceeds 512 bytes. (Actually, we still use 504
bytes after applying the following patch series.)

Note:

1. Use cbindgen for offset-path (i.e. StyleOffsetPath), the size becomes
   16 bytes. (The original size of UniquePtr<...> is 8 bytes.)
2. Add offset-distance, the size of LengthPercentage is 12 byts.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/158156b7af18
Reorder nsStyleDisplay members to minimize padding. r=emilio
https://hg.mozilla.org/integration/autoland/rev/4d20aaa34b10
Part 1: Unpack StyleMotion and use cbindgen for OffsetPath. r=emilio
https://hg.mozilla.org/integration/autoland/rev/9d417fb6fcc2
Part 2: Implement offset-distance. r=emilio
https://hg.mozilla.org/integration/autoland/rev/e6343b742e91
Part 3: Layout update for offset-distance. r=birtles
https://hg.mozilla.org/integration/autoland/rev/6ceb38a81974
Part 4: Make offset-distance animatable. r=hiro

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16927 for changes under testing/web-platform/tests

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 12

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/158156b7af18
https://hg.mozilla.org/mozilla-central/rev/4d20aaa34b10
https://hg.mozilla.org/mozilla-central/rev/9d417fb6fcc2
https://hg.mozilla.org/mozilla-central/rev/e6343b742e91
https://hg.mozilla.org/mozilla-central/rev/6ceb38a81974

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged

Comment 14

[Chris Mills [:cmills]]

Hi Boris!

Can I just check something — you've landed offset-distance and offset-rotate in Firefox 69, but these are only available by default in Nightly, correct? In beta/release, they are still behind the layout.css.motion-path.enabled pref? Well, it definitely seems that offset-path is, which means you can't really do anything with offset-distance/rotate anyway...?

Thanks!

Comment 15

[Boris Chiou [:boris]]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #14)

Hi Boris!

Can I just check something — you've landed offset-distance and offset-rotate in Firefox 69, but these are only available by default in Nightly, correct? In beta/release, they are still behind the layout.css.motion-path.enabled pref? Well, it definitely seems that offset-path is, which means you can't really do anything with offset-distance/rotate anyway...?

Yes. all properties in [motion-1], offset-path, offset-distance, offset-rotate, and offset-anchor (and offset shorthand later), are only enabled in Nightly by the preference. So we cannot do anything related to motion path in beta and release. I am planning to ship them after we fix Bug 1429305 (2019 H2, or maybe 2019 Q4).

Comment 16

[Chris Mills [:cmills]]

Yes. all properties in [motion-1], offset-path, offset-distance, offset-rotate, and offset-anchor (and offset shorthand later), are only enabled in Nightly by the preference.

Just what I needed to know. Thanks a lot Boris!

Comment 17

[Chris Mills [:cmills]]

The docs are finished for Motion Path, for now. See https://github.com/mdn/sprints/issues/1961#issuecomment-526318438 for the specifics of what I've done.

Please can I get a review of this work? Thanks!

Comment 18

[Boris Chiou [:boris]]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #17)

The docs are finished for Motion Path, for now. See https://github.com/mdn/sprints/issues/1961#issuecomment-526318438 for the specifics of what I've done.

Please can I get a review of this work? Thanks!

I will replay all review on the github issue. Thanks for updating them. :)