Bug 239976

Summary: WebKit pushes down auto-width BFC alongside float, if the BFC has any negative margin at all
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, bfulgham, karl+webkit, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=240128
https://bugs.webkit.org/show_bug.cgi?id=274627
Attachments:
Description Flags
testcase 1 none

Description Daniel Holbert 2022-05-02 12:03:37 PDT 
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.
Comment 1 Radar WebKit Bug Importer 2022-05-09 12:04:13 PDT 
<rdar://problem/92978014>
Comment 2 Ahmad Saleem 2022-11-01 16:53:52 PDT 
@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.
Comment 3 zalan 2022-11-02 12:41:49 PDT 
(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.