1896903 - Setting text-wrap: balance to a parent doesn't affect its children with display inline-block

Status: NEW

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

Description

[Jiří Thiemel]

Steps to reproduce:

If an element with text-wrap: balance contains only children with inline-block (and inline-flex, inline-grid) and there are no whitespaces between the children, the content doesn't get wrapped properly in Firefox.

See the following codesandbox with all the test cases:
https://codesandbox.io/p/devbox/2srxjk?migrateFrom=5vdkd3&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw7vk77h0006356gx6n06hh5%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw7vk77h0002356gif11b0nz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw7vk77h0004356g0liu3t4d%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw7vk77h0005356gea5ueeh0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw7vk77h0002356gif11b0nz%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw7vk77h0001356gn496n7yr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%257D%255D%252C%2522id%2522%253A%2522clw7vk77h0002356gif11b0nz%2522%252C%2522activeTabId%2522%253A%2522clw7vk77h0001356gn496n7yr%2522%257D%252C%2522clw7vk77h0005356gea5ueeh0%2522%253A%257B%2522id%2522%253A%2522clw7vk77h0005356gea5ueeh0%2522%252C%2522activeTabId%2522%253A%2522clw7vkmwi006v356g0sko3260%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522port%2522%253A5000%252C%2522id%2522%253A%2522clw7vkmwi006v356g0sko3260%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clw7vk77h0004356g0liu3t4d%2522%253A%257B%2522id%2522%253A%2522clw7vk77h0004356g0liu3t4d%2522%252C%2522activeTabId%2522%253A%2522clw7vlfha00a9356gt65l9siz%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw7vk77h0003356gazbfutaz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clw7vk9hp000adgf8bu858ye7%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522id%2522%253A%2522clw7vlfha00a9356gt65l9siz%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Actual results:

The content doesn't get wrapped properly.

Expected results:

The content doesn't gets wrapped equally (balanced wrapping).

Comment 1

[BugBot [:suhaib / :marco]]

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

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Thanks for the bug report. Here's a reduced testcase that I think reproduces the issue you're describing.

In Firefox, the top section is unbalanced (4 boxes on the first line). The bottom section is balanced (3 boxes on the first line).

In Chrome, both the top and bottom section are balanced.

Comment 3

[Daniel Holbert [:dholbert]]

jfkthame, do you know why we're disagreeing with Chrome on testcase 1 here?

Comment 4

[Jonathan Kew [:jfkthame]]

(In reply to Daniel Holbert [:dholbert] from comment #3)

jfkthame, do you know why we're disagreeing with Chrome on testcase 1 here?

Offhand, I can't think of a reason this shouldn't work; given that we will happily wrap the top section as 3 + 3 boxes if the available width is reduced a bit, I'd expect balance to be able to do the same thing.

Comment 5

[Christopher Kirk-Nielsen]

Not sure if this is relevant but just to note the same issue happens for inline-flex children. Would love to see this fixed, as I am using this trick as an alternative to the currently non-existing flex-wrap: balance.