Bug 229027

Summary:

Incorrect grid population with shadow DOM and display: contents

Product:

WebKit

Reporter:

Jeroen Zwartepoorte <jeroen.zwartepoorte>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

bfulgham, koivisto, rbuis, rego, rniwa, simon.fraser, svillar, webkit-bug-importer, webkit-layout-noreply, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
Layout bug in action	none
The correct layout	none

Description Jeroen Zwartepoorte 2021-08-12 00:54:30 PDT

Created attachment 435398 [details]
Layout bug in action

So I've tried (and failed) to create a reproducible example here: https://codepen.io/jpzwarte/pen/ZEKwZmv 

What happens in Safari & STP is that with the given DOM structure of:

```
<my-container>
  <div class="wrapper">
    <h1>Title</h1>
    <p>Body</p>
    <button>Button</button>
  </div>
</my-container>
```

And with `my-container` having `display: grid; grid-template-rows: auto auto auto;`, Safari incorrectly puts the `<p>` on the first grid row.

It looks like a reflow fixes the issue.

The workaround here is to explicitly set `grid-row: 1` for the title and `grid-row: 3` for the button.

Comment 1 Jeroen Zwartepoorte 2021-08-12 00:55:45 PDT

Created attachment 435399 [details]
The correct layout

Comment 2 Jeroen Zwartepoorte 2021-08-12 00:56:50 PDT

In the first screenshot, the table is shown below the buttons. In the DOM, the table is actually the 2nd element in the dialog and *should* be shown above the buttons and below the title.

The second screenshot shows the correct order (after a reflow).

Comment 3 Radar WebKit Bug Importer 2021-08-19 00:55:18 PDT

<rdar://problem/82113973>

Comment 4 Ryosuke Niwa 2022-07-02 22:14:44 PDT

This appears to be working now as far as I've tested. Please re-open the bug if the bug still reproduces.