1609495 - [css-grid] Percentage tracks never resolve for rows

Status: RESOLVED DUPLICATE of bug 1481876

(Core :: Layout: Grid, defect, P3)

Description

[Oriol Brufau [:Oriol]]

Attachment: testcase.htm

Run attached testcase:

#grid {
  grid-template: 100% auto / 100% auto;
  display: inline-grid;
}
#one, #two {
  height: 50px;
  width: 50px;
  background: black;
}
#two {
  grid-row: 2;
  grid-column: 2;
}

<div id="grid">
  <div id="one"></div>
  <div id="two"></div>
</div>

The spec says https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage

If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto, for the purpose of calculating the intrinsic sizes of the grid container and then resolve against that resulting grid container size for the purpose of laying out the grid and its items.

This happens for grid-template-columns. When finding the intrinsic width using auto auto the columns are 50px and 50px wide, so the grid becomes 100px wide. Then we can resolve the percentage, so the columns end up being 100px and 50px.

But this doesn't happen for grid-template-rows. They should also end up being 100px and 50px tall, but instead they are 50px and 50px.

Actual result:

Columns: 100px 50px
Rows: 50px 50px

Expected result:

Columns: 100px 50px
Rows: 100px 50px

Chromium does it correctly.

Comment 1

[Jonathan Kew [:jfkthame]]

Mats, this looks like it's in your area.

Comment 2

[Oriol Brufau [:Oriol]]

This is actually a dupe of bug 1481876, please assign that one if you are working on this!