LibWeb: Implement the :has() pseudo-class

See https://drafts.csswg.org/selectors-4/#relational.
LadybirdBrowser · Jul 13, 2024 · 0d60977 · 0d60977
1 parent 13a8c2a
commit 0d60977
Show file tree

Hide file tree

Showing 16 changed files with 182 additions and 1 deletion.
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoClass.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoClass.cpp
@@ -72,6 +72,7 @@ struct PseudoClassMetadata {
         ANPlusBOf,
         CompoundSelector,
         ForgivingSelectorList,
+        ForgivingRelativeSelectorList,
         Ident,
         LanguageRanges,
         SelectorList,
@@ -167,6 +168,8 @@ PseudoClassMetadata pseudo_class_metadata(PseudoClass pseudo_class)
                 parameter_type = "CompoundSelector"_string;
             } else if (argument_string == "<forgiving-selector-list>"sv) {
                 parameter_type = "ForgivingSelectorList"_string;
+            } else if (argument_string == "<forgiving-relative-selector-list>"sv) {
+                parameter_type = "ForgivingRelativeSelectorList"_string;
             } else if (argument_string == "<ident>"sv) {
                 parameter_type = "Ident"_string;
             } else if (argument_string == "<language-ranges>"sv) {

diff --git a/Tests/LibWeb/Ref/css-has-compound.html b/Tests/LibWeb/Ref/css-has-compound.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<link rel="match" href="reference/css-has-compound.html" />
+<style>
+    a:has(span.nice > em) {
+        color: orange;
+    }
+</style>
+<a href="https://example.com"><em><span class="nice"><em>Link</em></span></em></a>
+<a href="https://example.com"><em>Link</em></a>
+<a href="https://example.com"><em><span class="hello"><em>Link</em></span></em></a>
+<a href="https://example.com"><em><span class="nice">Link</span></em></a>
diff --git a/Tests/LibWeb/Ref/css-has-descendant.html b/Tests/LibWeb/Ref/css-has-descendant.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<link rel="match" href="reference/css-has-descendant.html" />
+<style>
+    a:has(span) {
+        color: orange;
+    }
+</style>
+<a href="https://example.com"><em><span>Link</span></em></a>
+<a href="https://example.com"><em>Link</em></a>
diff --git a/Tests/LibWeb/Ref/css-has-direct-child.html b/Tests/LibWeb/Ref/css-has-direct-child.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<link rel="match" href="reference/css-has-direct-child.html" />
+<style>
+    a:has(> span) {
+        color: orange;
+    }
+</style>
+<a href="https://example.com"><span>Link</span></a>
+<a href="https://example.com"><em><span>Link</span></em></a>
diff --git a/Tests/LibWeb/Ref/css-has-next-sibling.html b/Tests/LibWeb/Ref/css-has-next-sibling.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<link rel="match" href="reference/css-has-next-sibling.html" />
+<style>
+    a:has(+ span) {
+        color: orange;
+    }
+</style>
+<a href="https://example.com">Link</a><span>Hello!</span>
+<a href="https://example.com">Link</a><em>Hello!</em>
+<a href="https://example.com">Link</a><em>Hello</em><span>world!</span>
+<a href="https://example.com">Link</a>
diff --git a/Tests/LibWeb/Ref/css-has-subsequent-sibling.html b/Tests/LibWeb/Ref/css-has-subsequent-sibling.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<link rel="match" href="reference/css-has-subsequent-sibling.html" />
+<style>
+    a:has(~ span) {
+        color: orange;
+    }
+</style>
+<div>
+    <a href="https://example.com">Link</a><span>Hello!</span>
+</div>
+<div>
+    <a href="https://example.com">Link</a><em>Hello!</em>
+</div>
+<div>
+    <a href="https://example.com">Link</a><em>Hello</em><span>world!</span>
+</div>
+<div>
+    <a href="https://example.com">Link</a>
+</div>
diff --git a/Tests/LibWeb/Ref/reference/css-has-compound.html b/Tests/LibWeb/Ref/reference/css-has-compound.html
@@ -0,0 +1,4 @@
+<a href="https://example.com" style="color: orange"><em><span class="nice"><em>Link</em></span></em></a>
+<a href="https://example.com"><em>Link</em></a>
+<a href="https://example.com"><em><span class="hello"><em>Link</em></span></em></a>
+<a href="https://example.com"><em><span class="nice">Link</span></em></a>
diff --git a/Tests/LibWeb/Ref/reference/css-has-descendant.html b/Tests/LibWeb/Ref/reference/css-has-descendant.html
@@ -0,0 +1,2 @@
+<a href="https://example.com" style="color: orange"><em><span class="nice"><em>Link</em></span></em></a>
+<a href="https://example.com"><em>Link</em></a>
diff --git a/Tests/LibWeb/Ref/reference/css-has-direct-child.html b/Tests/LibWeb/Ref/reference/css-has-direct-child.html
@@ -0,0 +1,2 @@
+<a href="https://example.com" style="color: orange"><span>Link</span></a>
+<a href="https://example.com"><em><span>Link</span></em></a>
diff --git a/Tests/LibWeb/Ref/reference/css-has-next-sibling.html b/Tests/LibWeb/Ref/reference/css-has-next-sibling.html
@@ -0,0 +1,4 @@
+<a href="https://example.com" style="color: orange">Link</a><span>Hello!</span>
+<a href="https://example.com">Link</a><em>Hello!</em>
+<a href="https://example.com">Link</a><em>Hello</em><span>world!</span>
+<a href="https://example.com">Link</a>
diff --git a/Tests/LibWeb/Ref/reference/css-has-subsequent-sibling.html b/Tests/LibWeb/Ref/reference/css-has-subsequent-sibling.html
@@ -0,0 +1,12 @@
+<div>
+    <a href="https://example.com" style="color: orange">Link</a><span>Hello!</span>
+</div>
+<div>
+    <a href="https://example.com">Link</a><em>Hello!</em>
+</div>
+<div>
+    <a href="https://example.com" style="color: orange">Link</a><em>Hello</em><span>world!</span>
+</div>
+<div>
+    <a href="https://example.com">Link</a>
+</div>
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/SelectorParsing.cpp b/Userland/Libraries/LibWeb/CSS/Parser/SelectorParsing.cpp
@@ -516,10 +516,12 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
                     .argument_selector_list = { move(selector) } }
             };
         }
