[Webkit-unassigned] [Bug 246451] New: Layout of nested grid with padding and aspect ratio fails

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=246451

            Bug ID: 246451
           Summary: Layout of nested grid with padding and aspect ratio
                    fails
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Apple Silicon)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: johannes.odland at nrk.no
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 462956

  --> https://bugs.webkit.org/attachment.cgi?id=462956&action=review

Screenshot in Safari

Element in grid container with aspect-ratio, padding and align-content: end is placed outside grid if grid container is nested in another grid container.

I have replicated the bug in the following code pen: https://codepen.io/johannesodland/pen/xxjMgzr

```html
  <section>
    <div class="hero">
      <h2>Title</h2>
    </div>
  </section>

```

```css
:root {
  --_padding: 15px;
}

section {
  display: grid;
}

.hero {
  display: grid;
  background-color: silver;
  aspect-ratio: 16 / 9;
  padding: var(--_padding);
  align-content: end;
  justify-items: start;
}

h2 {
  margin: 0;
  padding: var(--_padding);
  background: mediumorchid;
}

```

Expected result: h2 is rendered inside padding at the bottom of the containing grid element.
This is correct in Chrome and Firefox.

Actual result: h2 is rendered 2 x padding below where it is expected, 1 x padding outside containing grid.


The bug also happens if the grid is inside a flex container, but not if its in a flow container.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221013/a0f89ba3/attachment.htm>