1645644 - New wpt failures in /css/css-flexbox/position-absolute-013.html (incorrect alignment for static position of abspos child with `align-self:stretch` inside of `flex-wrap:wrap-reverse` flex container)

Status: RESOLVED DUPLICATE of bug 1543267

(Core :: Layout: Flexbox, defect)

Description

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

Syncing wpt PR 24137 found new untriaged test failures in CI

Tests Affected

Firefox-only failures

/css/css-flexbox/position-absolute-013.html
.flexbox 396: FAIL
.flexbox 393: FAIL
.flexbox 390: FAIL
.flexbox 399: FAIL
.flexbox 111: FAIL
.flexbox 114: FAIL
.flexbox 117: FAIL
.flexbox 144: FAIL
.flexbox 141: FAIL
.flexbox 387: FAIL
.flexbox 99: FAIL
.flexbox 429: FAIL
.flexbox 420: FAIL
.flexbox 423: FAIL
.flexbox 426: FAIL
.flexbox 108: FAIL
.flexbox 102: FAIL
.flexbox 105: FAIL
.flexbox 411: FAIL
.flexbox 414: FAIL
.flexbox 417: FAIL
.flexbox 432: FAIL
.flexbox 135: FAIL
.flexbox 132: FAIL
.flexbox 138: FAIL
.flexbox 405: FAIL
.flexbox 402: FAIL
.flexbox 408: FAIL
.flexbox 120: FAIL
.flexbox 123: FAIL
.flexbox 126: FAIL
.flexbox 129: FAIL

New Tests That Don't Pass

/css/css-flexbox/position-absolute-013.html
.flexbox 276: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 270: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 273: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 279: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 249: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 246: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 243: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 258: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 255: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 252: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 282: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 285: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 288: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 261: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 267: FAIL (Chrome: PASS, Safari: FAIL)
.flexbox 264: FAIL (Chrome: PASS, Safari: FAIL)

CI Results

Gecko CI (Treeherder)
GitHub PR Head

Notes

These updates will be on mozilla-central once bug 1645573 lands.

Note: this bug is for tracking fixing the issues and is not
owned by the wpt sync bot.

This bug is linked to the relevant tests by an annotation in
https://github.com/web-platform-tests/wpt-metadata. These annotations
can be edited using the wpt interop dashboard
https://jgraham.github.io/wptdash/

If this bug is split into multiple bugs, please also update the
annotations, otherwise we are unable to track which wpt issues are
already triaged. Resolving as duplicate or closing this issue should
be cause the bot to automatically update or remove the annotation.

Comment 1

[dgrogan (chrome)]

The only cases that FF fails are when align-items:stretch and flex-wrap:wrap-reverse are both in effect.

Aside: I'd wager there are many duplicated tests in css/css-flexbox/position-absolute-* and especially when accounting for css/vendor-imports/mozilla/mozilla-central-reftests/align3/flex*

Comment 2

[Daniel Holbert [:dholbert]]

Thanks, dgrogan!

Relevant snippet from test's source (from http://wpt.live/css/css-flexbox/position-absolute-013.html ), echoing dgrogan's note above:

// These expected values were harvested from Chrome 85. Firefox 78b6 agrees
// except when align-items:stretch and flex-wrap:wrap-reverse are both in
// effect.
// Chrome 83 and FF 78b6 agree with these values when the lone flex child is
// position:static instead of position:absolute. That is evidence that these
// values are all correct, because the position of a staticpos child is
// specified to be identical to the abspos position when there are no other
// children or specified offsets.

I think this is probably a real Firefox bug. Quick reduced testcase which I think is capturing the essence here: https://jsfiddle.net/h06dgp35/

In that testcase, I would expect that all three examples there should have the orange overflowing off the top (that's what happens in Chrome 83 stable, at least). In other words: stretch (which is the default value) should behave like flex-start, and aligning to the flex-start edge in this case means aligning to the bottom and overflowing off the top.

Spec reference:

• stretch definitely falls back to flex-start: https://drafts.csswg.org/css-align/#valdef-justify-self-stretch
• flex-start has a flex-axis-relative meaning inside of a flex container (including when determining static pos of abspos children, per https://drafts.csswg.org/css-align/#valdef-self-position-flex-start -- see the parenthetical note about "such as when determining the static position of an absolutely-positioned box that is a child of a flex container" there.)

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

The test now lives in https://wpt.live/css/css-flexbox/abspos/position-absolute-013.html.

My patch (Part 1) in bug 1543267 makes Firefox pass this test, so I'll resolve this as a duplicate.