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
<rdar://problem/117138268>
Created attachment 468418 [details] rendering in safari, firefox, chrome Confirmed. Latest versions of browsers.
That seems related to some of the WPT failing.
Pull request: https://github.com/WebKit/WebKit/pull/19806
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/42899
Committed 270098@main (2c5b45546cbb): <https://commits.webkit.org/270098@main> Reviewed commits have been landed. Closing PR #19806 and removing active labels.