Bug 165062 - [css-flex] Flex container baseline wrongly uses content-box bottom to synthesize baselines
Summary: [css-flex] Flex container baseline wrongly uses content-box bottom to synthes...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-11-24 07:09 PST by Javier Fernandez
Modified: 2024-01-22 15:22 PST (History)
8 users (show)

See Also:


Attachments
Test case to reproduce the issue. (925 bytes, text/html)
2016-11-24 07:09 PST, Javier Fernandez
no flags Details
Safari / WebKit matches with other browsers (489.43 KB, image/png)
2023-05-08 02:57 PDT, Ahmad Saleem
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Javier Fernandez 2016-11-24 07:09:11 PST
Created attachment 295409 [details]
Test case to reproduce the issue.

According the the last draft version of the Flexible Box specification:

https://drafts.csswg.org/css-flexbox/#flex-baselines
"if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the first/last flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)"

The CSS WG has agreed as well that we should do the same for orthogonal flex items:

https://github.com/w3c/csswg-drafts/issues/373
https://lists.w3.org/Archives/Public/www-style/2016Sep/0000.html

Also, while I couldn't find it in the specs, the CSS WG has agreed that an empty Flexbox containers should synthesize its baseline using its border-box bottom edge:

https://github.com/w3c/csswg-drafts/issues/439

The attached test cases prove that current implementation doesn't follow the spec.
Comment 1 Jon Lee 2016-12-15 16:17:46 PST
<rdar://problem/29694866>
Comment 2 Sam Sneddon [:gsnedders] 2021-03-23 09:39:16 PDT
> "if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the first/last flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)"

We seem to do this now.

> Also, while I couldn't find it in the specs, the CSS WG has agreed that an empty Flexbox containers should synthesize its baseline using its border-box bottom edge:

It appears WebKit, Blink, and Gecko all use the margin-box for empty flexbox containers currently; not totally sure what css-flexbox and css-align say now?

So is this now resolved?
Comment 3 Ahmad Saleem 2023-05-08 02:57:45 PDT
Created attachment 466272 [details]
Safari / WebKit matches with other browsers

As per attached, WebKit / Safari is matching other browsers. Do we need to do anything here?
Comment 4 Brent Fulgham 2024-01-22 15:22:22 PST
Closing based on Ahmad's testing.