瀏覽代碼

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.
Andreas Kling 10 月之前
父節點
當前提交
84ab8bf797

+ 1 - 0
Tests/LibWeb/Text/expected/ShadowDOM/css-hover-shadow-dom.txt

@@ -0,0 +1 @@
+   hovered bg: rgb(0, 128, 0)

+ 23 - 0
Tests/LibWeb/Text/input/ShadowDOM/css-hover-shadow-dom.html

@@ -0,0 +1,23 @@
+<style>
+#myShadowHost:hover {
+    background: green;
+}
+#myShadowHost {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+</style>
+<body><div id="myShadowHost"><template shadowrootmode="open"><div>hover me</div></template></div></body>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        if (window.internals && window.internals.movePointerTo)
+            internals.movePointerTo(50, 50);
+
+        let s = getComputedStyle(myShadowHost);
+        println("hovered bg: " + s.backgroundColor);
+
+        myShadowHost.remove();
+    });
+</script>

+ 1 - 1
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