1888449 - Text wrapping with text-wrap: balance + float

Status: RESOLVED FIXED

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

Description

[leeroyjenkins176]

Attachment: Screenshot 2024-03-28 at 17-17-52 vYMeBGb.png

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

Steps to reproduce:

<div class="float"></div>
<h1>Lorem, ipsum dolor <span>sit</span> amet consectetur adipisicing elit.</h1>
<style>
.float {
float: left;
width: 200px;
height: 200px;
background: #000;
}
h1 {
text-wrap: balance;
font-size: 16px;
}
</style>

Actual results:

When the container width is slightly less than the width of the .float block plus the text line, everything including the span will be wrapped below the float block.

Expected results:

Text should float around the block as long as there is enough space for it.

Comment 1

[Jonathan Kew [:jfkthame]]

My results don't quite match the screenshot (exact behavior probably depends on the font involved, which affects the text measurement), but with this version I'm seeing the behavior break down once the block becomes narrow enough that the text wraps onto more than 4 lines: https://codepen.io/jfkthame/pen/jORaJrm. So definitely some edge condition isn't being handled well.

Comment 2

[leeroyjenkins176]

I made a video with your example (the width should be larger to reproduce the bug)
https://drive.google.com/file/d/1qdmjpxv0TGfwYVim_N11gTJ0oyAtTlT2/view?usp=drive_link

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1888449 - Ensure that attempting to balance lines doesn't alter the block-size of the result. r=#layout

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1888449 - Add a WPT reftest for a case where text-wrap:balance interacted badly with float. r=#layout

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4fc2448de79b
Ensure that attempting to balance lines doesn't alter the block-size of the result. r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/a5f6bf060190
Add a WPT reftest for a case where text-wrap:balance interacted badly with float. r=layout-reviewers,emilio

Comment 6

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

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

Comment 7

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/4fc2448de79b
https://hg.mozilla.org/mozilla-central/rev/a5f6bf060190

Comment 8

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

Upstream PR merged by moz-wptsync-bot