Description
This stemmed from a discussion about a particular subtest in a subgrid WPT: web-platform-tests/wpt#41831
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.