Bug 260201 – REGRESSION(261003@main): [css-contain] contain: inline-size breaks grid-template-rows: auto in Safari iOS 17

• Component: CSS
• Status: RESOLVED FIXED

[Johannes Odland]

Created attachment 467280 [details]
A screenshot of the bug.

Adding `contain: inline-size` collapses auto sized grid rows.

# How to reproduce: 

Add `contain: inline-size` to a grid element with grid-template-rows: auto;

A test-case is available here: https://johannesodland.github.io/browserbugs/2023/safari-contain-inline-size-grid-issue.html


```html
<section>
    <div>
        Lorem ipsum
    </div>
</section>
```

```css
section {
    box-sizing: border-box;
    display: grid;
    min-height: 100svh;
    grid-template-rows: auto;
    padding: 30px;
    contain: inline-size;
}

div {
    align-self: end;
}

```

# Expected result: 
Grid row height is unaffected. 
The text is placed in the bottom of the screen.

#Actual result
Grid row height collapses
The text is placed in the top of the screen.

[Radar WebKit Bug Importer]

<rdar://problem/113915953>

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/21701

[Sammy Gill]

I believe this issue that is occurring here is that we are skipping the step in the grid track sizing algorithm where we are supposed to distribute extra space to the tracks. AFAICT there is no reason to skip this part since this part of the spec has nothing to do with the content of the grid itself so it should still be done. 

By skipping this step the row is effectively sized to the height of the text and so has no room to perform any alignment like the one specified

[Sammy Gill]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/43651

[EWS]

Committed 272085@main (cf2a9868136a): <https://commits.webkit.org/272085@main>

Reviewed commits have been landed. Closing PR #21701 and removing active labels.