Bug 274145

Summary: [text-wrap] text-wrap balance with box-decoration-break clone child fails
Product: WebKit Reporter: Johannes Odland <johannes.odland>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, fantasai.bugs, johannes.odland, karlcow, nicole, ntim, rik, simon.fraser, vitor.roriz, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
See Also: https://bugs.webkit.org/show_bug.cgi?id=229078
Attachments:
Description Flags
Screenshot of failing text-wrap: balance
none
Safari/Firefox/Chrome screenshots none

Johannes Odland
Reported 2024-05-14 04:35:02 PDT
`text-wrap: balance` fails when element has children with `-webkit-box-decoration-break: clone`. It works as expected in Firefox and Chrome. Minimal reproduction: https://johannesodland.github.io/browserbugs/2024/safari-text-wrap-balance-issue.html
Attachments
Screenshot of failing text-wrap: balance (39.67 KB, image/png)
2024-05-14 04:35 PDT, Johannes Odland 		no flags
Details
Safari/Firefox/Chrome screenshots (399.66 KB, image/png)
2024-05-14 07:58 PDT, Anthony Ricaud 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Johannes Odland
Comment 1 2024-05-14 04:35:59 PDT
Created attachment 471398 [details] Screenshot of failing text-wrap: balance
Anthony Ricaud
Comment 2 2024-05-14 07:58:27 PDT
Created attachment 471400 [details] Safari/Firefox/Chrome screenshots
Radar WebKit Bug Importer
Comment 3 2024-05-21 04:35:15 PDT
<rdar://problem/128458897>
Johannes Odland
Comment 4 2024-06-25 22:44:37 PDT
Currently there's no way to feature detect full `text-wrap: balance` support. Until now it's been possible to check for support with `CSS.supports('text-wrap', 'balance')` and enable JS-based balancing if it's not supported. Since 17.5 that's not possible any more. The old JS-based balancing will be disabled as the browser claims support for `text-wrap: balance`, but the css balancing fails silently when box-decoration-break is used, leaving texts unbalanced.
Johannes Odland
Comment 5 2024-12-08 22:46:07 PST
There's a PR for a test covering the interaction between `text-wrap: balance` and `box-decoration-break: clone` in the WPT repo here: https://github.com/web-platform-tests/wpt/pull/48445
Johannes Odland
Comment 6 2025-04-12 12:34:31 PDT
It seems like balancing was disabled on purpose in the following issue: https://bugs.webkit.org/show_bug.cgi?id=260351 It is disabled when it encounters an inline item with box-decoration-break: clone. See https://github.com/WebKit/WebKit/blob/bf08d2cd5b190d86987c0f8a802d7ecc8eee5f5a/Source/WebCore/layout/formattingContexts/inline/InlineContentConstrainer.cpp#L146
Note You need to log in before you can comment on or make changes to this bug.