Bug 263310

Summary: grid position/ size seems based on `border-box` height when element sized using `aspect-ratio`
Product: WebKit Reporter: ana.tudor.lhnh
Component: Layout and RenderingAssignee: Sammy Gill <sgill26>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, bfulgham, karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Other   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=260584
https://bugs.webkit.org/show_bug.cgi?id=260585
https://github.com/web-platform-tests/wpt/pull/42899
Bug Depends on:    
Bug Blocks: 260266    
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Description ana.tudor.lhnh 2023-10-18 01:29:30 PDT
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
Comment 1 Radar WebKit Bug Importer 2023-10-18 09:23:51 PDT
<rdar://problem/117138268>
Comment 2 Karl Dubost 2023-10-30 18:21:13 PDT
Created attachment 468418 [details]
rendering in safari, firefox, chrome

Confirmed. 
Latest versions of browsers.
Comment 3 Karl Dubost 2023-10-30 18:27:08 PDT
That seems related to some of the WPT failing.
Comment 4 Sammy Gill 2023-10-31 16:46:46 PDT
Pull request: https://github.com/WebKit/WebKit/pull/19806
Comment 5 Sammy Gill 2023-11-01 10:01:00 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/42899
Comment 6 EWS 2023-11-01 19:15:05 PDT
Committed 270098@main (2c5b45546cbb): <https://commits.webkit.org/270098@main>

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