Bug 237710 – REGRESSION: element with "align-items: baseline" does not wrap correctly in nested flex/grid structure

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Sebastian]

Created attachment 454343 [details]
HTML snippet to reproduce the bug

when wrapping some text in a nested flex/grid structure and setting "align-items: baseline;" on the parent grid, long text which exceeds the width of the container is not wrapped (its width is not limited by the parent width). Instead the text is rendered in a single line. The height of the container however is calculated correctly, just as if the text would be wrapped properly. See attached HTML snipped for details on the structure.

A different nesting of grid/flex containers quickly resolves the issue, the problem seems to be only present when mixing both flex and grid items.

The bug has been reproduced using the build of WebKit included in the *Playwright* project v1.19.2: https://github.com/microsoft/playwright/blob/v1.19.2/browser_patches/webkit/UPSTREAM_CONFIG.sh => WebKit version should be https://commits.webkit.org/246774@main.
It worked as expected with the version included in Playwright 1.16.3 (https://github.com/microsoft/playwright/blob/v1.16.3/browser_patches/webkit/UPSTREAM_CONFIG.sh) -> maps to https://commits.webkit.org/242973@main. Seems to be broken since at least commit https://commits.webkit.org/243863@main (from Playwright 1.17.0).

[Sebastian]

Created attachment 454344 [details]
image of the incorrect rendering

[Sebastian]

Created attachment 454345 [details]
image of the expected correct rendering

[Radar WebKit Bug Importer]

<rdar://problem/90106740>

[Matt Woodrow]

I'm going to mark this as a duplicate of bug 237732, since that one is linked to a radar that's being tracked.

Thanks for the reduced test case!

*** This bug has been marked as a duplicate of bug 237732 ***