[css-grid-2] Mapping implicit line names from grid areas to orthogonal subgrids

sammygill commented 1 year ago

This stemmed from a discussion about a particular subtest in a subgrid WPT: https://github.com/web-platform-tests/wpt/issues/41831

https://github.com/web-platform-tests/wpt/blob/master/css/css-grid/subgrid/orthogonal-writing-mode-005.html

TLDR: WebKit disagrees with Blink and Gecko regarding the following example:

<!DOCTYPE HTML>
<html>
<head>
<style>
.grid {
  display: inline-grid;
  grid-auto-columns: 15px;
  border: 1px solid;
}

.subgrid {
  display: grid;
  writing-mode: vertical-lr;
  grid-template-rows: subgrid;
  grid-column: 1 / span 4;
  background: grey;
  grid-auto-columns: 8px;
  grid-auto-flow: column;
}

.areas-1a { grid-template-areas: 'x x x x' }

.subgrid >  :nth-child(2n)   {  background: black; }
.subgrid >  :nth-child(2n+1) {  background: pink; }
.subgrid >  * { writing-mode: horizontal-tb; }

</style>
</head>
<body>
<div class="grid areas-1a">
  <div class="subgrid">
    <div style="grid-row:x-start"></div>
    <div style="grid-row:x"></div>
    <div style="grid-row:x-start / x-end"></div>
    <div style="grid-row:x-end"></div>
  </div>
</div>
</body>
</html>

It sounds like Blink is performing some sort of mapping of the outer grid's implicit line names to the subgrid where they overlap (which I think I agree with), but there is potentially a discrepancy with orthogonal subgrids.

Could we get some sort of clarification about how the mapping should occur in this scenario? My understanding is that the named lines should keep their physical positions and an orthogonal subgrid should be able to reference them but in the opposite axis. In this particular example since the grid area completely overlaps the subgrid it should be able to reference all of the implicit lines and potentially giving the WebKit output.

sammygill commented 1 year ago

CC @fantasai

fantasai commented 1 year ago

The relevant spec section is https://www.w3.org/TR/css-grid-2/#subgrid-area-inheritance

Analyzing the testcase: Diagram of the testcase

The master grid has a 4-column 1-row area called "x", which creates "x-start" and "x-end" lines in both axes.
The subgrid covers this same area, adopting the "x-start" and "x-end" line names in the subgridded axis (i.e. for its vertical tracks, which are in fact its rows since it has a vertical writing mode).
The subgrid items are placed into the subgrid, starting with its start-start (top left) corner. They have explicit row placement, but automatic column placement, so each one ends up in a different column:
1. The first item's row placement is "x-start", implicit span of 1, so it starts at the first (x-start) vertical line and spans to the second vertical line. It remains in the first horizontal track (first column) of the subgrid.
2. The second item's row placement is "x", so it stretches from the x-start vertical line to the x-end vertical line, and occupies the second horizontal track of the subgrid.
3. The third item's row placement is "x-start / x-end", so it also occupies all the vertical tracks, and the third horizontal track of the subgrid.
4. Te fourth item's row placement is "x-end", implicit span of 1. It wants to be placed at vertical lines 5 (x-end) and 6, but it gets clamped to lines 4 and 5, occupying the grid cell at the intersection of the 4th horizontal and 4th vertical tracks in the subgrid.

This, afaict, yields the rendering in WebKit. CC @tabatkins for sanity check.

(I noticed that in https://www.w3.org/TR/css-grid-2/#subgrid-area-inheritance we didn't specify that only the subgridded axes inherits names, but that doesn't affect the results here anyway.)

fantasai commented 1 year ago

I think the important idea to keep in mind is that subgridding an axis creates a physical-axis correspondance, not a logical one. (A logical one wouldn't make any sense, if you think about it.) Like if a subgrid subgrids its horizontal tracks, then its horizontal tracks match up to the parent grid's horizontal tracks, and horizontal parent grid line names get adopted as names for the coinciding horizontal subgrid lines.

tabatkins commented 1 year ago

Yes, my read agrees with fantasai. The line names are definitely physical, and thus will swap logical axises if the writing mode axis changes (and indeed, nothing else even remotely makes sense; the only other behavior we could theoretically do is block line inheritance entirely when the writing mode rotates).

And with that established, each element forces itself to auto-flow into a fresh column, so they should occupy four column, and have the sizes that WebKit gives them.

w3c / csswg-drafts

[css-grid-2] Mapping implicit line names from grid areas to orthogonal subgrids #9418