layout: Disallow margins from collapsing through block formatting

contexts per CSS 2.1 § 8.3.1.

Closes #10449.
This commit is contained in:
Patrick Walton 2016-04-07 10:47:31 -07:00
parent a3fd226341
commit f69931552b
5 changed files with 84 additions and 4 deletions

View file

@ -1751,7 +1751,7 @@ impl Flow for BlockFlow {
self.base.position.size.block = self.fragment.border_box.size.block;
}
None
} else if self.is_root() || self.base.flags.is_float() || self.is_inline_block() {
} else if self.is_root() || self.formatting_context_type() != FormattingContextType::None {
// Root element margins should never be collapsed according to CSS § 8.3.1.
debug!("assign_block_size: assigning block_size for root flow {:?}",
flow::base(self).debug_id());

View file

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

View file

@ -579,6 +579,18 @@
"url": "/_mozilla/css/block_formatting_context_float_placement_a.html"
}
],
"css/block_formatting_context_margin_collapse_a.html": [
{
"path": "css/block_formatting_context_margin_collapse_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_margin_collapse_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_margin_collapse_a.html"
}
],
"css/block_formatting_context_max_width_a.html": [
{
"path": "css/block_formatting_context_max_width_a.html",
@ -7193,6 +7205,18 @@
"url": "/_mozilla/css/block_formatting_context_float_placement_a.html"
}
],
"css/block_formatting_context_margin_collapse_a.html": [
{
"path": "css/block_formatting_context_margin_collapse_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_margin_collapse_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_margin_collapse_a.html"
}
],
"css/block_formatting_context_max_width_a.html": [
{
"path": "css/block_formatting_context_max_width_a.html",

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<link rel="match" href="block_formatting_context_margin_collapse_ref.html">
<style>
html, body {
margin: 0;
padding: 0;
}
main {
height: 300px;
width: 250px;
background-image: linear-gradient(to bottom, red, blue);
overflow: hidden;
background: blue;
}
div {
margin-top: 200px;
height: 200px;
width: 200px;
overflow: hidden;
background: green;
}
</style>
<main><div></div></main>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
main {
height: 300px;
width: 250px;
background-image: linear-gradient(to bottom, red, blue);
background: blue;
position: absolute;
top: 0;
left: 0;
}
div {
position: absolute;
top: 200px;
left: 0;
height: 100px;
width: 200px;
background: green;
}
</style>
<main><div></div></main>