Bug 241459

Summary: [shrink-to-fit] Incorrect sizing of elements with visually hidden text inside
Product: WebKit Reporter: Wojciech Maj <kontakt>
Component: Layout and RenderingAssignee: zalan <zalan>
Status: RESOLVED FIXED    
Severity: Minor CC: bfulgham, changseok, esprehn+autocc, ews-watchlist, glenn, koivisto, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, webkit-layout-noreply, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   
Attachments:
Description Flags
Offline repro
none
Test reduction
none
Patch
none
Patch none

Description Wojciech Maj 2022-06-09 04:50:51 PDT 
Created attachment 460128 [details]
Offline repro

If we have:
1. div with display: inline-block, or
2. div in flexbox container
that has a text with visually hidden element inside, this div's auto width is incorrect (unnecessarily small), causing the text to wrap with no reason.

Repro:
https://4kpsi4.csb.app/

Interactive repro:
https://codesandbox.io/s/webkit-element-sizing-bug-4kpsi4

This can be reproduced both on macOS Monterey and iOS 15.
Comment 1 zalan 2022-06-09 06:17:28 PDT 
Created attachment 460130 [details]
Test reduction

Apparently the combination of out-of-flow block box + margin offset confuses the preferred with computation for shrink-to-fit content.
Comment 2 zalan 2022-06-11 08:28:57 PDT 
The margin is mistakenly included twice during line layout, first when the out-of-flow box is placed (static position) and later when the adjacent text content is taken care of.
Comment 3 zalan 2022-06-11 15:05:02 PDT 
Created attachment 460183 [details]
Patch
Comment 4 zalan 2022-06-11 19:13:41 PDT 
Created attachment 460184 [details]
Patch
Comment 5 EWS 2022-06-12 07:45:30 PDT 
Committed r295478 (251483@main): <https://commits.webkit.org/251483@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 460184 [details].
Comment 6 Radar WebKit Bug Importer 2022-06-12 07:46:15 PDT 
<rdar://problem/94935961>