Bug 240068

Summary: REGRESSION (r285623): pay1040.com IRS payments website renders poorly
Product: WebKit Reporter: zalan <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

Description zalan 2022-05-04 08:55:00 PDT 
load -> https://www.pay1040.com/#/payment/personal -> overlapping content
Comment 1 zalan 2022-05-04 08:55:19 PDT 
<rdar://92715090>
Comment 2 Sergio Villar Senin 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.
Comment 3 Oriol Brufau 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>
Comment 4 Oriol Brufau 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.
Comment 5 Oriol Brufau 2022-05-11 18:32:43 PDT 
Created attachment 459199 [details]
Patch
Comment 6 EWS Watchlist 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
Comment 7 Oriol Brufau 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?
Comment 8 Oriol Brufau 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.
Comment 9 Oriol Brufau 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.
Comment 10 Oriol Brufau 2022-05-23 05:17:06 PDT 
Created attachment 459670 [details]
Patch
Comment 11 Oriol Brufau 2022-05-23 06:15:11 PDT 
Created attachment 459672 [details]
Patch
Comment 12 Oriol Brufau 2022-05-23 06:30:25 PDT 
Created attachment 459674 [details]
Patch
Comment 13 Sergio Villar Senin 2022-05-23 08:32:11 PDT 
Comment on attachment 459674 [details]
Patch

Looks pretty sensible to me. Thanks for taking care!
Comment 14 EWS 2022-05-23 16:30:47 PDT 
No reviewer information in commit message, blocking PR #None
Comment 15 Oriol Brufau 2022-05-24 05:07:53 PDT 
Created attachment 459714 [details]
Patch
Comment 16 EWS 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].