Bug 202051 – [css-grid] Safari does not calculate intrinsic height for grid cell

• Status: NEW
• Component: CSS

[Steven Luscher]

Created attachment 379252 [details]
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

[Steven Luscher]

Created attachment 379253 [details]
Rendering in Chrome/Firefox

[Sam Sneddon [:gsnedders]]

I /think/ this is the same issue as the failures in https://wpt.fyi/results/css/css-grid/grid-model/grid-box-sizing-001.html?label=master&label=experimental&aligned

[Ahmad Saleem]

I don't get rendering "red" rendering as shown in reference on above. Plus it seems Safari Technology Preview 156 behave similar to other browsers (Chrome Canary 109 and Firefox Nightly 108).

Appreciate if someone else can have another look so we can mark this as "RESOLVED CONFIGURATION CHANGED". Thanks!