Expand the block size of the root flow's margin box to the viewport size instead of expanding the block size of its border box.

components/layout/block.rs

@@ -696,7 +696,8 @@ impl BlockFlow {
     ///
     /// TODO(#2017, pcwalton): This is somewhat inefficient (traverses kids twice); can we do
     /// better?
-    fn adjust_fragments_for_collapsed_margins_if_root(&mut self) {
+    fn adjust_fragments_for_collapsed_margins_if_root<'a>(&mut self,
+                                                          layout_context: &'a LayoutContext<'a>) {
         if !self.is_root() {
             return
         }
@@ -720,10 +721,19 @@ impl BlockFlow {
             }
         }
 
-        self.base.position.size.block = self.base.position.size.block + block_start_margin_value +
-            block_end_margin_value;
-        self.fragment.border_box.size.block = self.fragment.border_box.size.block + block_start_margin_value +
-            block_end_margin_value;
+        // FIXME(#2003, pcwalton): The max is taken here so that you can scroll the page, but this
+        // is not correct behavior according to CSS 2.1 § 10.5. Instead I think we should treat the
+        // root element as having `overflow: scroll` and use the layers-based scrolling
+        // infrastructure to make it scrollable.
+        let viewport_size =
+            LogicalSize::from_physical(self.fragment.style.writing_mode,
+                                       layout_context.shared_context().viewport_size);
+        let block_size = max(viewport_size.block,
+                             self.fragment.border_box.size.block + block_start_margin_value +
+                             block_end_margin_value);
+
+        self.base.position.size.block = block_size;
+        self.fragment.border_box.size.block = block_size;
     }
 
     /// Assign block-size for current flow.
@@ -882,18 +892,8 @@ impl BlockFlow {
             self.base.collapsible_margins = collapsible_margins;
             translate_including_floats(&mut cur_b, delta, &mut floats);
 
-            // FIXME(#2003, pcwalton): The max is taken here so that you can scroll the page, but
-            // this is not correct behavior according to CSS 2.1 § 10.5. Instead I think we should
-            // treat the root element as having `overflow: scroll` and use the layers-based
-            // scrolling infrastructure to make it scrollable.
             let mut block_size = cur_b - block_start_offset;
             let is_root = self.is_root();
-            if is_root {
-                let viewport_size =
-                    LogicalSize::from_physical(self.fragment.style.writing_mode,
-                                               layout_context.shared_context().viewport_size);
-                block_size = max(viewport_size.block, block_size)
-            }
 
             if is_root || self.formatting_context_type() != FormattingContextType::None ||
                     self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
@@ -903,6 +903,17 @@ impl BlockFlow {
             }
 
             if self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
+                // FIXME(#2003, pcwalton): The max is taken here so that you can scroll the page,
+                // but this is not correct behavior according to CSS 2.1 § 10.5. Instead I think we
+                // should treat the root element as having `overflow: scroll` and use the layers-
+                // based scrolling infrastructure to make it scrollable.
+                if is_root {
+                    let viewport_size =
+                        LogicalSize::from_physical(self.fragment.style.writing_mode,
+                                                   layout_context.shared_context().viewport_size);
+                    block_size = max(viewport_size.block, block_size)
+                }
+
                 // Store the content block-size for use in calculating the absolute flow's
                 // dimensions later.
                 //
@@ -957,7 +968,7 @@ impl BlockFlow {
             // Store the current set of floats in the flow so that flows that come later in the
             // document can access them.
             self.base.floats = floats.clone();
-            self.adjust_fragments_for_collapsed_margins_if_root();
+            self.adjust_fragments_for_collapsed_margins_if_root(layout_context);
         } else {
             // We don't need to reflow, but we still need to perform in-order traversals if
             // necessary.

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4044,6 +4044,18 @@
             "url": "/_mozilla/css/root_margin_collapse_a.html"
           }
         ],
+        "css/root_margins_a.html": [
+          {
+            "path": "css/root_margins_a.html",
+            "references": [
+              [
+                "/_mozilla/css/root_margins_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/root_margins_a.html"
+          }
+        ],
         "css/root_pseudo_a.html": [
           {
             "path": "css/root_pseudo_a.html",
@@ -10136,6 +10148,18 @@
           "url": "/_mozilla/css/root_margin_collapse_a.html"
         }
       ],
+      "css/root_margins_a.html": [
+        {
+          "path": "css/root_margins_a.html",
+          "references": [
+            [
+              "/_mozilla/css/root_margins_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/root_margins_a.html"
+        }
+      ],
       "css/root_pseudo_a.html": [
         {
           "path": "css/root_pseudo_a.html",

tests/wpt/mozilla/tests/css/root_margins_a.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="root_margins_ref.html">
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: steelblue;
+    bottom: 0;
+    left: 0;
+}
+</style>
+<div>
+

tests/wpt/mozilla/tests/css/root_margins_ref.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+html, body {
+    margin: 0;
+}
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: steelblue;
+    bottom: 0;
+    left: 0;
+}
+</style>
+<div>
+