Bug 240068 - REGRESSION (r285623): pay1040.com IRS payments website renders poorly
Summary: REGRESSION (r285623): pay1040.com IRS payments website renders poorly
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Oriol Brufau
URL:
Keywords: InRadar
Depends on: 240388
Blocks:
  Show dependency treegraph
 
Reported: 2022-05-04 08:55 PDT by zalan
Modified: 2022-05-24 07:22 PDT (History)
13 users (show)

See Also:


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 Details | Formatted Diff | Diff
Patch (10.36 KB, patch)
2022-05-23 05:17 PDT, Oriol Brufau
no flags Details | Formatted Diff | Diff
Patch (10.40 KB, patch)
2022-05-23 06:15 PDT, Oriol Brufau
no flags Details | Formatted Diff | Diff
Patch (8.85 KB, patch)
2022-05-23 06:30 PDT, Oriol Brufau
no flags Details | Formatted Diff | Diff
Patch (8.85 KB, patch)
2022-05-24 05:07 PDT, Oriol Brufau
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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].