Bug 199648 – CSS Grid `align-items: baseline;` with scaled images results in excessive top whitespace

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Dan Richman]

Created attachment 373795 [details]
Reduction of CSS Grid issue

Summary:
A horizontal CSS Grid-based shelf with (%) percent-based scaled-width images and `align-items: baseline;` will result in excessive container size.

Tested in Safari Technology Preview, Release 86 (Safari 13.0, WebKit 14608.1.30.2)

Steps To Reproduce:
1. Open attached `grid-image-align-reduction.html`
2. Observe excessive space above images.

Results:
There should be no space between the top of the tallest image and the top of the window. The tallest image should align to the top of the window.

Regression:
When this was reduced, it became clear that giving the images a `%` width value (to scale to the width of their grid containers) is what triggered the `align-items: baseline;` bug. If you define a pixel-based width on the images, the bug is not triggered.

[Radar WebKit Bug Importer]

<rdar://problem/52895538>

[Manuel Rego Casasnovas]

Oriol, could you please take a look?

[Oriol Brufau]

Created attachment 407225 [details]
Simpler testcase

OK, so the problem is that the track sizing algorithm takes baseline alignment into account, so when we calculate that baseline alignment we still don't know the final grid area sizes.

In RenderGrid::performGridItemsPreLayout, there is

```cpp
if (isBaselineAlignmentForChild(*child)) {
    updateGridAreaLogicalSize(*child, algorithm.estimatedGridAreaBreadthForChild(*child));
```

The estimated area is 200px wide and undefined tall for the 1st item.
But the 2nd item has a 50px wide X, so the estimated area is 250px wide.
Then we think that the image will be 250px wide, and therefore 250px tall via the aspect ratio.
So we add a 50px shim, which increases the row size by 50px, thinking that this will provide proper baseline alignment.
However, the 2ns column ends up being 200px, not 250px, so the above was wrong.

The problem is in GridTrackSizingAlgorithm::estimatedGridAreaBreadthForChild.
Since `isRelativeGridLengthAsAuto(maxTrackSize, direction)` is true, it returns the maxPreferredLogicalWidth.
However, while the grid track sizing function for the column is a percentage, it is actually definite due to `width: 400px`.
So isRelativeGridLengthAsAuto should return false!
But it returns true because the availableSpace has not been set yet, so it thinks that the grid is sized under a min/max-content constraint.

Chromium is also affected.

[Oriol Brufau]

Created attachment 407299 [details]
Patch

[Javier Fernandez]

Comment on attachment 407299 [details]
Patch

r=me

[EWS]

Committed r266173: <https://trac.webkit.org/changeset/266173>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 407299 [details].