[csswg-drafts] [css-grid] Is baseline shim used in the minimum contribution? (#3660)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Is baseline shim used in the minimum contribution? ==
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](https://drafts.csswg.org/css-grid/#min-size-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/

```html
<div id="grid">
  <div id="item1" class="item"></div>
  <div id="item2" class="item"></div>
</div>
```
```css
#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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3660 using your GitHub account

Received on Tuesday, 19 February 2019 23:52:01 UTC