layout: Disallow margins from collapsing through blocks with clearance

per CSS 2.1 § 8.3.1.

Fixes the test failure in #10458.
This commit is contained in:
Patrick Walton 2016-04-12 14:09:29 -07:00
parent e32455f7b8
commit a3fd226341
37 changed files with 223 additions and 94 deletions

View file

@ -51,4 +51,4 @@
<div class="class1"></div>
</div>
</body>
</html>
</html>

View file

@ -1,3 +0,0 @@
[Flexible-order.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[adjacent-floats-001.htm]
type: reftest
expected: FAIL

View file

@ -0,0 +1,4 @@
[bidi-010b.htm]
type: reftest
disabled: intermittent failure on reference, starting from PR #10458

View file

@ -1,3 +0,0 @@
[border-right-color-175.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[c414-flt-fit-002.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[c414-flt-fit-003.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[c414-flt-fit-004.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[c414-flt-fit-005.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[c414-flt-fit-006.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-002.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-004.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-005.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-006.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-007.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-008.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[clear-float-009.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[float-006.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[float-applies-to-009.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[float-applies-to-012.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[float-non-replaced-height-001.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[floats-003.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[floats-004.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[floats-123.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[floats-141.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[floats-144.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +1,3 @@
[floats-145.htm]
type: reftest
expected: FAIL
disabled: depends on unspecified line-height behavior, see PR #10458

View file

@ -1,3 +0,0 @@
[floats-146.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[position-absolute-007.htm]
type: reftest
expected: FAIL

View file

@ -1571,6 +1571,30 @@
"url": "/_mozilla/css/floated_table_with_margin_a.html"
}
],
"css/floats_margin_collapse_a.html": [
{
"path": "css/floats_margin_collapse_a.html",
"references": [
[
"/_mozilla/css/floats_margin_collapse_ref.html",
"=="
]
],
"url": "/_mozilla/css/floats_margin_collapse_a.html"
}
],
"css/floats_margin_collapse_with_clearance_a.html": [
{
"path": "css/floats_margin_collapse_with_clearance_a.html",
"references": [
[
"/_mozilla/css/floats_margin_collapse_with_clearance_ref.html",
"=="
]
],
"url": "/_mozilla/css/floats_margin_collapse_with_clearance_a.html"
}
],
"css/focus_selector.html": [
{
"path": "css/focus_selector.html",
@ -8161,6 +8185,30 @@
"url": "/_mozilla/css/floated_table_with_margin_a.html"
}
],
"css/floats_margin_collapse_a.html": [
{
"path": "css/floats_margin_collapse_a.html",
"references": [
[
"/_mozilla/css/floats_margin_collapse_ref.html",
"=="
]
],
"url": "/_mozilla/css/floats_margin_collapse_a.html"
}
],
"css/floats_margin_collapse_with_clearance_a.html": [
{
"path": "css/floats_margin_collapse_with_clearance_a.html",
"references": [
[
"/_mozilla/css/floats_margin_collapse_with_clearance_ref.html",
"=="
]
],
"url": "/_mozilla/css/floats_margin_collapse_with_clearance_a.html"
}
],
"css/focus_selector.html": [
{
"path": "css/focus_selector.html",

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="floats_margin_collapse_ref.html">
<!--
From https://github.com/servo/servo/pull/10458:
https://drafts.csswg.org/css2/visuren.html#float-rules
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
#a is not "in the flow" since its a float, which makes #b the first in-flow child of <body>, which makes the top margins of <body> and #b "adjoining" (even if the former is zero) which makes them collapse.
So the quoted rule applies and theres an hypothetical block around #a. Since that blocks has no in-flow content, margins collapse through it.
Then I believe this rule applies:
https://drafts.csswg.org/css2/box.html#collapsed-through
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
The top border edge of <body> is below its top margin, which is collapsed with that of #b.
-->
<style>
html, body {
margin: 0;
}
div {
width: 32px;
height: 32px;
}
#a {
float: left;
background: green;
}
#b {
background: blue;
margin-top: 32px;
}
</style>
<div id=a></div>
<div id=b></div>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
}
div {
width: 32px;
height: 32px;
position: absolute;
left: 0;
}
#a {
top: 32px;
background: green;
}
</style>
<div id=a></div>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<link rel="match" href="floats_margin_collapse_with_clearance_ref.html">
<!--
From https://github.com/servo/servo/pull/10458:
https://drafts.csswg.org/css2/visuren.html#float-rules
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
#a is not "in the flow" since its a float, which makes #b the first in-flow child of <body>, which makes the top margins of <body> and #b "adjoining" (even if the former is zero) which makes them collapse.
So the quoted rule applies and theres an hypothetical block around #a. Since that blocks has no in-flow content, margins collapse through it.
Then I believe this rule applies:
https://drafts.csswg.org/css2/box.html#collapsed-through
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
The top border edge of <body> is below its top margin, which is collapsed with that of #b.
-->
<style>
html, body {
margin: 0;
}
div {
width: 32px;
height: 32px;
}
#a {
float: left;
background: green;
}
#b {
background: blue;
margin-top: 32px;
clear: left;
}
</style>
<div id=a></div>
<div id=b></div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
}
div {
width: 32px;
height: 32px;
position: absolute;
left: 0;
}
#a {
background: green;
top: 0;
}
#b {
background: blue;
top: 32px;
}
</style>
<div id=a></div>
<div id=b></div>