[css-grid] inconsistencies in the definition of grid container baselines

[javifernandez]

The section 11.6 of the CSS Grid Layout specification has some inconsistencies, broken links and obscure statements that I think they deserve some clarification.
https://drafts.csswg.org/css-grid/#grid-baselines

Otherwise, If the item has no alignment baseline in that axis, then one is first synthesized from its border edges.

• What axis ? I think that text comes from the version which allowed block-axis baselines.

Otherwise, the grid container has no first (last) baseline set, and one is synthesized if needed according to the rules of its alignment context.

• The link 'alignment context' is broken.
• What does it means "synthesized according to the rules of its alignment context." ?
• Why "if needed" ?

From the last comment in #439 I came to the conclusion that when the grid container has no baseline set it should use its border bottom edge.

[javifernandez]

Let's consider the following example:

<style>
.border { border: 11px solid pink; }
.padding { padding: 13px; }
.margin { margin: 8px 0; }
</style>

<div>
Should align
with the
<div style="display: inline-block;">
  <div style="display: grid; background-color: grey;">
      <div style="background-color: lightgrey;" class="border padding margin" ></div>
  </div>
</div>
middle of
<div style="display: inline-grid; background-color: grey;" class="margin border padding"></div>
the grey grid box.
</div>

<br>

<div>
Should align
with the
<div style="display: inline-block;">
  <div style="display: flex; background-color: grey;" >
      <div style="background-color: lightgrey;" class="border padding margin"></div>
  </div>
</div>
middle of
<div style="display: inline-flex; background-color: grey;" class="margin border padding"></div>
the grey flex box.
</div>

This example shows how flexbox and grid (what I'm implementing right now) will behave when aligning the inline blocks using synthesized baselines. Here it is a picture of how it'd looks like:

In the flexbox case the flex container's content-box is used to synthesize a baseline, in both scenarios; either a flex container with an item with no natural baseline or an empty flex container are generating the same alignment-baseline.

In the case of the grid case, I'm following the current spec text which states that we should use the item's border box, if it exists, to synthesize the grid's container baseline. In the scenario of an empty grid, however, I'm doing the same as flex, as I'm assuming the text "synthesized if needed according to the rules of its alignment context." which both specs have, will produce the same results.

[fantasai]

What axis ? I think that text comes from the version which allowed block-axis baselines.

Fixed.

The link 'alignment context' is broken.

Seems to be working for me.

What does it means "synthesized according to the rules of its alignment context." ?

E.g. grids and flexboxes synthesize using the border edges of an item, whereas inline layout synthesizes using the margin edges of an inline box. We can't change the latter behavior due to compat. So we're restricted to inline-block need to use the margin edges. In that case, either all block containers use margin edges, or all inline-level boxes do, or everything does. Since treating empty block containers differently from empty grid or flex containers didn't seem reasonable, we narrowed down to either inline-level boxes use margins and flex/grid-level boxes use borders, or all boxes use margins. The discussion concluded on the former: https://lists.w3.org/Archives/Public/www-style/2016Sep/0000.html

Why "if needed" ?

Sometimes you don't need to baseline-align the box. :)

There might also be an issue wrt propagation of baselines through ancestors here... meaning, we could say that synthesized baselines don't propagate to a parent the way natural ones do. I'm not recalling this line of reasoning very clearly atm, though.

[javifernandez]

I think this is clear now. Unless somebody else has anything to say or disagree with the final version of the text (which I think is not what Flexbox currently does in Chromium and Safari), we may close this issue.