[Webkit-unassigned] [Bug 202051] New: [css-grid] Safari does not calculate intrinsic height for grid cell

[bugzilla-daemon at webkit.org]

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

            Bug ID: 202051
           Summary: [css-grid] Safari does not calculate intrinsic height
                    for grid cell
           Product: WebKit
           Version: Safari 12
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pilesidim at coin-host.net

Created attachment 379252

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

Rendering in Safari

Here's a grid.

  <div id="wrap">
    <div id="grid">
      <div id="cell1">A</div>
      <div id="cell2">B</div>
    </div>
  </div>

We know it's height by virtue of it's relationship to its wrapper – it's as tall as its container is wide.

  #wrap {
    padding-top: 100%;
    position: relative;
  }

  #grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

When I ask the two cells to span two columns and one row each:

  #cell1 {
    grid-column-end: 1;
    grid-column-start: 3;
    grid-row-end: 1;
    grid-row-start: 2;
  }

  #cell2 {
    grid-column-end: 1;
    grid-column-start: 3;
    grid-row-end: 2;
    grid-row-start: 3;
  }

...they acquire the correct width but not the correct height. It appears that Safari does not calculate the intrinsic height of each row based on the height of the grid.

Repro: https://jsbin.com/rovolevubu/edit?html,css,output

-- 
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/20190920/e666c223/attachment.html>