Bug 240068

Summary: REGRESSION (r285623): pay1040.com IRS payments website renders poorly
Product: WebKit Reporter: alan <zalan>
Component: Layout and RenderingAssignee: Oriol Brufau <obrufau>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, clopez, esprehn+autocc, ews-watchlist, glenn, kondapallykalyan, obrufau, pdr, simon.fraser, svillar, youennf, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=230755
https://github.com/web-platform-tests/wpt/pull/34044
Bug Depends on: 240388    
Bug Blocks:    
Attachments:
Description Flags
testcase
none
Patch
none
Patch
none
Patch
none
Patch
none
Patch none

alan
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
Patch (9.64 KB, patch)
2022-05-11 18:32 PDT, Oriol Brufau
no flags
Patch (10.36 KB, patch)
2022-05-23 05:17 PDT, Oriol Brufau
no flags
Patch (10.40 KB, patch)
2022-05-23 06:15 PDT, Oriol Brufau
no flags
Patch (8.85 KB, patch)
2022-05-23 06:30 PDT, Oriol Brufau
no flags
Patch (8.85 KB, patch)
2022-05-24 05:07 PDT, Oriol Brufau
no flags
alan
Comment 1 2022-05-04 08:55:19 PDT
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
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
Oriol Brufau
Comment 11 2022-05-23 06:15:11 PDT
Oriol Brufau
Comment 12 2022-05-23 06:30:25 PDT
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
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.