gecko-dev/layout/reftests/floats/bfc-displace-3a.html
L. David Baron 119b557460 Bug 538194 patch 2 - Redo block reflow below floats when the height of a block that does not intersect floats pushes it into the way of other floats. r=roc
This adds an additional retry loop in block reflow that we can only
trigger when reflowing a block formatting context (replacedBlock
non-null).  It can retry in two different ways, either with a narrower
width but at the same vertical position (when
ReplacedBlockFitsInAvailSpace is still true) or at a new vertical
position (which is treated as a form of clearance).

Fortunately we don't have to worry about margins collapsing *through*
such a boundary since we're dealing with a new block formatting context.

Note that Chromium passes all of the new bfc-displace-* tests, although
it moves the block formating context down unnecessarily in
bfc-shrink-1.html (which we do neither before nor after the patch),
though agrees with the width we have after the patch (but not before the
patch).

--HG--
extra : commitid : FgDc4hjTxHp
2015-08-02 21:03:09 -07:00

44 lines
1.0 KiB
HTML

<!DOCTYPE HTML>
<title>Test of block formatting context displacement by floats</title>
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
<style>
.contain {
border: medium solid;
width: 400px;
height: 400px;
background: yellow;
}
.margin {
margin-top: 3px;
}
.float {
float: left;
clear: left;
height: 20px;
background: blue;
}
.bfc {
overflow: hidden;
width: 250px;
margin-top: 7px; /* collapses */
height: 20px; /* fits exactly */
margin-bottom: 20px;
background: fuchsia;
}
</style>
<div class="contain">
<div class="margin">
<div class="float" style="width: 100px"></div>
<div class="float" style="width: 200px"></div>
<div class="bfc"></div>
</div>
</div>