RESOLVED FIXED Bug 240068
REGRESSION (r285623): pay1040.com IRS payments website renders poorly 
https://bugs.webkit.org/show_bug.cgi?id=240068
Summary REGRESSION (r285623): pay1040.com IRS payments website renders poorly
zalan
Reported 2022-05-04 08:55:00 PDT
load -> https://www.pay1040.com/#/payment/personal -> overlapping content
Attachments
testcase (291 bytes, text/html)
2022-05-10 12:39 PDT, Oriol Brufau 		no flags
Details
Patch (9.64 KB, patch)
2022-05-11 18:32 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (10.36 KB, patch)
2022-05-23 05:17 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (10.40 KB, patch)
2022-05-23 06:15 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (8.85 KB, patch)
2022-05-23 06:30 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Patch (8.85 KB, patch)
2022-05-24 05:07 PDT, Oriol Brufau 		no flags
DetailsFormatted DiffDiff
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.
zalan
Comment 1 2022-05-04 08:55:19 PDT
<rdar://92715090>
Sergio Villar Senin
Comment 2 2022-05-10 03:06:00 PDT
I am not sure I'd have time to take a look at this in the short term.
Oriol Brufau
Comment 3 2022-05-10 12:39:26 PDT
Created attachment 459130 [details] testcase Minimal testcase: <!DOCTYPE html> <div style="display: flex; flex-direction: column; border: solid orange"> <div style="flex: 1 1 0px; display: flex; flex-direction: column; place-content: center; border: solid cyan"> bar <div style="flex: 1 1 100px; border: solid fuchsia">baz</div> </div> </div>
Oriol Brufau
Comment 4 2022-05-10 14:26:29 PDT
The problem seems that the min-height:auto of the cyan element is not resolved correctly. Then the fuchsia element shrinks, and the text ends up overflowing anyways.
Oriol Brufau
Comment 5 2022-05-11 18:32:43 PDT
Created attachment 459199 [details] Patch
EWS Watchlist
Comment 6 2022-05-11 18:33:41 PDT
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Oriol Brufau
Comment 7 2022-05-12 07:23:12 PDT
Comment on attachment 459199 [details] Patch I'm not sure if this is the right approach, but it's a small change, solves the problem, and doesn't seem to fail any test. What do you think, Sergio?
Oriol Brufau
Comment 8 2022-05-12 07:34:18 PDT
Context of the problem. When using something different than justify-content:start, RenderFlexibleBox::initialJustifyContentOffset() uses the availableFreeSpace, which was wrong. The value comes from RenderFlexibleBox::layoutFlexItems(), which uses RenderFlexibleBox::mainAxisContentExtent(), which uses RenderBox::computeLogicalHeight(). Then, by treating height:auto as height:0px when there is flex-basis:0px, the nested flex container stopped being intrinsically sized. RenderBox::computeLogicalHeight() takes min-height into account, but treating min-height:auto as 0. So the idea is changing this.
Oriol Brufau
Comment 9 2022-05-13 11:32:13 PDT
It's broken for box-sizing:border-box, and fieldsets with box-sizing:content-box. I will need to fix bug 240388.
Oriol Brufau
Comment 10 2022-05-23 05:17:06 PDT
Created attachment 459670 [details] Patch
Oriol Brufau
Comment 11 2022-05-23 06:15:11 PDT
Created attachment 459672 [details] Patch
Oriol Brufau
Comment 12 2022-05-23 06:30:25 PDT
Created attachment 459674 [details] Patch
Sergio Villar Senin
Comment 13 2022-05-23 08:32:11 PDT
Comment on attachment 459674 [details] Patch Looks pretty sensible to me. Thanks for taking care!
EWS
Comment 14 2022-05-23 16:30:47 PDT
No reviewer information in commit message, blocking PR #None
Oriol Brufau
Comment 15 2022-05-24 05:07:53 PDT
Created attachment 459714 [details] Patch
EWS
Comment 16 2022-05-24 07:22:28 PDT
Committed r294744 (250912@main): <https://commits.webkit.org/250912@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 459714 [details].
Note You need to log in before you can comment on or make changes to this bug.