Closed Bug 1941797 Opened 25 days ago Closed 24 days ago

::before and ::after pseudo-elements break text-wrap: balance;

Categories

(Core :: Layout, defect)

Firefox 134
defect

Tracking

()

RESOLVED FIXED
136 Branch
Tracking Status
firefox-esr115 --- unaffected
firefox-esr128 --- wontfix
firefox134 --- wontfix
firefox135 --- wontfix
firefox136 --- fixed

People

(Reporter: reino.zuppur, Assigned: jfkthame)

References

(Regression)

Details

(Keywords: nightly-community, regression)

Attachments

(2 files)

Attached image Example

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Steps to reproduce:

Adding ::before or ::after with 'content: ""; display: block;' to 'text-wrap: balance' element breaks the even text wrapping and it falls back to default text wrapping.

Here's a minimal test case: https://jsfiddle.net/zeda39vr/4/

Actual results:

Text is wrapped using the standard layout, can lead to uneven line lengths.

Expected results:

Text should be wrapped in a way that keeps line lengths balanced.

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout
Product: Firefox → Core

Set release status flags based on info from the regressing bug 1858421

:jfkthame, since you are the author of the regressor, bug 1858421, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Flags: needinfo?(jfkthame)

The patch landed in bug 1858421 aimed to avoid exponentially-bad behavior with balance applied to nested blocks by just disabling balancing for any block where the list of lines includes any block lines (as opposed to the typical inline lines we get for actual text content). But if we have :before or :after pseudos with display:block, they'll generate such block lines (even if their content is empty), thereby preventing balance being applied to the block at all.

I think we can do better: rather than completely disabling balance if there's a block line, we can avoid the bad behavior seen in bug 1858421 if we simply avoid descending into block lines during the multiple "trial reflows" that we perform to find the desired balance width. Those blocks will be reflowed in their own right during the first trial reflow, and after that we don't need to reflow them again during subsequent trials as their width is independent of the balancing being done to the inline content of the block.

Flags: needinfo?(jfkthame)
Assignee: nobody → jfkthame
Status: NEW → ASSIGNED
Pushed by jkew@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/45281e42c1b0 before/:after pseudos with display:block should not affect text-wrap balancing of the inline content of a block. r=layout-reviewers,dshin,emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/50121 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 24 days ago
Resolution: --- → FIXED
Target Milestone: --- → 136 Branch
Upstream PR merged by moz-wptsync-bot

The patch landed in nightly and beta is affected.
:jfkthame, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval.
  • If no, please set status-firefox135 to wontfix.

For more information, please visit BugBot documentation.

Flags: needinfo?(jfkthame)
Severity: -- → S3
Flags: needinfo?(jfkthame)
Flags: in-testsuite+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: