From 84ab8bf7973147d054a99445943b9da930ceb0a2 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 25 Aug 2024 10:14:24 +0200 Subject: [PATCH] LibWeb: Make CSS :hover selector match shadow-inclusive ancestors Before this change, :hover wouldn't match anything outside the shadow boundary when hovering elements inside a shadow tree. This was most noticeable when hovering the text inside an input element and hover styles disappearing from the hosting input element itself. --- .../ShadowDOM/css-hover-shadow-dom.txt | 1 + .../input/ShadowDOM/css-hover-shadow-dom.html | 23 +++++++++++++++++++ .../Libraries/LibWeb/CSS/SelectorEngine.cpp | 2 +- 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Text/expected/ShadowDOM/css-hover-shadow-dom.txt create mode 100644 Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html diff --git a/Tests/LibWeb/Text/expected/ShadowDOM/css-hover-shadow-dom.txt b/Tests/LibWeb/Text/expected/ShadowDOM/css-hover-shadow-dom.txt new file mode 100644 index 00000000000..0fd860130d1 --- /dev/null +++ b/Tests/LibWeb/Text/expected/ShadowDOM/css-hover-shadow-dom.txt @@ -0,0 +1 @@ + hovered bg: rgb(0, 128, 0) diff --git a/Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html b/Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html new file mode 100644 index 00000000000..ce96dd80ac3 --- /dev/null +++ b/Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html @@ -0,0 +1,23 @@ + +
+ + diff --git a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp index 8710ae3b6a3..0983b429260 100644 --- a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp +++ b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp @@ -147,7 +147,7 @@ static inline bool matches_hover_pseudo_class(DOM::Element const& element) return false; if (&element == hovered_node) return true; - return element.is_ancestor_of(*hovered_node); + return element.is_shadow_including_ancestor_of(*hovered_node); } // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-checked