LibWeb/CSS: Use case insensitive tag and attribute name in ancestor hash

Fixes #4793.
This commit is contained in:
Veeti Paananen 2025-05-18 07:27:01 +03:00 committed by Alexander Kalenik
commit 7c4fd9f624
Notes: github-actions[bot] 2025-05-21 12:55:41 +00:00
6 changed files with 18 additions and 5 deletions

View file

@ -159,11 +159,11 @@ void Selector::collect_ancestor_hashes()
return;
break;
case SimpleSelector::Type::TagName:
if (append_unique_hash(simple_selector.qualified_name().name.name.hash()))
if (append_unique_hash(simple_selector.qualified_name().name.lowercase_name.hash()))
return;
break;
case SimpleSelector::Type::Attribute:
if (append_unique_hash(simple_selector.attribute().qualified_name.name.name.hash()))
if (append_unique_hash(simple_selector.attribute().qualified_name.name.lowercase_name.hash()))
return;
break;
default:

View file

@ -3212,13 +3212,13 @@ void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element c
static void for_each_element_hash(DOM::Element const& element, auto callback)
{
callback(element.local_name().hash());
callback(element.local_name().ascii_case_insensitive_hash());
if (element.id().has_value())
callback(element.id().value().hash());
for (auto const& class_ : element.class_names())
callback(class_.hash());
element.for_each_attribute([&](auto& attribute) {
callback(attribute.local_name().hash());
callback(attribute.lowercase_name().hash());
});
}

View file

@ -3,6 +3,10 @@
div[type=one] {
background: red;
}
div[type=three] {
background: blue;
}
</style>
<div type="one">I have a red background</div>
<div type="two">I don't have a green background</div>
<div type="three">I have a blue background</div>

View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<div style="color:green;">
This should be green.
<span style="color:red;">This should be red.</span>
</div>

View file

@ -7,6 +7,10 @@
div[test=two] { /* 'test' is NOT a case-insensitive html attribute */
background: green;
}
[aB] div {
background: blue;
}
</style>
<div type="ONE">I have a red background</div>
<div type="TWO">I don't have a green background</div>
<div test="TWO">I don't have a green background</div>
<div ab><div>I have a blue background</div></div>

View file

@ -4,8 +4,12 @@
DIV {
color: green;
}
DiV sPaN {
color: red;
}
</style>
<div>
This should be green.
<span style="color:red;">This should be red.</span>
</div>