Closed Bug 1429299 Opened 2 years ago Closed 7 months ago

Implement offset-distance for motion path

Categories

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

enhancement

Tracking

()

RESOLVED FIXED
mozilla69
Tracking Status
firefox69 --- fixed

People

(Reporter: boris, Assigned: boris)

References

(Blocks 1 open bug, )

Details

(Keywords: dev-doc-complete)

Attachments

(6 files)

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
Blocks: 1429301
Blocks: 1429303
Assignee: boris.chiou → nobody
Status: ASSIGNED → NEW
Priority: -- → P3
Still keep this P3 because this is not hard and it's worth to do for the simple useful motion animations on HTML elements.

Define the offset-distance property in style system.

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

Use ComputedValue to animate offset-distance.

Attachment #9063940 - Attachment description: Example → https://jsfiddle.net/borischiou/8nxfz76v/
Assignee: nobody → boris.chiou

Unpack StyleMotion and move its members into nsStyleDisplay.

Attachment #9063930 - Attachment description: Bug 1429299 - Part 1: Implement offset-distance. → Bug 1429299 - Part 2: Implement offset-distance.
Attachment #9063931 - Attachment description: Bug 1429299 - Part 2: Layout update for offset-distance. → Bug 1429299 - Part 3: Layout update for offset-distance.
Attachment #9063932 - Attachment description: Bug 1429299 - Part 3: Make offset-distance animatable. → Bug 1429299 - Part 4: Make offset-distance animatable.
Attachment #9064924 - Attachment description: Bug 1429299 - Part 1: Unpack StyleMotion. → Bug 1429299 - Part 1: Unpack StyleMotion and use cbindgen for OffsetPath.
Depends on: 1552587

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.

No longer depends on: 1552587

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.
Attachment #9066186 - Attachment description: Bug 1429299 - Repack nsStyleDisplay. → Bug 1429299 - Reorder nsStyleDisplay members to minimize padding.
Pushed by bchiou@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16927 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Upstream PR merged

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!

Flags: needinfo?(boris.chiou)

(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).

Flags: needinfo?(boris.chiou)

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!

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!

(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. :)

Blocks: 1582554
You need to log in before you can comment on or make changes to this bug.