2046642 - Ignore `visibility:collapse` flex items when inserting gaps in flex main axis

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase.

EXPECTED RESULTS:
Equally spaced boxes.

ACTUAL RESULTS:
Extra big gap between the first two items.

The flex item there is "collapsed" with visibility:collapse, which means we're supposed to ignore it except for the purpose of establishing the line's cross size.

https://drafts.csswg.org/css-flexbox-1/#visibility-collapse
https://drafts.csswg.org/css-flexbox-1/#algo-visibility

Note that Chrome doesn't implement this special behavior ( https://issues.chromium.org/issues/41085247 ) so don't use them as a reference here.

(This was part of the cause of bug 2030313, as Emilio noted over there.)

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2046642 - Fix interaction of gap and visibility: collapse in flex containers. r=dholbert,TYLin,#layout

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a46a009084aa
https://hg.mozilla.org/integration/autoland/rev/15cd8a4981ed
Fix interaction of gap and visibility: collapse in flex containers. r=dholbert,layout-reviewers,dshin

Comment 3

[Daniel Holbert [:dholbert]]

For the reference case that was updated in this patch -- flexbox-collapsed-item-horiz-001-ref.html: I wrote it based on an older version of the flexbox spec, which accounted for visibility:collapse during flex layout...
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#visibility-collapse

...but did not have any special handling/exclusion for visibility:collapse items during intrinsic sizing:
https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#intrinsic-sizes
("The max-content main size of a flex container is the sum of the flex container’s items' max-size contributions in the main axis." -- note "items", no exclusion of items-that-are-collapsed, or special definition for their max-size contribution)

I briefly thought this issue persisted in the current flexbox spec, and I filed https://github.com/w3c/csswg-drafts/issues/14039 to get that addressed -- but after filing, I noticed it does now call out "non-collapsed items" as the things to be considered during intrinsic sizing (in https://drafts.csswg.org/css-flexbox/#intrinsic-sizes ).

So: tl;dr, the test change makes sense and is aligned with the spec. :)

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/60572 for changes under testing/web-platform/tests

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e1613ad57e0a
https://hg.mozilla.org/mozilla-central/rev/0fb1ae1b6065
Fix interaction of gap and visibility: collapse in flex containers. r=dholbert,layout-reviewers,dshin

Comment 6

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/0fb1ae1b6065

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot