Ensure transparent hit test region is sized and positioned correctly.

components/layout/display_list/builder.rs

@@ -390,7 +390,25 @@ impl<'a> DisplayListBuildState<'a> {
         } else {
             self.current_clipping_and_scrolling
         };
+        self.create_base_display_item_with_clipping_and_scrolling(
+            bounds,
+            clip_rect,
+            node,
+            cursor,
+            section,
+            clipping_and_scrolling,
+        )
+    }
 
+    fn create_base_display_item_with_clipping_and_scrolling(
+        &self,
+        bounds: Rect<Au>,
+        clip_rect: Rect<Au>,
+        node: OpaqueNode,
+        cursor: Option<Cursor>,
+        section: DisplayListSection,
+        clipping_and_scrolling: ClippingAndScrolling,
+    ) -> BaseDisplayItem {
         BaseDisplayItem::new(
             bounds.to_layout(),
             DisplayItemMetadata {
@@ -1640,14 +1658,15 @@ impl Fragment {
             // of this fragment's background but behind its content. This ensures that any
             // hit tests inside the content box but not on actual content target the current
             // scrollable ancestor.
-            let content_size = TypedRect::from_size(content_size);
+            let content_size = TypedRect::new(stacking_relative_border_box.origin, content_size);
-            let base = state.create_base_display_item(
+            let base = state.create_base_display_item_with_clipping_and_scrolling(
                 content_size,
                 content_size,
                 self.node,
                 // FIXME(emilio): Why does this ignore pointer-events?
                 get_cursor(&self.style, Cursor::Default).or(Some(Cursor::Default)),
-                DisplayListSection::Content,
+                display_list_section,
+                state.current_clipping_and_scrolling,
             );
             state.add_display_item(DisplayItem::Rectangle(CommonDisplayItem::new(
                 base,

tests/wpt/mozilla/meta/MANIFEST.json

@@ -12659,6 +12659,12 @@
      {}
     ]
    ],
+   "mozilla/hit-test-background.html": [
+    [
+     "/_mozilla/mozilla/hit-test-background.html",
+     {}
+    ]
+   ],
    "mozilla/hit_test_multiple_sc.html": [
     [
      "/_mozilla/mozilla/hit_test_multiple_sc.html",
@@ -19418,6 +19424,10 @@
    "9baa0cdcd5abad00b321e8b9351a1bc162783ed5",
    "support"
   ],
+  "mozilla/hit-test-background.html": [
+   "5212954e4ee6ecb684212e7373e24a2268434b1c",
+   "testharness"
+  ],
   "mozilla/hit_test_multiple_sc.html": [
    "1c79d25ea06f80eb515282fb0a53a34f92a25698",
    "testharness"

tests/wpt/mozilla/tests/mozilla/hit-test-background.html

@@ -0,0 +1,33 @@
+<title>Hit testing backgrounds of content should report the same element as the content</title>
+<style>
+  * {
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  }
+
+  .tiles {
+  background-color: red;
+  overflow: hidden;
+  }
+  .tile-image {
+  background-color: green;
+  border: 1px solid black;
+  height: 100px;
+  width: 160px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="bg" class="tiles">
+  <a id="anchor" href="about:blank">
+    <div id="tile" class="tile-image duckduckgo"></div>
+  </a>
+</div>
+<script>
+  var t = async_test();
+  onload = t.step_func_done(function() {
+    var tile = document.getElementById('tile');
+    assert_equals(document.elementFromPoint(10, 10), tile);
+  });
+</script>