New issue
Advanced search Search tips

Issue 904562 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 671132
Owner:
Closed: Dec 17
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

[css-grid][css-flex] An empty grid under an inline formatting context should use the margin box to synthesize its baseline

Project Member Reported by jfernan...@igalia.com, Nov 12

Issue description

Chrome Version: (72.0.3595.2)

What steps will reproduce the problem?
(1) Load the attached test case
(2)
(3)

What is the expected result?

The empty grid is aligned using its margin-box's under edge to synthesize its baseline. (see expected.png)
This is also the Firefox's behavior.

What happens instead?

The empty grid is aligned using its border-box's bottom edge to synthesize its baseline. (see actual.png)

 
baseline-grid-issue.html
385 bytes View Download
baseline-grid-expected.png
2.0 KB View Download
baseline-grid-actual.png
2.3 KB View Download
Summary: [css-grid] An empty grid under an inline formatting context should use the margin box to synthesize its baseline (was: [css-grid] An empty grid under an inline formatting context should use the margin box to synthesized its baseline )
There are several specs that describe the expected behavior. First, the CSS Box Alignment specification states the following: 

https://drafts.csswg.org/css-grid/#grid-baselines

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

In the same spec, a synthesized baseline is defined as follows:

https://drafts.csswg.org/css-align-3/#synthesize-baseline

"To synthesize baselines from a rectangle (or two parallel lines), synthesize the alphabetic baseline from the line-under line, and the central baseline by averaging the positions of the two edges or lines. See CSS Inline Layout 3 ยง Synthesizing Alignment Metrics for rules on synthesizing additional baselines.

Note: The edges used to synthesize baselines from a box depend on their formatting context: inline-level boxes synthesize from their margin edges [CSS-INLINE-3], table cells synthesize from their content edges [CSS2], and grid and flex items synthesize from their border edges [CSS-GRID-1] [CSS-FLEXBOX-1]."

As it's stated in the box, an inline-level box like the one used in the example, should use its margin edges.

Additionally, the css-inline-3 spec still refers to the current text included in the CSS Writing Mode specification:

https://www.w3.org/TR/css-inline-3/#baseline-synthesis-replaced

 ISSUE 28  Copy over text from CSS Writing Modes and expand for additional baseline values.

https://www.w3.org/TR/css-writing-modes-3/#replaced-baselines

If an atomic inline (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus:

alphabetic
    The alphabetic baseline is assumed to be at the under margin edge. 
central
    The central baseline is assumed to be halfway between the under and over margin edges of the box. 
Components: Blink>Layout>Grid
Components: Blink>Layout>Flexbox
Summary: [css-grid][css-flex] An empty grid under an inline formatting context should use the margin box to synthesize its baseline (was: [css-grid] An empty grid under an inline formatting context should use the margin box to synthesize its baseline )
The same issue applies to Flexbox; attached the corresponding test case.
baseline-flexbox-issue.html
385 bytes View Download
Cc: cbiesin...@chromium.org
Owner: jfernan...@igalia.com
Status: Assigned (was: Untriaged)
Mergedinto: 671132
Status: Duplicate (was: Assigned)

Sign in to add a comment