Repository navigation
[css-grid] Is baseline shim used in the minimum contribution? #3660
Description
From https://drafts.csswg.org/css-grid/#algo-baseline-shims
Shim baseline-aligned items so their intrinsic size contributions reflect their baseline alignment. For the items in each baseline-sharing group, add a “shim” (effectively, additional margin) on the start/end side (for first/last-baseline alignment) of each item so that, when start/end-aligned together their baselines align as specified.
Consider these “shims” as part of the items’ intrinsic size contribution for the purpose of track sizing, below.
The "intrinsic size contribution" term is not linked but I guess it refers exclusively to https://drafts.csswg.org/css-sizing-3/#contributions, i.e. the min-content contribution and the max-content contribution.
However, tracks with an auto minimum are sized using the minimum contribution, which may not be an intrinsic size contribution:
The minimum contribution of an item is the outer size that would result from assuming the item’s used minimum size (min-width or min-height, whichever matches the relevant axis) as its preferred size (width or height, whichever matches the relevant axis) if its computed preferred size behaves as auto, or else the item’s min-content contribution otherwise.
If the preferred size behaves as auto, does the hypothetical outer size include the shim?
For example, https://jsfiddle.net/wkv4trq2/
<div id="grid">
<div id="item1" class="item"></div>
<div id="item2" class="item"></div>
</div>#grid {
display: grid;
position: relative;
grid-template-columns: 100px 100px;
grid-template-rows: auto;
align-items: baseline;
height: 100px;
width: 200px;
border: solid;
line-height: 0;
}
#grid::before {
content: '';
position: absolute;
z-index: -1;
left: 0; right: 0; top: 0; bottom: 0;
background: cyan;
grid-row: 1 / 2;
grid-column: 1 / 3;
}
#item1 {
padding-bottom: 100px;
background: yellow;
}
#item2 {
background: magenta;
padding-top: 100px;
}
.item {
min-height: 0;
}
.item::before {
content: ' ';
display: inline-block;
vertical-align: top;
}If I understand correctly, if the outer size doesn't include the shim, then it will be 100px for both items, so the base size of the row will be 100px. The available grid space is also 100px, so the free space is 0, and the row shouldn't grow beyond this.
However, the row is 200px tall in all Chromium, Firefox and Edge (as you can see with the cyan abspos). So I guess the outer size should include the shim. This is not clear from the spec.
Activity
Loirooriol commentedon Feb 20, 2019
In fact Chromium and Edge don't include the shim if the row is sized with
minmax(auto, 0)and the 1st item hasmin-height: autoinstead of0, then the row is 100px tall. Still 200px in Firefox. https://jsfiddle.net/kqgvzd5j/Loirooriol commentedon Feb 20, 2019
Related with the previous comment, https://drafts.csswg.org/css-grid/#content-based-minimum-size says
Is the shim taken into consideration when subtracting the margins in order to calculate the stretch fit?
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
[css-grid] Always consider baseline shim for the minimum contribution
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…
fantasai commentedon Jun 6, 2019
Clarified that the minimum contribution is a type of intrinsic size contribution.
[css-grid] Always consider baseline shim for the minimum contribution
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…
Bug 1534391 [wpt PR 15511] - [css-grid] Always consider baseline shim…