Closed Bug 1837305 Opened 6 months ago Closed 6 months ago

[motion-1] Support "<basic-shape> || <coord-box>" for offset-path in the style system


(Core :: CSS Parsing and Computation, enhancement)




116 Branch
Tracking Status
firefox116 --- fixed


(Reporter: boris, Assigned: boris)


(Blocks 2 open bugs)


(Keywords: dev-doc-complete)


(6 files)

I split the patches for style system part from Bug 1598156 to avoid making Bug 1598156 too large.

The definition of <basic-shape> includes other types of basic shapes,
e.g. path(), xywh(), rect(). So we put them together to match the spec.
However, some properties only use the subset of basic shapes, so we use
the bitflags to choose the supported basic shape at the parse time.

Also, remove StyleBasicShapeType because no one uses it.

Only refactoring in this patch.

For outline shapes, fill-rule should be ignored. We add the flag in
the parser of BasicShape, so offset-path can use this flag to ignore

Note: "IgnoreFillRule" means the fill-rule is still in the function
syntax, but we don't use it. Alwasy using the default fill-rule so we don't
serialize it and it doesn't affect the interpolation.

No behavir change in this patch.

The omitted postion has special meaning for offset-path. It defaults to using
offset-position as the circle/ellipse center if the explicit center is
not given. Just like what we do for ray(), here we also use
PositionOrAuto for it.

We omit this component if it is not given when serializing offet-path,
and preserve the value even if it specifies the default value, for the
same reason.

For shape-outside and clip-path, we don't change their behavior for now.
This patch is for offset-path and we will use it in the following patches.

Note: No behavior change on shape-outside and clip-path in this patch.
We may update them per the spec issue:

We rewrite the data structure of OffsetPath to support all basic shapes.
However, We don't build the gfx::Path for basic shapes other than path()
for now because the current caching mechanism (on the main thread) doesn't
work for basic shapes. It's layout dependent.


  1. Update offset-path-interpolation-006.html to make sure the start value
    and the end value have at <position>. offset-path doesn't set center
    as default for at <position>, so if any of the values omits the
    at <position>, we expect they are not interpolated in Gecko.
    This is different from Blink, they still use center as the default value
    for interpolation.
  2. We will add <coord-box> in the next patch.

We are using NonNegative now for offset-path, so just like clip-path, we
have to make sure we don't get the negative radius for circle and ellipse,
and don't get the negative border-radius for inset. Therefore, we have to
convert the computed value into animated value when doing interpolation,
and then clamp the value to make sure it is always >= 0 when converting
it back to computed value.

This patch makes sure the syntax of offset-path is:
offset-path: none | <offset-path> || <coord-box>.

Assignee: nobody → boris.chiou
Attachment #9337975 - Attachment description: Bug 1837305 - Part 2: Add IgnoreFillRule for BasicShape parser. → Bug 1837305 - Part 2: Add ShapeType for BasicShape parser.
Attachment #9337980 - Attachment description: Bug 1837305 - Part 6: Add coord-box to offset-path property. → Bug 1837305 - Part 5: Add coord-box to offset-path property.
Attachment #9337978 - Attachment description: Bug 1837305 - Part 5: Update AnimationValue for offset-path. → Bug 1837305 - Part 6: Update AnimationValue for offset-path.
Blocks: 1838134
Pushed by
Part 1: Rework GenericBasicShape. r=devtools-reviewers,emilio
Part 2: Add ShapeType for BasicShape parser. r=emilio
Part 3: Use PositionOrAuto for "at <position>" in circle and ellipse. r=emilio
Part 4: Update OffsetPath to use BasicShape in style system. r=devtools-reviewers,emilio
Part 5: Add coord-box to offset-path property. r=devtools-reviewers,emilio
Part 6: Update AnimationValue for offset-path. r=emilio
Created web-platform-tests PR for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot
Keywords: dev-doc-needed

MDN doc updates for this feature can be tracked via this issue:
Thank you Boris for the help and reviews!

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