Bug 260461 – Out of flow element with `display: grid` and `height: fit-content` takes up whole viewport when a child is present

• Status: NEW
• Component: Layout and Rendering

[Karl Dubost]

Created attachment 467359 [details]
testcase

Steps to reproduce:

1. Open the testcase in Safari, Firefox and Chrome

Expected:
A dialog with a button having a reasonable size.

Actual:
On safari, the button is taking the full height of the viewport.

[Radar WebKit Bug Importer]

<rdar://problem/114177004>

[Karl Dubost]

Created attachment 467360 [details]
rendering in Safari, firefox, chrome

This was initially reported on https://github.com/webcompat/web-bugs/issues/125362


Tested on macOS 14.0
---
Safari Technology Preview  176           19617.1.1.2
Firefox Nightly            118.0a1       11823.8.19
Google Chrome Canary       118.0.5960.0  5960.0

[Tim Nguyen (:ntim)]

Created attachment 467370 [details]
reduced testcase

[Sammy Gill]

I think our logic for the height: fit-content is wrong. The grid should be sized as min(max-content, max(min-content, stretch)) according to https://drafts.csswg.org/css-grid-2/#intrinsic-sizes

We seem to think we have a definite logical height:

bool hasDefiniteLogicalHeight = RenderBlock::hasDefiniteLogicalHeight() || overridingLogicalHeight() || computeContentLogicalHeight(RenderBox::SizeType::MainOrPreferredSize, style().logicalHeight(), std::nullopt) || shouldComputeLogicalHeightFromAspectRatio();

and just use that as part of track sizing as the definite available space. We probably need to compute and take into consideration the min/max content sizes of the grid
https://drafts.csswg.org/css-grid-2/#intrinsic-sizes