mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-21 16:58:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Hit test StackingContext's children before testing visibility
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
If a node that establishes a StackingContext has `pointer-events: none`,
hit testing should first proceed with hit testing the SC's children
before deciding to bail. We were checking for `pointer-events` too
early, causing large parts of certain websites to be noninteractive.

Fixes #6017.
This commit is contained in:
Jelle Raaijmakers 2025-08-29 00:44:48 +02:00 • committed by Andreas Kling
commit 054b4dace0
Notes: github-actions[bot] 2025-08-28 23:26:04 +00:00
3 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -384,9 +384,6 @@ void StackingContext::paint(DisplayListRecordingContext& context) const
TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType type, Function<TraversalDecision(HitTestResult)> const& callback) const
{
if (!paintable_box().visible_for_hit_testing())
return TraversalDecision::Continue;
auto const inverse_transform = affine_transform_matrix().inverse().value_or({});
auto const transform_origin = paintable_box().transform_origin();
// NOTE: This CSSPixels -> Float -> CSSPixels conversion is because we can't AffineTransform::map() a CSSPixelPoint.
@ -455,6 +452,9 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
return TraversalDecision::Break;
}
if (!paintable_box().visible_for_hit_testing())
return TraversalDecision::Continue;
auto const enclosing_scroll_offset = paintable_box().cumulative_offset_of_enclosing_scroll_frame();
auto const raw_position_adjusted_by_scroll_offset = position.translated(-enclosing_scroll_offset);
// NOTE: This CSSPixels -> Float -> CSSPixels conversion is because we can't AffineTransform::map() a CSSPixelPoint.

3
Tests/LibWeb/Text/expected/hit_testing/pointer-events.txt
View file

@ -16,3 +16,6 @@
<A id="f1">
<BODY>
---
<#text>
<A id="g2">
---

21
Tests/LibWeb/Text/input/hit_testing/pointer-events.html
View file

@ -27,21 +27,26 @@
<!-- #f1 must be hit instead of #f2 -->
<a id="f1"><img id="f2" style="height: 30px; width: 30px; pointer-events: none"></a>
<!-- div is positioned and creates its own stacking context, #g2 must be hit -->
<div id="g1" style="pointer-events: none; position: relative; z-index: 0"><a id="g2" style="pointer-events: auto">ladybird</a></div>
</body>
<script>
test(() => {
const printHit = (x, y) => {
const hit = internals.hitTest(x, y);
const printHit = (element, x, y) => {
const rect = element.getBoundingClientRect();
const hit = internals.hitTest(rect.x + x, rect.y + y);
printElement(hit.node);
printElement(hit.node.parentNode);
println('---');
};
printHit(a1.offsetLeft + 50, a1.offsetTop + 50);
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);
printHit(f1.offsetLeft + 15, f1.offsetTop + 15);
printHit(a1, 50, 50);
printHit(b1, 50, 50);
printHit(c2, 50, 50);
printHit(d4, 10, 8);
printHit(e1, 50, 50);
printHit(f1, 15, 15);
printHit(g1, 5, 5);
});
</script>