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(); CSSPixelPoint enclosing_scroll_offset = paintable_box().cumulative_offset_of_enclosing_scroll_frame();
auto position_adjusted_by_scroll_offset = transformed_position; auto position_adjusted_by_scroll_offset = transformed_position.translated(-enclosing_scroll_offset);
position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_offset);
// 1. the background and borders of the element forming the stacking context. // 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())) { if (paintable_box().visible_for_hit_testing()
auto hit_test_result = HitTestResult { .paintable = const_cast<PaintableBox&>(paintable_box()) }; && paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset)) {
if (callback(hit_test_result) == TraversalDecision::Break) if (callback({ const_cast<PaintableBox&>(paintable_box()) }) == TraversalDecision::Break)
return TraversalDecision::Break; return TraversalDecision::Break;
} }

View file

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

View file

@ -19,6 +19,10 @@
<!-- a pointer event on #d4 should hit #d2 instead --> <!-- 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> <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> </body>
<script> <script>
test(() => { test(() => {
@ -33,5 +37,6 @@
printHit(b1.offsetLeft + 50, b1.offsetTop + 50); printHit(b1.offsetLeft + 50, b1.offsetTop + 50);
printHit(c1.offsetLeft + 50, c1.offsetTop + 50); printHit(c1.offsetLeft + 50, c1.offsetTop + 50);
printHit(d4.offsetLeft + 10, d4.offsetTop + 8); printHit(d4.offsetLeft + 10, d4.offsetTop + 8);
printHit(e1.offsetLeft + 50, e1.offsetTop + 50);
}); });
</script> </script>