LibWeb: Fix CSS tag seletor case sensitivity for SVG elements

SVG element names need to be case-sensitive. Everything else (currently only HTML) needs to be case-insensitive.
LadybirdBrowser · Jan 9, 2025 · 95819b1 · 95819b1
1 parent 482e5de
commit 95819b1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -909,14 +909,17 @@ static bool fast_matches_simple_selector(CSS::Selector::SimpleSelector const& si
     switch (simple_selector.type) {
     case CSS::Selector::SimpleSelector::Type::Universal:
         return matches_namespace(simple_selector.qualified_name(), element, context.style_sheet_for_rule);
-    case CSS::Selector::SimpleSelector::Type::TagName:
-        if (element.document().document_type() == DOM::Document::Type::HTML) {
-            if (simple_selector.qualified_name().name.lowercase_name != element.local_name())
+    case CSS::Selector::SimpleSelector::Type::TagName: {
+        auto case_sensitivity = (element.is_svg_element() || element.document().document_type() != DOM::Document::Type::HTML) ? CaseSensitivity::CaseSensitive : CaseSensitivity::CaseInsensitive;
+        if (case_sensitivity == CaseSensitivity::CaseSensitive) {
+            if (simple_selector.qualified_name().name.name != element.local_name())
+                return false;
+        } else {
+            if (!Infra::is_ascii_case_insensitive_match(simple_selector.qualified_name().name.name, element.local_name()))
                 return false;
-        } else if (!Infra::is_ascii_case_insensitive_match(simple_selector.qualified_name().name.name, element.local_name())) {
-            return false;
         }
         return matches_namespace(simple_selector.qualified_name(), element, context.style_sheet_for_rule);
+    }
     case CSS::Selector::SimpleSelector::Type::Class: {
         // Class selectors are matched case insensitively in quirks mode.
         // See: https://drafts.csswg.org/selectors-4/#class-html

diff --git a/Tests/LibWeb/Ref/expected/css-selector-svg-case-sensitivity.html b/Tests/LibWeb/Ref/expected/css-selector-svg-case-sensitivity.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg viewBox="0 0 200 200">
+    <foreignObject width="200" height="200">
+        <span style="color:green;">This should be green.</span>
+    </foreignObject>
+</svg>
diff --git a/Tests/LibWeb/Ref/input/css-selector-svg-case-sensitivity.html b/Tests/LibWeb/Ref/input/css-selector-svg-case-sensitivity.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/css-selector-svg-case-sensitivity.html" />
+<style>
+    foreignObject * {
+        color: green;
+    }
+    foreignobject * {
+        color: red;
+    }
+</style>
+
+<svg viewBox="0 0 200 200">
+    <foreignObject width="200" height="200">
+        <span>This should be green.</span>
+    </foreignObject>
+</svg>