1558705 - [css-grid] subgrid margin/border/padding isn't accounted for when doing content measurements to determine row size

Status: RESOLVED FIXED

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

Description

[Daniel Holbert [:dholbert]]

(Originally reported at https://twitter.com/jieorlin/status/1138430817942745096 )

STR:

1. Load https://codepen.io/yisi/pen/GbRdWG
2. Look at the bottom of the third column.

ACTUAL RESULTS:
The text at the bottom is superimposed with the button.

EXPECTED RESULTS:
No such superimposing.

I haven't diagnosed very far (currently on a plane), but I think this has to do with padding not being taken into consideration when sizing the row from its items' contents. Here's a version of the codepen where I've removed padding, and the text fits nicely:
https://codepen.io/anon/pen/gNbgKW

And here's a version where I've added much more padding, and the text really doesn't fit:
https://codepen.io/anon/pen/Bgypqm

This might be subgrid-specific -- at least, the testcase that the reporter provided has several nested subgrids.

Comment 1

[Daniel Holbert [:dholbert]]

The items in question here (with problematic padding) are the <div class="card__text"> elements.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase, showing that this can be triggered by border, margin, or padding on the subgrid.

Comment 3

[Daniel Holbert [:dholbert]]

Roughly, I think the issue is that we're doing BSize-measurements incorrectly on the grid item inside of a subgrid. We're mistakenly assuming that the item will get the grid area's full available ISize. But in fact, it may not have access to that full ISize, because the subgrid may have stolen some of the ISize for its own margin/border/padding. So, our BSize measurement ends up being smaller than what the item actually needs, and it ends up overflowing.

Comment 4

[Daniel Holbert [:dholbert]]

For the moment, this bug means that it's unsafe (from a not-wanting-content-to-overflow perspective) to have any margin/border/padding on a subgrids, if there's any row-sizing dependency on the subgrid's contents.

(In the meantime, authors can avoid this issue by not using margin/border/padding on any subgrid elements. But long-term, that's probably something they'd want to be able to do, of course.)

Comment 5

[Mats Palmgren (inactive)]

Thanks for the testcase. Yeah, this should definitely work as the author intended.
I must have missed to account for the subgrid's MBP in some place...

Comment 6

[Mats Palmgren (inactive)]

Attachment: Bug 1558705 - [css-grid-2] Account for the subgrid's margin/border/padding when resolving its non-subgridded track sizes. r=dholbert

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c099f4a4ffb6
[css-grid-2] Account for the subgrid's margin/border/padding when resolving its non-subgridded track sizes.  r=dholbert

Comment 8

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/c099f4a4ffb6

Comment 9

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/17471 for changes under testing/web-platform/tests

Comment 10

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged