1881855 - text-wrap: balance inconsistent with child elements

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[corey]

Attachment: Screenshot from 2024-02-23 15-37-06.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

Used text-wrap: balance on a block element that contained a child inline element.

https://codepen.io/coreyworrell/pen/bGZPYjR

Actual results:

Text wrapped at an incorrect location.

Expected results:

Text wrap would behave the same with or without the inline element.

Comment 1

[Jonathan Kew [:jfkthame]]

Huh, that's odd. The effect seems to be inconsistent; if I reduce the max-width in your example such that the text wraps onto three lines (e.g. 320px for me, YMMV depending on fonts), both blocks wrap the same. But with two lines, there's an unexpected discrepancy. Thanks for reporting this!

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1881855 - The 'inset' used during text-wrap:balance reflows should only be applied to the root span of each line. r=#layout-reviewers

This was just a silly trivial error in the original implementation. We shouldn't apply
the inset value to nested spans within the line, only to the root span.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0a0ef18169dc
The 'inset' used during text-wrap:balance reflows should only be applied to the root span of each line. r=layout-reviewers,emilio

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/44957 for changes under testing/web-platform/tests

Comment 5

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/0a0ef18169dc

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot