-
Notifications
You must be signed in to change notification settings - Fork 756
Description
We want to confirm the expectations of a few scenarios derived from this section of the spec:
The subgrid is always stretched in its subgridded dimension(s): the 'align-self'/'justify-self' properties on it are ignored, as are any specified width/height constraints.
Scenario 1
<!DOCTYPE HTML>
<div style="display: grid; border: 2px solid;">
<div style="
width: 50px;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
background: lightgrey;">
this is a fairly long line
</div>
</div>In the example above, the specified width property should be ignored when sizing the subgrid since its columns are subgridded to the parent grid. However, do we still want to honor the width: 50px when performing layout of the subgrid? Blink is stretching to the size of the grid. Gecko has a different behavior where the size of the subgrid is 50px, but the text is laid out as if it was stretched to the size of the container. Webkit completely ignores the spec and sizes the subgrid to 50px.
Can we assume that Blink's behavior is expected here since the specified width should be ignored?
Scenario 2
<!DOCTYPE HTML>
<div style="display: grid; border: 2px solid;">
<div style="
width: 50px;
justify-self: center;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-rows: subgrid;
background: lightgrey;">
this is a fairly long line
</div>
</div>In this second example, since the subgrid's inline axis is not subgridded, is it expected that we should respect the justify-self: center and consider its min-content and max-content sizes? Gecko and Webkit seem to be doing that, while we currently are not in Blink.
Scenario 3
<!DOCTYPE HTML>
<div style="display: inline-grid; border: 2px solid;">
<div style="
width: 50px;
display: grid;
grid-row: 1 / -1;
grid-column: 1 / -1;
grid-template-rows: subgrid;
background: lightgrey;">
<div style="
width: 100px;
height: 25px;
background: pink;">
</div>
</div>
</div>Finally, from the example above, is our understanding correct that we should ignore the min-content size of a subgrid and favor its specified width? I.e., the subgrid's standalone columns will overflow its available space. Gecko and Webkit use the width: 50px as the contribution size for the subgrid, while current Blink implementation considers the min-content size instead.