Commit a0156dff authored by Morten Stenshorne's avatar Morten Stenshorne Committed by Commit Bot

Add tests for floats next to new formatting contexts.

Whether an in-flow block-level box that establishes a new formatting
context fits beside a float or not determines whether the float is
adjoining with the new formatting context box or not.

This matters if the box that establishes a new formatting context has a
top margin. If the float turns out to be adjoining, it's affected by
that margin, but not otherwise, i.e. if the new formatting context box
needs to go below the float due to insufficient available width.

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng
Change-Id: I66455845974cbcd5bef36927876512b05a15f435
Reviewed-on: https://chromium-review.googlesource.com/1032732Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554510}
parent 109eed41
<!DOCTYPE html>
<title>A new formatting context that fits beside an adjoining float, and thus pulls down the float with its top margin</title>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<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">
<meta name="assert" content="The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin">
<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:green;">
<div style="width:300px; margin-top:50px; background:red;">
<div>
<div style="float:left; width:200px; height:10px; background:green;"></div>
</div>
<div style="margin-top:190px; overflow:hidden; width:100px; height:10px; background:red;"></div>
</div>
</div>
<!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="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">
<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.">
<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>
<div style="margin-top:200px; overflow:hidden; width:200px; height:1px; background:white;"></div>
</div>
</div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment