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

LibWeb: Reorder paintable hit-testing to account for pointer-events

Browse source 
Instead of ignoring any paintable immediately when they're invisible to
hit-testing, consider every candidate and while the most specific
candidate is invisible to hit-testing, traverse up to its parent
paintable.

This more closely reflects the behavior expected when wrapping block
elements inside inline elements, where although the block element might
have `pointer-events: none`, it still becomes part of the hit-test body
of the inline parent.

This makes the following link work as expected:

  <a href="https://ladybird.org">
    <div style="pointer-events: none">Ladybird</div>
  </a>
This commit is contained in:
Jelle Raaijmakers 2025-01-21 15:24:46 +01:00 • committed by Jelle Raaijmakers
commit b7a554d1f2
Notes: github-actions[bot] 2025-01-23 08:34:09 +00:00
4 changed files with 76 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,37 @@
<script src="../include.js"></script>
<body>
<!-- #a2 should be invisible to hit testing -->
<div id="a1">
<div id="a2" style="width: 100px; height: 100px; pointer-events: none"></div>
</div>
<!-- #b3 should be visible to hit testing -->
<div id="b1">
<div id="b2" style="width: 100px; height: 100px; pointer-events: none">
<div id="b3" style="width: 100px; height: 100px; pointer-events: auto"></div>
</div>
</div>
<!-- #c1 should be hit, even though it is an inline element surrounding a block element -->
<a id="c1">
<div id="c2" style="width: 100px; height: 100px; pointer-events: none"></div>
</a>
<!-- 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>
</body>
<script>
test(() => {
const printHit = (x, y) => {
const hit = internals.hitTest(x, 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);
});
</script>