mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-04 23:30:20 +00:00
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:
parent
a87ae785fd
commit
522aa41667
Notes:
github-actions[bot]
2025-01-26 16:30:57 +00:00
Author: https://github.com/gmta
Commit: 522aa41667
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3367
3 changed files with 12 additions and 5 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -10,3 +10,6 @@
|
|||
<I id="d2">
|
||||
<B id="d1">
|
||||
---
|
||||
<DIV id="e2">
|
||||
<BODY>
|
||||
---
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue