Blitz - WPT: new-fc-separates-from-float-4.html

wpt / css / CSS2 / floats / new-fc-separates-from-float-4.html

/css/CSS2/floats/new-fc-separates-from-float-4.html

<!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="mstensho@chromium.org">
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<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>

/css/reference/ref-filled-green-200px-square.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="jfernandez@igalia.com" />
<style>
div {
  background-color: green;
  height: 200px;
  width: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>