Closed Bug 1552357 Opened 7 months ago Closed 6 months ago

Incorrect intrinsic size calculation on wrapper for inline-level elements with padding and `box-decoration-break: clone`


(Core :: Layout: Block and Inline, defect, P3)

66 Branch



Tracking Status
firefox69 --- fixed


(Reporter: nicolas, Assigned: mats)


(Blocks 1 open bug)


(Keywords: testcase)


(4 files, 2 obsolete files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

  • I want to present a list using Flexbox.
  • Each item of the list contains links.
  • I want some padding arround (left and right) these links.
  • Because I use box-shadow (and text-shadow) to create beautiful links, I use box-decoration-break: clone.

Actual results:

The lastest link in a list item wraps under the others even if there's still plenty of space available on the right.

Expected results:

All links inside one list item should be on the same line if there's enough space for it.

A reduced test case on CodePen shows how Firefox behaves and that I have to either remove the padding or box-decoration-break to have the links rendered as I assume they should be (like in other browsers):

Attached file reduced testcase 1 (obsolete) —

This seems to be a bug with intrinsic sizing -- it's not flex-specific.

(e.g. I can reproduce it on the original codepen if I adjust the ul rule to have width:max-content instead of display:flex.)

Here's a reduced testcase that just targets this with some unbreakable inline elements and an intrinsically sized container.

Component: Untriaged → Layout
Ever confirmed: true
Product: Firefox → Core
Summary: Rendering issue with Flexbox, padding on item inside flex item, and `box-decoration-break: clone` → Incorrect intrinsic size calculation on wrapper for inline-level elements with padding and `box-decoration-break: clone`

With both attached reduced testcases:

EXPECTED RESULTS: Red border should encompass the yellow children.

ACTUAL RESULTS: Red border doesn't stretch far enough to the right -- it looks like it's only as wide as the first child plus the subsequent children's content-box-width. (It does not account for their padding.)

This is not a recent regression -- here's the regression range:

That includes our changeset that enabled support for box-decoration-break in Nightlies, in bug 1006326. (It landed in Firefox 33 and was uplifted to 32).

ni=mats who worked on that

Component: Layout → Layout: Block and Inline
Flags: needinfo?(mats)

Ah, also worth noting, Chrome needs a webkit prefix in order to undestand these styles -- so it needs -webkit-box-decoration-break: clone (which is not currently present in my reduced testcases)

If I add that style, though, it still doesn't affect Chrome's rendering.

(It looks like the relevant spec text is and I don't immediately see anything there that makes our behavior here make sense.)

I don't know if it is relevant, but I find it strange that the bug is “fixed“ when I open the devtools, as shown here:

That's because opening devtools causes a full re-layout of the page, which probably masks the bug.

Also, to clarify/narrow comment 8: opening devtools only masks the bug in the place where Nicolas initially noticed the bug, which is on per

It doesn't mask the bug in the attached testcases or in comment 0's codepen.

Assignee: nobody → mats
Flags: needinfo?(mats)
Keywords: testcase
OS: Unspecified → All
Priority: -- → P3
Hardware: Unspecified → All

This is primarily to fix sizing of 'box-decoration-break:clone' inlines,
but also some 'slice' edge cases by recognizing more break opportunities,
and to improve sizing when BIDI-continuations are involved.

Blocks: 1556444
Pushed by
Improve intrinsic sizing of inlines.  r=jfkthame
Created web-platform-tests PR for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla69
Upstream PR merged
You need to log in before you can comment on or make changes to this bug.