mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-07 00:29:15 +00:00
LibWeb: Ensure inert elements are not visible for hit testing
This commit is contained in:
parent
8547c1a743
commit
cb405c773b
Notes:
github-actions[bot]
2025-02-21 12:43:19 +00:00
Author: https://github.com/tcl3
Commit: cb405c773b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3475
Reviewed-by: https://github.com/AtkinsSJ ✅
4 changed files with 67 additions and 1 deletions
|
@ -83,6 +83,17 @@ CSS::ImmutableComputedValues const& Paintable::computed_values() const
|
||||||
return m_layout_node->computed_values();
|
return m_layout_node->computed_values();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bool Paintable::visible_for_hit_testing() const
|
||||||
|
{
|
||||||
|
// https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees
|
||||||
|
// When a node is inert:
|
||||||
|
// - Hit-testing must act as if the 'pointer-events' CSS property were set to 'none'.
|
||||||
|
if (auto dom_node = this->dom_node(); dom_node && dom_node->is_inert())
|
||||||
|
return false;
|
||||||
|
|
||||||
|
return computed_values().pointer_events() != CSS::PointerEvents::None;
|
||||||
|
}
|
||||||
|
|
||||||
void Paintable::set_dom_node(GC::Ptr<DOM::Node> dom_node)
|
void Paintable::set_dom_node(GC::Ptr<DOM::Node> dom_node)
|
||||||
{
|
{
|
||||||
m_dom_node = dom_node;
|
m_dom_node = dom_node;
|
||||||
|
|
|
@ -109,7 +109,7 @@ public:
|
||||||
|
|
||||||
CSS::ImmutableComputedValues const& computed_values() const;
|
CSS::ImmutableComputedValues const& computed_values() const;
|
||||||
|
|
||||||
bool visible_for_hit_testing() const { return computed_values().pointer_events() != CSS::PointerEvents::None; }
|
bool visible_for_hit_testing() const;
|
||||||
|
|
||||||
GC::Ptr<HTML::Navigable> navigable() const;
|
GC::Ptr<HTML::Navigable> navigable() const;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 1 tests
|
||||||
|
|
||||||
|
1 Pass
|
||||||
|
Pass inert isn't hit-testable, but that isn't expose in the computed style
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>inert isn't hit-testable, but that isn't expose in the computed style</title>
|
||||||
|
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||||
|
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||||
|
<script src="../resources/testharness.js"></script>
|
||||||
|
<script src="../resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
body { margin: 0 }
|
||||||
|
div {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
#nonInert {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="nonInert"></div>
|
||||||
|
<div id="inert"></div>
|
||||||
|
<script>
|
||||||
|
test(function() {
|
||||||
|
let inert = document.getElementById("inert");
|
||||||
|
assert_equals(
|
||||||
|
document.elementFromPoint(50, 50),
|
||||||
|
inert,
|
||||||
|
"not-yet-inert node hit-test before non-inert node",
|
||||||
|
);
|
||||||
|
inert.inert = true;
|
||||||
|
assert_equals(
|
||||||
|
document.elementFromPoint(50, 50),
|
||||||
|
nonInert,
|
||||||
|
"inert node is transparent to events (as pointer-events: none)",
|
||||||
|
);
|
||||||
|
assert_equals(
|
||||||
|
getComputedStyle(inert).pointerEvents,
|
||||||
|
getComputedStyle(nonInert).pointerEvents,
|
||||||
|
"inert node doesn't change pointer-events computed value",
|
||||||
|
);
|
||||||
|
assert_equals(
|
||||||
|
getComputedStyle(inert).userSelect,
|
||||||
|
getComputedStyle(nonInert).userSelect,
|
||||||
|
"inert node doesn't change user-select computed value",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
</script>
|
Loading…
Add table
Add a link
Reference in a new issue