new-fc-separates-from-float-4.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/CSS2/floats/new-fc-separates-from-float-4.html - WPT Dashboard Interop Dashboard

<!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>