1788537 - Use "safe" centering (and "safe" -webkit-box-pack:end alignment) in -webkit-box flexbox emulation

Status: ASSIGNED

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

We emulate -webkit-box using our same modern flexbox implementation with a few behavioral tweaks.

Just ran up against one place where we need one more behavioral tweak... in modern flexbox (and in our emulation of -webkit-box), we do "true" center- and end-alignment. (i.e. if the content is too large, it overflows off of the start side of the container in order to truly center or end-align)

But it seems Chrome and presumably also WebKit do "safe" alignment[1], i.e. they refuse to overflow the start edge and effectively fall back to start alignment if the content is larger than the container.

We should be able to match this with some special cases.

[1] with one exception, -webkit-box-align:end does "true" end alignment and overflows off of the start (top) of the container.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1: "center" alignment in both axes

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: "end" alignment in both axes

Comment 3

[Daniel Holbert [:dholbert]]

Firefox faithfully centers/end-aligns the content in both testcases (with the large orange box overflowing off the top/left side of its container to do so).

Chromium and WebKit fall back to "start" alignment for the large orange box here, except that for -webkit-box-align:end they really do end-align and overflow off the top of the box.

Given that this is a legacy compat feature, their behavior is by-definition the EXPECTED RESULTS here.

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #3)

Chromium and WebKit fall back to "start" alignment for the large orange box here, except that for -webkit-box-align:end they really do end-align and overflow off the top of the box.

(fortunately this behavior & the one exception for -webkit-box-align:end seem to hold up if I add -webkit-box-orient:vertical or a vertical writing mode to the attached testcases. The behavior stays the same -- falling back to "safe" alignment except for -webkit-box-align: end; which gets truly end-aligned)

Comment 5

[James Graham [:jgraham]]

AFAICT the original site is fixed here, so I don't think we have any current known site breakage associated with this issue.