LibWeb: Honor pointer-events for PaintableBox in own stacking context

If a block element with its own stacking context has `pointer-events:
none` set, it should be ignored as far as hit-testing goes.

Fixes #3357.
This commit is contained in:
Jelle Raaijmakers 2025-01-25 22:41:21 +01:00 committed by Alexander Kalenik
commit 522aa41667
Notes: github-actions[bot] 2025-01-26 16:30:57 +00:00
3 changed files with 12 additions and 5 deletions

View file

@ -443,13 +443,12 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
CSSPixelPoint enclosing_scroll_offset = paintable_box().cumulative_offset_of_enclosing_scroll_frame();
auto position_adjusted_by_scroll_offset = transformed_position;
position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_offset);
auto position_adjusted_by_scroll_offset = transformed_position.translated(-enclosing_scroll_offset);
// 1. the background and borders of the element forming the stacking context.
if (paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y())) {
auto hit_test_result = HitTestResult { .paintable = const_cast<PaintableBox&>(paintable_box()) };
if (callback(hit_test_result) == TraversalDecision::Break)
if (paintable_box().visible_for_hit_testing()
&& paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset)) {
if (callback({ const_cast<PaintableBox&>(paintable_box()) }) == TraversalDecision::Break)
return TraversalDecision::Break;
}

View file

@ -10,3 +10,6 @@
<I id="d2">
<B id="d1">
---
<DIV id="e2">
<BODY>
---

View file

@ -19,6 +19,10 @@
<!-- a pointer event on #d4 should hit #d2 instead -->
<b id="d1">foo<i id="d2"><div id="d3">bar</div>baz<u id="d4" style="pointer-events: none">lorem</u></i></b>
<!-- div creates its own stacking context, #e2 must be hit instead of crashing -->
<div id="e1" style="position: fixed; width: 100px; height: 100px; pointer-events: none; background-color: red"></div>
<div id="e2" style="width: 100px; height: 100px; background-color: green"></div>
</body>
<script>
test(() => {
@ -33,5 +37,6 @@
printHit(b1.offsetLeft + 50, b1.offsetTop + 50);
printHit(c1.offsetLeft + 50, c1.offsetTop + 50);
printHit(d4.offsetLeft + 10, d4.offsetTop + 8);
printHit(e1.offsetLeft + 50, e1.offsetTop + 50);
});
</script>