dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Invalidate element with CSS custom props on attribute changes

Browse source 
Element styles should be invalidated when they depend on CSS variables
defined in one of their ancesors or when one of their ancestors change
their class, due to the possibility of adding new CSS variables in
scope.
This commit is contained in:
Kevin Mas Ruiz 2025-03-07 22:57:14 +01:00 committed by Alexander Kalenik
parent 8e1ecd25ae
commit fa950a5727
3 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Libraries/LibWeb/DOM/Element.cpp
View file

@ -2202,10 +2202,20 @@ void Element::invalidate_style_after_attribute_change(FlyString const& attribute
style_invalidation_options.invalidate_self = true;
}
if (style_uses_css_custom_properties()) {
// A css custom property can be hooked on to this element by any attribute
// so invalidate elements and rerender them in that scenario
style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true;
}
if (attribute_name == HTML::AttributeNames::style) {
style_invalidation_options.invalidate_self = true;
// even if we don't have custom properties, the new "style" attribute could add one
style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true;
} else if (attribute_name == HTML::AttributeNames::class_) {
// adding or removing classes can add new custom properties to this element
style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true;
Vector<StringView> old_classes;
Vector<StringView> new_classes;
if (old_value.has_value())

2
Tests/LibWeb/Text/expected/CSSStyleDeclaration-custom-properties-3838.txt Normal file
View file

@ -0,0 +1,2 @@
rgb(255, 0, 0)
rgb(0, 128, 0)

29
Tests/LibWeb/Text/input/CSSStyleDeclaration-custom-properties-3838.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<script src="./include.js"></script>
<style>
body {
--color: red;
}
body.green {
--color: green;
}
</style>
<body></body>
<script>
test(() => {
const div = document.createElement('div');
document.body.appendChild(div);
div.style["backgroundColor"] = "var(--color)";
div.style["width"] = "100px";
div.style["height"] = "100px";
const bgColorBefore = getComputedStyle(div).backgroundColor;
document.body.className = "green";
const bgColorAfter = getComputedStyle(div).backgroundColor;
println(bgColorBefore);
println(bgColorAfter);
});
</script>