Bug 272534 – Break-word with a float can discard text

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Caleb Hearon]

I found a case where Safari doesn't render text after a float when the float is inside a word that splits across multiple lines with word-break: break-word.

Quick link: https://jsfiddle.net/317e6a9f/

With the following HTML and CSS:

<div style="word-break: break-word; width: 20px;">
  abcd<div style="float: left; width: 5px; height: 5px; background-color: red;"></div>efghijk
</div>


The letters "ef" get placed after the float successfully, but the letters "ghijk" don't show up at all, and no line boxes are allocated for them. Tested in Safari TP and Safari 17.

Chrome does this correctly. Firefox puts the float on its own line, which doesn't seem right since letters would fit after. But I don't think the specs say much specifically about when floats can be placed.

[Karl Dubost]

Created attachment 470874 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  192           19619.1.8.1
Firefox Nightly            126.0a1       12624.4.11
Google Chrome Canary       125.0.6413.0  6413.0

[Radar WebKit Bug Importer]

<rdar://problem/126309547>

[Karl Dubost]

Created attachment 470875 [details]
screen recording of the layout with/without break-word in STP 192

Flipping on/off the word-break: break-word shows what is happening.

[alan]

Created attachment 470912 [details]
[fast-cq]Patch

[EWS]

Committed 277461@main (30130d3b5da2): <https://commits.webkit.org/277461@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 470912 [details].