Bug 240128 - WebKit improperly overlaps a BFC with a float, with certain margin values
Summary: WebKit improperly overlaps a BFC with a float, with certain margin values
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-05 10:57 PDT by Daniel Holbert
Modified: 2022-05-12 10:58 PDT (History)
4 users (show)

See Also:

Attachments
testcase 1 (445 bytes, text/html)
2022-05-05 10:57 PDT, Daniel Holbert 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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>