Intent to ship: offset-position property and all values of offset-path

[Boris Chiou]

As of fx122 I intend to turn all the preferences of motion-path on by default on all channels. It has been developed behind the following preferences:

1. offset-position property: layout.css.motion-path-offset-position.enabled
2. offset-path: layout.css.motion-path-ray.enabled, layout.css.motion-path-basic-shapes.enabled, layout.css.motion-path-coord-box.enabled, layout.css.motion-path-url.enabled

Status in other browsers is

1. Blink: per wpt.fyi, Blink supports all features on the stable channel.
2. WebKit: also, per the wpt.fyi link above, Webkit supports all features except for basic-shape and coord-box on the stable channel.
   

Bug to turn on by default:

1. offset-position: https://bugzilla.mozilla.org/show_bug.cgi?id=1598152
2. offset-path: https://bugzilla.mozilla.org/show_bug.cgi?id=1598151 and https://bugzilla.mozilla.org/show_bug.cgi?id=1598159

Standard: https://www.w3.org/TR/motion-1/

It seems I cannot find the original intent-to-prototype thread in the dev-platform google groups (note: it was sent in 2018), so I paste the orignal mail content here:

Summary:

Motion paths allow authors to animate elements along an author-specified path. When the <offset-distance> property is animated, for example using Web Animations, the element moves along the path.

Motion path animation provides an easy way for authors to declaratively specify animation of an element along a sequence of lines, arcs or splines (e.g. could be a SVG Path or a basic shape). This is equivalent to SVG's animateMotion tag, but for all HTML and SVG elements (SMIL's animateMotion only works with SVG elements).

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1186329

Link to standard: https://www.w3.org/TR/motion-1/

Platform coverage: All platforms.

Estimated or target release: Not yet determined.

Preference behind which this will be implemented: "layout.css.motion-path.enabled"

Is this feature enabled by default in sandboxed iframes? Yes.

DevTools bug: DevTools should support this, so we will file a bug for this.

Do other browser engines implement this? Yes, but now only Google chrome supports Motion Path.

Tests - web-platform/tests/css/motion/

Regards,

Boris

[Nicolas Chevobbe]

For DevTools, we already support editing the offset-path visually on the page, using the shape editor (see https://bugzilla.mozilla.org/show_bug.cgi?id=1838226)

At the moment, it does not support xywh() (https://bugzilla.mozilla.org/show_bug.cgi?id=1841235), nor ray() (https://bugzilla.mozilla.org/show_bug.cgi?id=1841240)

offset-position can be modified in the inspector like any other properties.

Is there anything else we should support ?

[Boris Chiou]

There is also a DevTools bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1841237) for rect(), which is also needed by offset-path as well.

I think these are all things we'd like to support for DevTools. :)