Auto merge of #22839 - jdm:overflow-hit-test-fix, r=pcwalton

Ensure transparent hit test region is sized and positioned correctly.

This addresses some edge cases that were missed by #22156. Specifically, in some cases the transparent region was being placed in the display list in front of the scrollable content, rather than behind it, and the size of the region did not account for parent stacking context.

---
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #22073 and fix #22216.
- [x] There are tests for these changes

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/22839)
<!-- Reviewable:end -->

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 base = state.create_base_display_item(
+            let content_size = TypedRect::new(stacking_relative_border_box.origin, content_size);
+            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>