Bug 239976 – WebKit pushes down auto-width BFC alongside float, if the BFC has any negative margin at all

• Status: NEW
• Component: Layout and Rendering

[Daniel Holbert]

Created attachment 458698 [details]
testcase 1

STR:
1. Load attached testcase.

EXPECTED RESULTS:
The three sections should all have the same layout.

ACTUAL RESULTS:
In the lower two sections (the ones with a small negative margin), the aqua BFC gets pushed (i.e. cleared/wrapped) down below the fuchsia float.

Firefox and Chrome (Gecko/Blink) give EXPECTED RESULTS.
Safari (WebKit) gives ACTUAL RESULTS.


Note that there's a lot of subtlety and spec ambiguity in this area.  I do think it makes sense for sufficiently-large negative margins to cause content to wrap -- specifically if those margins are negative enough to "prop up" the border-box to be larger than the available space.  See https://bugzilla.mozilla.org/show_bug.cgi?id=1745310#c9 for more thoughts on this.  (I'm implementing this behavior in Gecko over there.)

In this particular attached testcase, though, with -5px margins (or even -1px margins), WebKit wraps even though there's no reason to do so that I can see.  And WebKit is alone in this behavior, so I'm tentatively filing this as a WebKit bug.

[Radar WebKit Bug Importer]

<rdar://problem/92978014>

[Ahmad Saleem]

@Alan - do you think this will help in above case?

https://github.com/WebKit/WebKit/commit/c80dcb41f40298f9d1251e3773cda13fe5f3c910

I think it will resolve this negative margin case and we should just mark it close but I am happy to wait till it ships in Safari Technology Preview and test it.

[zalan]

(In reply to Ahmad Saleem from comment #2)
> @Alan - do you think this will help in above case?
> 
> https://github.com/WebKit/WebKit/commit/
> c80dcb41f40298f9d1251e3773cda13fe5f3c910
> 
> I think it will resolve this negative margin case and we should just mark it
> close but I am happy to wait till it ships in Safari Technology Preview and
> test it.
It still looks broken after 256132@main.