mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
27679e224f
Automatic update from web-platform-testsAdd 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/1032732 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#554510} -- wpt-commits: ea89515a92d0580fc85e9cff8aa6895c9aa509f5 wpt-pr: 10685
16 lines
1.2 KiB
HTML
16 lines
1.2 KiB
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="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>
|