Bug 1457476 [wpt PR 10685] - Add tests for floats next to new formatting contexts., a=testonly

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
This commit is contained in:
Morten Stenshorne 2018-05-01 16:06:24 +00:00 committed by James Graham
parent 287a1b3fad
commit 27679e224f
3 changed files with 64 additions and 0 deletions

View File

@ -49587,6 +49587,30 @@
{}
]
],
"css/CSS2/floats/new-fc-beside-adjoining-float.html": [
[
"/css/CSS2/floats/new-fc-beside-adjoining-float.html",
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"css/CSS2/floats/new-fc-separates-from-float.html": [
[
"/css/CSS2/floats/new-fc-separates-from-float.html",
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"css/CSS2/floats/zero-width-floats.html": [
[
"/css/CSS2/floats/zero-width-floats.html",
@ -448000,6 +448024,14 @@
"7287e2ce42cab8fda1f63e97c98b664f0b49e9fb",
"reftest"
],
"css/CSS2/floats/new-fc-beside-adjoining-float.html": [
"f378062671d9de538e54c7dba552c2deab57baa4",
"reftest"
],
"css/CSS2/floats/new-fc-separates-from-float.html": [
"357427f1d71d7137c1ba4c386ae25acc7712928e",
"reftest"
],
"css/CSS2/floats/zero-space-between-floats-001.html": [
"59cd6c4ac06a611570a3ec21bac7289345b184f7",
"testharness"

View File

@ -0,0 +1,16 @@
<!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>

View File

@ -0,0 +1,16 @@
<!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>