Bug 263310 – grid position/ size seems based on `border-box` height when element sized using `aspect-ratio`

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Ana Tudor]

1. Create a `div` with text content.

```
<div>boo</div>
```

2. Give it a `width`, an `aspect-ratio`, a `padding`, a `border` and a `background`.

```
div {
	border: solid .5em black;
	padding: 1em;
	width: 9em;
	aspect-ratio: 3/ 2;
	background: crimson content-box
}
```

3. Use a `grid` layout and place the grid in the bottom right corner.

```
div {
	display: grid;
	place-content: end;
	/* same as before */
}
```

The grid/ text content should be now in the bottom right corner of the element's `content-box`. This is what happens in Chrome and Firefox.

It's along the right edge of the element's `content-box`, but lower (by one `padding` + one `border-width`) both when testing via Epiphany and in actual Safari (confirmed here https://twitter.com/anatudor/status/1714390495042896136).

Live test https://codepen.io/thebabydino/pen/NWeZmwZ

If we explicitly set the `height` to `6em` instead of using `aspect-ratio`, this problem doesn't occur.

Strangely enough, this problem does not happen along the other axis if we explicitly set the `height` to `6em` and the `width` via `aspect-ratio`.

If we use `place-items: end` to place the text in the bottom right corner of its grid cell, this makes the `content-box` grow vertically because the grid in it is taller.

Live test https://codepen.io/thebabydino/pen/KKbOVKY

[Radar WebKit Bug Importer]

<rdar://problem/117138268>

[Karl Dubost]

Created attachment 468418 [details]
rendering in safari, firefox, chrome

Confirmed. 
Latest versions of browsers.

[Karl Dubost]

That seems related to some of the WPT failing.

[Sammy Gill]

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

[Sammy Gill]

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

[EWS]

Committed 270098@main (2c5b45546cbb): <https://commits.webkit.org/270098@main>

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