LibWeb: Dont overwrite animated values in recompute_inherited_style

Previously we assumed that if the non-animated value was inherited then
the animated value must be also which is not true.
This commit is contained in:
Callum Law 2025-11-15 01:00:53 +13:00 committed by Sam Atkins
parent a984ff4f58
commit 9d49fcc87b
Notes: github-actions[bot] 2025-11-28 16:17:40 +00:00
3 changed files with 53 additions and 9 deletions

View file

@ -859,17 +859,19 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_inherited_style()
if (!computed_properties->is_property_inherited(property_id))
continue;
RefPtr<CSS::StyleValue const> old_animated_value = computed_properties->animated_property_values().get(property_id).value_or({});
RefPtr<CSS::StyleValue const> new_animated_value = CSS::StyleComputer::get_animated_inherit_value(property_id, { *this })
.map([](auto&& value) { return value.ptr(); })
.value_or({});
if (computed_properties->is_animated_property_inherited(property_id) || !computed_properties->animated_property_values().contains(property_id)) {
RefPtr<CSS::StyleValue const> old_animated_value = computed_properties->animated_property_values().get(property_id).value_or({});
RefPtr<CSS::StyleValue const> new_animated_value = CSS::StyleComputer::get_animated_inherit_value(property_id, { *this })
.map([](auto&& value) { return value.ptr(); })
.value_or({});
invalidation |= CSS::compute_property_invalidation(property_id, old_animated_value, new_animated_value);
invalidation |= CSS::compute_property_invalidation(property_id, old_animated_value, new_animated_value);
if (new_animated_value)
computed_properties->set_animated_property(property_id, new_animated_value.release_nonnull(), CSS::ComputedProperties::Inherited::Yes);
else if (old_animated_value && computed_properties->is_animated_property_inherited(property_id))
computed_properties->remove_animated_property(property_id);
if (new_animated_value)
computed_properties->set_animated_property(property_id, new_animated_value.release_nonnull(), CSS::ComputedProperties::Inherited::Yes);
else if (old_animated_value)
computed_properties->remove_animated_property(property_id);
}
RefPtr new_value = CSS::StyleComputer::get_non_animated_inherit_value(property_id, { *this });
computed_properties->set_property(property_id, *new_value, CSS::ComputedProperties::Inherited::Yes);

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<style>
@keyframes fooAnim {
from,
to {
color: red;
}
}
#foo {
animation: fooAnim 1s infinite;
}
@keyframes barAnim {
from,
to {
color: green;
}
}
#bar {
animation: barAnim 1s infinite;
}
</style>
<div id="foo"><div id="bar"></div></div>
<script src="../include.js"></script>
<script>
asyncTest(done => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Trigger recomputation of inherited style for #bar
foo.style.fontSize = "20px";
println(getComputedStyle(bar).color);
done();
});
});
});
</script>
</html>