Fix various issues with overflow clipping

When dealing absolutely positioned items, we should use clip of our
containing block, even if our containing block doesn't itself establish
a new overflow clip. Additionally, we need to properly handle
assigning scroll root ids to fragments of inline elements.

We add a test for this behavior.

components/layout/display_list_builder.rs

@@ -92,6 +92,13 @@ fn convert_repeat_mode(from: RepeatKeyword) -> RepeatMode {
     }
 }
 
+fn establishes_containing_block_for_absolute(positioning: position::T) -> bool {
+    match positioning {
+        position::T::absolute | position::T::relative | position::T::fixed => true,
+        _ => false,
+    }
+}
+
 trait RgbColor {
     fn rgb(r: u8, g: u8, b: u8) -> Self;
 }
@@ -1953,6 +1960,10 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
         // we don't want it to be clipped by its own scroll root.
         let containing_scroll_root_id = self.setup_scroll_root_for_block(state);
 
+        if establishes_containing_block_for_absolute(self.positioning()) {
+            state.containing_block_scroll_root_id = state.current_scroll_root_id;
+        }
+
         match block_stacking_context_type {
             BlockStackingContextType::NonstackingContext => {
                 self.base.collect_stacking_contexts_for_children(state);
@@ -2038,12 +2049,6 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
         self.base.scroll_root_id = new_scroll_root_id;
         state.current_scroll_root_id = new_scroll_root_id;
 
-        match self.positioning() {
-            position::T::absolute | position::T::relative | position::T::fixed =>
-                state.containing_block_scroll_root_id = new_scroll_root_id,
-            _ => {}
-        }
-
         containing_scroll_root_id
     }
 
@@ -2153,6 +2158,11 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
         self.base.scroll_root_id = state.current_scroll_root_id;
 
         for mut fragment in self.fragments.fragments.iter_mut() {
+            let previous_containing_block_scroll_root_id = state.containing_block_scroll_root_id;
+            if establishes_containing_block_for_absolute(fragment.style.get_box().position) {
+                state.containing_block_scroll_root_id = state.current_scroll_root_id;
+            }
+
             match fragment.specific {
                 SpecificFragmentInfo::InlineBlock(ref mut block_flow) => {
                     let block_flow = FlowRef::deref_mut(&mut block_flow.flow_ref);
@@ -2162,6 +2172,10 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
                     let block_flow = FlowRef::deref_mut(&mut block_flow.flow_ref);
                     block_flow.collect_stacking_contexts(state);
                 }
+                SpecificFragmentInfo::InlineAbsolute(ref mut block_flow) => {
+                    let block_flow = FlowRef::deref_mut(&mut block_flow.flow_ref);
+                    block_flow.collect_stacking_contexts(state);
+                }
                 _ if fragment.establishes_stacking_context() => {
                     fragment.stacking_context_id =
                         StackingContextId::new_of_type(fragment.fragment_id(),
@@ -2178,6 +2192,7 @@ impl InlineFlowDisplayListBuilding for InlineFlow {
                 }
                 _ => fragment.stacking_context_id = state.current_stacking_context_id,
             }
+            state.containing_block_scroll_root_id = previous_containing_block_scroll_root_id;
         }
     }
 

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4127,6 +4127,18 @@
      {}
     ]
    ],
+   "css/overflow_clipping.html": [
+    [
+     "/_mozilla/css/overflow_clipping.html",
+     [
+      [
+       "/_mozilla/css/overflow_clipping_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/overflow_position_abs_inline_block.html": [
     [
      "/_mozilla/css/overflow_position_abs_inline_block.html",
@@ -8483,6 +8495,11 @@
      {}
     ]
    ],
+   "css/overflow_clipping_ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/overflow_position_abs_inline_block_ref.html": [
     [
      {}
@@ -22795,6 +22812,14 @@
    "3798d0efb1b9858ad47ecf6f09357c3c0dae1b80",
    "support"
   ],
+  "css/overflow_clipping.html": [
+   "f87d3c74c15393fb490e3855c88f6331fce9e077",
+   "reftest"
+  ],
+  "css/overflow_clipping_ref.html": [
+   "d9a6a3b4fa21742d0f4ddd3f348534ec35ab8579",
+   "support"
+  ],
   "css/overflow_position_abs_inline_block.html": [
    "7550f9c9f3e91635c15554d9ae21e172944054e6",
    "reftest"

tests/wpt/mozilla/tests/css/overflow_clipping.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel='match' href='overflow_clipping_ref.html'>
+        <style>
+            .test { float: left; margin-right: 25px; }
+            .box { height: 50px; width: 50px; }
+            .grayer { background: rgb(80, 80, 80); }
+            .grayest { background: rgb(0, 0, 0); }
+
+            .overflowing-absolute-child {
+                position: absolute;
+                left: 10px;
+                top: 10px;
+                width: 200px;
+                height: 200px;
+            }
+        </style>
+    </head>
+    <body>
+
+        <div class="test grayest box" style="overflow: scroll">
+            <div style="position: relative;">
+                <div class="overflowing-absolute-child grayer"></div>
+            </div>
+        </div>
+
+        <!-- This box is positioned and sized very strangely because of
+             https://github.com/servo/servo/issues/16462. For now we diable
+             this test until the bug is fixed.
+        <div class="test grayest box" style="overflow: scroll">
+            <span style="position: relative;">
+                <div class="overflowing-absolute-child grayer"></div>
+            </span>
+        </div>
+        -->
+
+    </body>
+</html>

tests/wpt/mozilla/tests/css/overflow_clipping_ref.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .test { float: left; margin-right: 25px; }
+            .box { height: 50px; width: 50px; }
+            .smallbox { height: 40px; width: 40px; }
+            .grayer { background: rgb(80, 80, 80); }
+            .grayest { background: rgb(0, 0, 0); }
+        </style>
+    </head>
+
+    <body>
+        <div class="test grayest box">
+            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
+        </div>
+
+        <!-- This box is positioned and sized very strangely because of
+             https://github.com/servo/servo/issues/16462. For now we diable
+             this test until the bug is fixed.
+        <div class="test grayest box">
+            <div class="grayer smallbox" style="margin-left: 10px; margin-top: 25px; height: 25px;"></div>
+        </div>
+        -->
+    </body>
+</html>