Переглянути джерело

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