WebKit thinks that a formatting context root stops fitting in a tiny space, when you give it a negative margin

• Component: Layout and Rendering
• Status: RESOLVED INVALID

[Daniel Holbert]

Created attachment 446248 [details]
testcase 1

STR:
1. Load attached testcase. (also available on jsfiddle: https://jsfiddle.net/dholbert/ujphfkqz/ )

EXPECTED RESULTS:
Case 1 and Case 2 inside of the testcase should look the same.

ACTUAL RESULTS:
In "Case 2", the "A B" text is pushed down, for no clear reason.

The only difference between Case 1 and Case 2 is: in Case 2, the "A B" element has a *negative margin*. So if anything, it should fit even better; there should be even less reason to push it down.


Chrome has the same bug, tracked in https://bugs.chromium.org/p/chromium/issues/detail?id=1141209 .

Firefox gives EXPECTED RESULTS.

[Daniel Holbert]

Created attachment 446249 [details]
testcase 2 (using display:flow-root instead of flex)

Note: testcase 1 used flexbox, but as discussed on the chromium bug report, this isn't specific to flexbox; you can reproduce it with 'display:flow-root' as well, for example.

Here's a version using 'display: flow-root'.

[Radar WebKit Bug Importer]

<rdar://problem/86189973>

[Daniel Holbert]

For reference, I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1745310 on the Firefox side, as a place to aggregate webcompat issues that we've run into as a result of this interop issue.

[Daniel Holbert]

I've done some more investigation and I actually think the WebKit/Blink behavior makes some sense here, per https://bugzilla.mozilla.org/show_bug.cgi?id=1745310#c9 .  And the web apparently depends on it (per the various WebCompat dupes over there).

So, we can close this one as INVALID. But while investigating that, I found a WebKit-specific version of this behavior that makes less sense and that I suspect the web does *not* depend on, and I filed that as:
https://bugs.webkit.org/show_bug.cgi?id=239976