+        case PseudoClassMetadata::ParameterType::ForgivingRelativeSelectorList:
         case PseudoClassMetadata::ParameterType::ForgivingSelectorList: {
             auto function_token_stream = TokenStream(pseudo_function.values());
+            auto selector_type = metadata.parameter_type == PseudoClassMetadata::ParameterType::ForgivingSelectorList ? SelectorType::Standalone : SelectorType::Relative;
             // NOTE: Because it's forgiving, even complete garbage will parse OK as an empty selector-list.
-            auto argument_selector_list = MUST(parse_a_selector_list(function_token_stream, SelectorType::Standalone, SelectorParsingMode::Forgiving));
+            auto argument_selector_list = MUST(parse_a_selector_list(function_token_stream, selector_type, SelectorParsingMode::Forgiving));
 
             return Selector::SimpleSelector {
                 .type = Selector::SimpleSelector::Type::PseudoClass,

diff --git a/Userland/Libraries/LibWeb/CSS/PseudoClasses.json b/Userland/Libraries/LibWeb/CSS/PseudoClasses.json
@@ -44,6 +44,9 @@
   "focus-within": {
     "argument": ""
   },
+  "has": {
+    "argument": "<forgiving-relative-selector-list>"
+  },
   "host": {
     "argument": "<compound-selector>?"
   },

diff --git a/Userland/Libraries/LibWeb/CSS/Selector.cpp b/Userland/Libraries/LibWeb/CSS/Selector.cpp
@@ -119,6 +119,7 @@ u32 Selector::specificity() const
             case SimpleSelector::Type::PseudoClass: {
                 auto& pseudo_class = simple_selector.pseudo_class();
                 switch (pseudo_class.type) {
+                case PseudoClass::Has:
                 case PseudoClass::Is:
                 case PseudoClass::Not: {
                     // The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the

diff --git a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -63,6 +63,57 @@ static inline bool matches_lang_pseudo_class(DOM::Element const& element, Vector
     return false;
 }
 
+// https://drafts.csswg.org/selectors-4/#relational
+static inline bool matches_has_pseudo_class(CSS::Selector const& selector, Optional<CSS::CSSStyleSheet const&> style_sheet_for_rule, DOM::Element const& element)
+{
+    switch (selector.compound_selectors()[0].combinator) {
+    // Shouldn't be possible because we've parsed relative selectors, which always have a combinator, implicitly or explicitly.
+    case CSS::Selector::Combinator::None:
+        VERIFY_NOT_REACHED();
+    case CSS::Selector::Combinator::Descendant: {
+        bool has = false;
+        element.for_each_in_subtree([&](auto const& descendant) {
+            if (!descendant.is_element())
+                return TraversalDecision::Continue;
+            auto const& descendant_element = static_cast<DOM::Element const&>(descendant);
+            // Provide the element as our "scope" (which is referred to as the "anchor element" in the spec: https://drafts.csswg.org/selectors-4/#relative-selector)
+            if (matches(selector, style_sheet_for_rule, descendant_element, {}, element)) {
+                has = true;
+                return TraversalDecision::Break;
+            }
+            return TraversalDecision::Continue;
+        });
+        return has;
+    }
+    case CSS::Selector::Combinator::ImmediateChild: {
+        bool has = false;
+        element.for_each_child([&](DOM::Node const& child) {
+            if (!child.is_element())
+                return IterationDecision::Continue;
+            auto const& child_element = static_cast<DOM::Element const&>(child);
+            if (matches(selector, style_sheet_for_rule, child_element, {}, element)) {
+                has = true;
+                return IterationDecision::Break;
+            }
+            return IterationDecision::Continue;
+        });
+        return has;
+    }
+    case CSS::Selector::Combinator::NextSibling:
+        return element.next_element_sibling() != nullptr && matches(selector, style_sheet_for_rule, *element.next_element_sibling(), {}, element);
+    case CSS::Selector::Combinator::SubsequentSibling: {
+        for (auto* sibling = element.next_element_sibling(); sibling; sibling = sibling->next_element_sibling()) {
+            if (matches(selector, style_sheet_for_rule, *sibling, {}, element))
+                return true;
+        }
+        return false;
+    }
+    case CSS::Selector::Combinator::Column:
+        TODO();
+    }
+    return false;
+}
+
 // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-link
 static inline bool matches_link_pseudo_class(DOM::Element const& element)
 {
@@ -359,6 +410,13 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
         return matches_indeterminate_pseudo_class(element);
     case CSS::PseudoClass::Defined:
         return element.is_defined();
+    case CSS::PseudoClass::Has:
+        // These selectors should be relative selectors (https://drafts.csswg.org/selectors-4/#relative-selector)
+        for (auto& selector : pseudo_class.argument_selector_list) {
+            if (matches_has_pseudo_class(selector, style_sheet_for_rule, element))
+                return true;
+        }
+        return false;
     case CSS::PseudoClass::Is:
     case CSS::PseudoClass::Where:
         for (auto& selector : pseudo_class.argument_selector_list) {
@@ -635,6 +693,13 @@ static inline bool matches(CSS::Selector const& selector, Optional<CSS::CSSStyle
     case CSS::Selector::Combinator::None:
         return true;
     case CSS::Selector::Combinator::Descendant:
+        if (component_list_index == 0 && scope) {
+            for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
+                if (ancestor == scope)
+                    return true;
+            }
+            return false;
+        }
         VERIFY(component_list_index != 0);
         for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
             if (!is<DOM::Element>(*ancestor))
@@ -644,16 +709,39 @@ static inline bool matches(CSS::Selector const& selector, Optional<CSS::CSSStyle
         }
         return false;
     case CSS::Selector::Combinator::ImmediateChild:
+        if (component_list_index == 0 && scope) {
+            bool found = false;
+            scope->for_each_child([&](DOM::Node const& child) {
+                if (!child.is_element())
+                    return IterationDecision::Continue;
+                auto const& child_element = static_cast<DOM::Element const&>(child);
+                if (&child_element == &element) {
+                    found = true;
+                    return IterationDecision::Break;
+                }
+                return IterationDecision::Continue;
+            });
+            return found;
+        }
         VERIFY(component_list_index != 0);
         if (!element.parent() || !is<DOM::Element>(*element.parent()))
             return false;
         return matches(selector, style_sheet_for_rule, component_list_index - 1, static_cast<DOM::Element const&>(*element.parent()), scope);
     case CSS::Selector::Combinator::NextSibling:
+        if (component_list_index == 0 && scope)
+            return element.previous_element_sibling() == scope;
         VERIFY(component_list_index != 0);
         if (auto* sibling = element.previous_element_sibling())
             return matches(selector, style_sheet_for_rule, component_list_index - 1, *sibling, scope);
         return false;
     case CSS::Selector::Combinator::SubsequentSibling:
+        if (component_list_index == 0 && scope) {
+            for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
+                if (sibling == scope)
+                    return true;
+            }
+            return false;
+        }
         VERIFY(component_list_index != 0);
         for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
             if (matches(selector, style_sheet_for_rule, component_list_index - 1, *sibling, scope))

diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp
@@ -527,6 +527,7 @@ void dump_selector(StringBuilder& builder, CSS::Selector const& selector)
                 }
                 case CSS::PseudoClassMetadata::ParameterType::CompoundSelector:
                 case CSS::PseudoClassMetadata::ParameterType::ForgivingSelectorList:
+                case CSS::PseudoClassMetadata::ParameterType::ForgivingRelativeSelectorList:
                 case CSS::PseudoClassMetadata::ParameterType::SelectorList: {
                     builder.append("(["sv);
                     for (auto& selector : pseudo_class.argument_selector_list)