Bug 240128

Summary: WebKit improperly overlaps a BFC with a float, with certain margin values
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=1322774
https://bugs.webkit.org/show_bug.cgi?id=239976
Attachments:
Description Flags
testcase 1 none

Description Daniel Holbert 2022-05-05 10:57:10 PDT 
Created attachment 458892 [details]
testcase 1

STR:
1. Load attached testcase.

EXPECTED RESULTS:
The blue area and the fuchsia area should **not be overlapping**.

ACTUAL RESULTS:
The blue bordered area overlaps the fuchsia area.

There are various pieces of CSS Float layout that are vague or undefined, but one clear requirement is (emphasis added by me):
> The border box of [...] an element in the normal flow that establishes a new block formatting context [...] **must not overlap the margin box of any floats in the same block formatting context as the element itself.** If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

https://www.w3.org/TR/CSS21/visuren.html#floats

WebKit is violating this requirement here.

Chromium/Blink has the same bug, which is filed as https://bugs.chromium.org/p/chromium/issues/detail?id=1322774

Firefox gives EXPECTED RESULTS.
Comment 1 Radar WebKit Bug Importer 2022-05-12 10:58:12 PDT 
<rdar://problem/93187697>