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();
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,3 +10,6 @@
|
||||||
<I id="d2">
|
<I id="d2">
|
||||||
<B id="d1">
|
<B id="d1">
|
||||||
---
|
---
|
||||||
|
<DIV id="e2">
|
||||||
|
<BODY>
|
||||||
|
---
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue