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.
Psychpsyo · Jan 8, 2025 · 0c3ddae · 0c3ddae
1 parent 482e5de
commit 0c3ddae
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -910,8 +910,8 @@ static bool fast_matches_simple_selector(CSS::Selector::SimpleSelector const& si
     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())
+        if (element.is_svg_element()) {
+            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;

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>