Closed Bug 1819464 Opened 1 year ago Closed 7 months ago

Add support for the CSS "transform-box" values "content-box" and "stroke-box"


(Core :: CSS Parsing and Computation, defect)




118 Branch
Tracking Status
firefox118 --- fixed


(Reporter: dholbert, Assigned: boris)


(Blocks 3 open bugs, Regressed 1 open bug)


(Keywords: dev-doc-complete)


(5 files)

It looks like we have several WPT tests failing due to lack of support for
transform-box: content-box
transform-box: stroke-box


(Safari/WebKit seems to support them. Chrome/Blink does not yet; that's tracked in )

spec link:

It looks like these keywords were added in response to
(csswg resolution in )

Depends on: 923193
Assignee: nobody → boris.chiou

Per spec, the initial value of transform-box should be view-box.

This doesn't have impact on the mapping of transform-box for SVG and CSS
layout. Just make sure the initial value is correct.

Also, add a prefernce for content-box and stroke-box. So we have to
define a new type, TransformBox, and let content-box and stroke-box
behind the preference.

Refactor this structure to match spec and make us easier to support
content-box and stroke-box.

Basically, the transform-box mapping is:

  1. For SVG elements without associated CSS layout box, the used value for
    content-box is fill-box and for border-box is stroke-box.
  2. For elements with associated CSS layout box, the used value for fill-box
    is content-box and for stroke-box and view-box is border-box.

So we use the switch-case for each layout, to map the box correctly.

Use a valid content-box for CSS layout. For SVG layout, just map it to

In order to pass the wpt, we have to use Moz2D to get the stroke
bounding box for stroke-box, because we cannot get the simple bounds for
irregular shape elements, e.g. path elements.

It's necessary to use a tigher stroke bounding box to get the proper
coordinate of the transform origin. However, GetStrokedBounds() might not
tight enough for some irregular shapes. In any case, it is still better
than using PathExtentsToMaxStrokeExtents(), which is the worst case
because it uses the maximum possible stroke extents (and this is how we
calculate the svg frame rect for invaliation). Obviously it's not suitable
for computing the proper transform-box, so we add an extra flag to enable
the way to get stroke bounds with Moz2D APIs, and this is called only
for transform-box now.

Attachment #9347281 - Attachment description: Bug 1819464 - Support stroke-box (for SVG layout). → Bug 1819464 - Part 5: Support stroke-box (for SVG layout).
Blocks: 1849054
Pushed by
Part 1: Use view-box as the initial value for transform-box. r=emilio
Part 2: Add content-box and stroke-box into transform-box in style. r=emilio
Part 3: Refactor TransformReferenceBox. r=emilio
Part 4: Support content-box (for CSS layout). r=emilio
Part 5: Support stroke-box (for SVG layout). r=emilio
Created web-platform-tests PR for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot
Duplicate of this bug: 1693820

No changes needed for the content or BCD. Just added the FF118 Release note

Regressions: 1864396
Duplicate of this bug: 1371943
Blocks: 1868374
Regressions: 1870200
You need to log in before you can comment on or make changes to this bug.