mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-22 12:35:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Fix selector matching for non-HTML mixed-case element names

Browse source 
This change fixes selector matching for non-HTML elements that have
mixed-case names — such as the SVG foreignObject element.

Otherwise, without this change, attempting to use a selector to match
such an element — e.g., document.querySelector("foreignObject") — fails.
This commit is contained in:
sideshowbarker 2024-12-25 20:54:23 +09:00 • committed by Tim Ledbetter
parent f625ea27d0
commit 72a86f2df3
Notes: github-actions[bot] 2024-12-25 13:55:02 +00:00
3 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/CSS/SelectorEngine.cpp
View file

@ -799,7 +799,7 @@ static inline bool matches(CSS::Selector::SimpleSelector const& component, Optio
// Reject if the tag name doesn't match
if (component.type == CSS::Selector::SimpleSelector::Type::TagName) {
// See https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors
if (element.document().document_type() == DOM::Document::Type::HTML) {
if (element.document().document_type() == DOM::Document::Type::HTML && element.namespace_uri() == Namespace::HTML) {
if (qualified_name.name.lowercase_name != element.local_name())
return false;
} else if (!Infra::is_ascii_case_insensitive_match(qualified_name.name.name, element.local_name())) {

4
Tests/LibWeb/Text/expected/non-html-mixed-case-element-name-selector-matching.txt Normal file
View file

@ -0,0 +1,4 @@
✅ Pass: Selector match for SVG element textPath.
✅ Pass: Selector match for SVG element clipPath.
✅ Pass: Selector match for SVG element foreignObject.
✅ Pass: Selector match for SVG element radialGradient.

28
Tests/LibWeb/Text/input/non-html-mixed-case-element-name-selector-matching.html Normal file
View file

@ -0,0 +1,28 @@
<script src="include.js"></script>
<svg>
<textPath></textPath>
<clipPath></clipPath>
<foreignObject></foreignObject>
<linearGradient></linearGradient>
<radialGradient></radialGradient>
</svg>
<script>
test(() => {
if (document.querySelector("textPath"))
println("✅ Pass: Selector match for SVG element textPath.");
else
println("❌ Fail: No selector match for SVG element textPath.");
if (document.querySelector("clipPath"))
println("✅ Pass: Selector match for SVG element clipPath.");
else
println("❌ Fail: No selector match for SVG element clipPath.");
if (document.querySelector("foreignObject"))
println("✅ Pass: Selector match for SVG element foreignObject.");
else
println("❌ Fail: No selector match for SVG element foreignObject.");
if (document.querySelector("radialGradient"))
println("✅ Pass: Selector match for SVG element radialGradient.");
else
println("❌ Fail: No selector match for SVG element radialGradient.");
});
</script>