[css-flexbox] incorrect layout with max-height and flex-direction column and justify-content center by pgorszkowski-igalia · Pull Request #35859 · WebKit/WebKit

pgorszkowski-igalia · 2024-10-29T13:24:34Z

ebca6b1bdd254c8a39d39ad9e651345b623fbc92

[css-flexbox] incorrect layout with max-height and flex-direction column and justify-content center
https://bugs.webkit.org/show_bug.cgi?id=282036

Reviewed by NOBODY (OOPS!).

After calculation of the flex item size and adjusting it to min/max size
of the flex item we should also check how the calculated size
corresponds to specified max size of the whole container. In case the
adjusted flex item size is bigger than the max size of the whole
container we should use the flex item size calculated before adjusting
to flex item min/max size.

There is new layout test which tests the problem.

* LayoutTests/css3/flexbox/nested-flexbox-max-height-expected.txt: Added.
* LayoutTests/css3/flexbox/nested-flexbox-max-height.html: Added.

59a2273

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2024-10-29T13:24:43Z

EWS run on previous version of this PR (hash ebca6b1)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	❌ 🧪 wpe-wk2	❌ 🧪 win-tests
✅ 🧪 webkitperl	❌ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	❌ 🧪 ios-wk2-wpt	❌ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	❌ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	❌ 🧪 mac-AS-debug-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision-sim	❌ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	❌ 🧪 mac-intel-wk2
	✅ 🛠 tv
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2024-10-30T12:58:15Z

EWS run on previous version of this PR (hash a7e7723)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	❌ 🧪 wpe-wk2	✅ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	❌ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	❌ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	❌ 🧪 mac-AS-debug-wk2	❌ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	❌ 🧪 mac-intel-wk2
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2024-11-07T09:10:31Z

EWS run on previous version of this PR (hash c6bea82)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	~~🛠 ios~~	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	~~🛠 ios-sim~~	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests
✅ 🧪 webkitperl	~~🧪 ios-wk2~~	✅ 🧪 api-mac	✅ 🧪 api-wpe
	~~🧪 ios-wk2-wpt~~	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	~~🧪 api-ios~~	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2024-11-07T12:11:48Z

EWS run on previous version of this PR (hash c84db3b)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	⏳ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	❌ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	⏳ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

svillar · 2024-11-07T14:02:27Z

As a general comment would it be possible to have a WPT test instead?

pgorszkowski-igalia · 2024-11-07T14:30:17Z

As a general comment would it be possible to have a WPT test instead?

good point, I will create the test also on WPT

pgorszkowski-igalia · 2024-11-18T09:53:50Z

As a general comment would it be possible to have a WPT test instead?

The PR with test on WPT is under review: web-platform-tests/wpt#49219

…umn and justify-content center https://bugs.webkit.org/show_bug.cgi?id=282036 Reviewed by NOBODY (OOPS!). After calculation of the flex item size and adjusting it to min/max size of the flex item we should also check how the calculated size corresponds to specified max size of the whole container. In case the adjusted flex item size is bigger than the max size of the whole container we should use the flex item size calculated before adjusting to flex item min/max size. * Source/WebCore/rendering/RenderFlexibleBox.cpp: (WebCore::RenderFlexibleBox::resolveFlexibleLengths):

webkit-early-warning-system · 2025-03-17T09:41:39Z

EWS run on current version of this PR (hash 59a2273)

Details

Misc	iOS, visionOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 win
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2	✅ 🧪 win-tests
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🧪 api-wpe
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🛠 wpe-cairo
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🛠 gtk
	✅ 🛠 vision	✅ 🧪 mac-AS-debug-wk2	✅ 🧪 gtk-wk2
	✅ 🛠 vision-sim	✅ 🧪 mac-wk2-stress	✅ 🧪 api-gtk
	✅ 🧪 vision-wk2	✅ 🧪 mac-intel-wk2	✅ 🛠 playstation
	✅ 🛠 tv	✅ 🛠 mac-safer-cpp
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

pgorszkowski-igalia self-assigned this Oct 29, 2024

pgorszkowski-igalia added the Layout and Rendering For bugs with layout and rendering of Web pages. label Oct 29, 2024

pgorszkowski-igalia marked this pull request as draft October 29, 2024 13:25

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 29, 2024

pgorszkowski-igalia force-pushed the eng/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center branch from ebca6b1 to a7e7723 Compare October 30, 2024 12:58

pgorszkowski-igalia mentioned this pull request Nov 2, 2024

[wpe-2.38] Incorrect rendering with flexbox layout WebPlatformForEmbedded/WPEWebKit#1417

Closed

pgorszkowski-igalia force-pushed the eng/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center branch from a7e7723 to c6bea82 Compare November 7, 2024 09:10

pgorszkowski-igalia force-pushed the eng/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center branch from c6bea82 to c84db3b Compare November 7, 2024 12:11

pgorszkowski-igalia marked this pull request as ready for review November 7, 2024 12:12

pgorszkowski-igalia requested review from alanbaradlay, smfr and svillar November 7, 2024 12:12

pgorszkowski-igalia removed the merging-blocked Applied to prevent a change from being merged label Nov 8, 2024

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Nov 8, 2024

pgorszkowski-igalia force-pushed the eng/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center branch from c84db3b to 59a2273 Compare March 17, 2025 09:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-flexbox] incorrect layout with max-height and flex-direction column and justify-content center#35859

[css-flexbox] incorrect layout with max-height and flex-direction column and justify-content center#35859
pgorszkowski-igalia wants to merge 1 commit intoWebKit:mainfrom
pgorszkowski-igalia:eng/css-flexbox-incorrect-layout-with-max-height-and-flex-direction-column-and-justify-content-center

pgorszkowski-igalia commented Oct 29, 2024 •

edited by webkit-early-warning-system

Loading

Uh oh!

webkit-early-warning-system commented Oct 29, 2024 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Oct 30, 2024 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Nov 7, 2024 •

edited

Loading

Uh oh!

webkit-early-warning-system commented Nov 7, 2024 •

edited

Loading

Uh oh!

svillar commented Nov 7, 2024

Uh oh!

pgorszkowski-igalia commented Nov 7, 2024

Uh oh!

pgorszkowski-igalia commented Nov 18, 2024

Uh oh!

webkit-early-warning-system commented Mar 17, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

pgorszkowski-igalia commented Oct 29, 2024 • edited by webkit-early-warning-system Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ebca6b1bdd254c8a39d39ad9e651345b623fbc92

Uh oh!

webkit-early-warning-system commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-early-warning-system commented Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-early-warning-system commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webkit-early-warning-system commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

svillar commented Nov 7, 2024

Uh oh!

pgorszkowski-igalia commented Nov 7, 2024

Uh oh!

pgorszkowski-igalia commented Nov 18, 2024

Uh oh!

webkit-early-warning-system commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pgorszkowski-igalia commented Oct 29, 2024 •

edited by webkit-early-warning-system

Loading

webkit-early-warning-system commented Oct 29, 2024 •

edited

Loading

webkit-early-warning-system commented Oct 30, 2024 •

edited

Loading

webkit-early-warning-system commented Nov 7, 2024 •

edited

Loading

webkit-early-warning-system commented Nov 7, 2024 •

edited

Loading

webkit-early-warning-system commented Mar 17, 2025 •

edited

Loading