layout: Disallow margins from collapsing through block formatting

contexts per CSS 2.1 § 8.3.1. Closes servo#10449.
pcwalton · Apr 15, 2016 · f699315 · f699315
1 parent a3fd226
commit f699315
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 4 deletions.
diff --git a/components/layout/block.rs b/components/layout/block.rs
@@ -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());

diff --git a/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-009.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/margin-collapse-009.htm.ini
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -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",

diff --git a/tests/wpt/mozilla/tests/css/block_formatting_context_margin_collapse_a.html b/tests/wpt/mozilla/tests/css/block_formatting_context_margin_collapse_a.html
@@ -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>
+
diff --git a/tests/wpt/mozilla/tests/css/block_formatting_context_margin_collapse_ref.html b/tests/wpt/mozilla/tests/css/block_formatting_context_margin_collapse_ref.html
@@ -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>
+
+