Skip to content

layout: Let floats know that margins can collapse thru phantom lines #57116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Loirooriol merged 1 commit into from
Jan 14, 2026
Merged

layout: Let floats know that margins can collapse thru phantom lines #57116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions css/CSS2/floats/float-after-block-with-collapsed-margin-inside-inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>CSS Test: A float after a block which collapses its top margin with its grandparent, where the parent is an inline box</title>
<link rel="author" href="mailto:[email protected]" title="Oriol Brufau">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#inline-formatting">
<link rel="help" href="https://github.com/servo/servo/issues/41734">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">

<style>
span > div {
width: 200px;
height: 100px;
background: green;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div style="overflow: hidden">
<!-- This is just to avoid collapsing margins with the <p>. -->
</div>

<div style="width: 200px; height: 200px; margin-top: -100px; background: red">
<span>
<div style="margin-top: 100px"></div>
<div style="float: left"></div>
</span>
</div>
29 changes: 29 additions & 0 deletions css/CSS2/floats/new-fc-separates-from-float-4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>A new formatting context that doesn't fit beside a float make the float non-adjoining</title>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<link rel="author" title="Oriol Brufau" href="[email protected]">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
<link rel="help" href="https://github.com/servo/servo/issues/41794">
<meta name="assert" content="
Although the 'clear' property isn't specified in this test, a new formatting context
that doesn't fit below a float that would otherwise be adjoining will need to separate
its margin from the float, so that it doesn't affect the float.
This is very similar to clearance.

This test is the same as new-fc-separates-from-float.html, but adding an empty <span>
between the float and the block that establishes the new formatting context.
Margins can't typically collapse through line boxes, but here the line is phantom,
so they can.
">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="overflow:hidden; width:200px; background:red;">
<div>
<div>
<div style="float:left; width:200px; height:200px; background:green;"></div>
</div>
<span></span>
<div style="margin-top:200px; overflow:hidden; width:200px; height:1px; background:white;"></div>
</div>
</div>