Skip to content

Commit 499bf36

Browse files
mstenshochromium-wpt-export-bot
mstensho
authored and
chromium-wpt-export-bot
committed
[LayoutNG] Improve support for negative clearance.
When there are adjoining floats that need to be separated from a cleared block, clearance is predetermined, and we have to force it on the block. Any large top margin on the child will just be eaten by negative clearance. There's nothing that can be done to prevent clearance in such cases. So make sure that we don't try to determine whether to apply clearance or not based on the clearance offset set in the constraint space. When clearance has been predetermined (which may have triggered a BFC offset resolution and what not), refusing to apply it to the child is a bug. This aligns the implementation with the "alternative" way of calculating clearance in the spec [1]. Everyone but Edge does this. I think what Edge does here is problematic, because it requires us to use a hypothetical position that was calculated before clearance got applied (clearance causes margins that would otherwise collapse to be separated). We'd end up using a hypothetical position not based on the actual layout situation.[2] [1] https://www.w3.org/TR/CSS22/visuren.html#flow-control [2] w3c/csswg-drafts#2608 This fixes one existing test. Added a few new ones as well. Not all of them failed prior to this CL, but they serve as regression tests for things I found to lack coverage while working on this. Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng Change-Id: Ia45e9048c75c338477eee4923ff16eea3245bc6a Reviewed-on: https://chromium-review.googlesource.com/1061470 Commit-Queue: Morten Stenshorne <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/master@{#560208}
1 parent 30f00b7 commit 499bf36

4 files changed

+52
-0
lines changed

‎css/CSS2/floats-clear/adjoining-float-before-clearance.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<title>Float that would be adjoining if there were no clearance</title>
3+
<meta name="assert" content="If the clearance candidate would pull a float down with it (due to margin collapsing) if there were no clearance, clearance needs to be inserted to separate the two, so that the block can go past the float. No matter how large the margin is, it should still be just below the float.">
4+
<link rel="author" title="Morten Stenshorne" href="[email protected]">
5+
<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">
6+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
7+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
8+
<div style="width:100px; background:red;">
9+
<div>
10+
<div style="float:left; width:100px; height:50px; background:green;"></div>
11+
</div>
12+
<div style="margin-top:400px; clear:left; height:50px; background:green;"></div>
13+
</div>

‎css/CSS2/floats-clear/clear-with-top-margin-after-cleared-empty-block.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<title>Clearance on empty block followed by block with large margin and 'clear'</title>
3+
<link rel="author" title="Morten Stenshorne" href="[email protected]">
4+
<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">
5+
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
7+
<p>Test passes if there is a filled green square.</p>
8+
<div style="position:relative; width:100px; border-top:1px solid white; top:-21px; z-index:-1; background:green;">
9+
<div style="float:left; width:100px; height:20px; background:white;"></div>
10+
<div style="clear:both;"></div>
11+
<div style="clear:both; margin-top:100px; height:20px; background:white;"></div>
12+
</div>

‎css/CSS2/floats-clear/negative-clearance-after-adjoining-float.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<title>Negative clearance between adjoining float and child with top margin</title>
3+
<link rel="author" title="Morten Stenshorne" href="[email protected]">
4+
<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">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
7+
<div style="width:100px; background:red;">
8+
<div style="float:left; width:100px; height:50px; background:green;"></div>
9+
<div style="clear:left; margin-top:200px;"></div>
10+
</div>
11+
<div style="width:100px; height:50px; background:green;"></div>

‎css/CSS2/floats-clear/negative-clearance-after-bottom-margin.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>Negative clearance between bottom margin and cleared child with top margin</title>
3+
<link rel="author" title="Morten Stenshorne" href="[email protected]">
4+
<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">
5+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
6+
<p>Test passes if there is a filled green square.</p>
7+
<div style="position:relative; top:-50px; z-index:-1;">
8+
<div style="float:left; width:50px; height:50px; border-top:50px solid white; background:green;"></div>
9+
<div style="padding-top:1px;">
10+
<div style="width:100px; background:green;">
11+
<div style="margin-bottom:49px;"></div>
12+
<div style="clear:left; margin-top:98px;"></div>
13+
</div>
14+
<div style="width:100px; height:50px; background:green;"></div>
15+
</div>
16+
</div>

0 commit comments

Comments
 (0)