OSSForks/ladybird
1
0
Fork 0
mirror of https://github.com/zebrajr/ladybird.git synced 2025-12-06 12:20:00 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

LibWeb: Propagate animated values in recompute_inherited_style

Browse Source 
As `recompute_inherited_style` works in-place rather than building
ComputedProperties from scratch we need to keep track of which animated
properties are inherited to know whether we should remove them when we
have no more inherited value.
This commit is contained in:
Callum Law 2025-08-20 23:30:31 +12:00 committed by Sam Atkins
parent 0fc512e56d
commit 9330bf4b72
6 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Libraries/LibWeb/CSS/ComputedProperties.cpp
View File

@ -76,6 +76,12 @@ bool ComputedProperties::is_property_inherited(PropertyID property_id) const
return m_property_inherited[n / 8] & (1 << (n % 8));
}
bool ComputedProperties::is_animated_property_inherited(PropertyID property_id) const
{
size_t n = to_underlying(property_id);
return m_animated_property_inherited[n / 8] & (1 << (n % 8));
}
void ComputedProperties::set_property_inherited(PropertyID property_id, Inherited inherited)
{
size_t n = to_underlying(property_id);
@ -85,6 +91,15 @@ void ComputedProperties::set_property_inherited(PropertyID property_id, Inherite
m_property_inherited[n / 8] &= ~(1 << (n % 8));
}
void ComputedProperties::set_animated_property_inherited(PropertyID property_id, Inherited inherited)
{
size_t n = to_underlying(property_id);
if (inherited == Inherited::Yes)
m_animated_property_inherited[n / 8] |= (1 << (n % 8));
else
m_animated_property_inherited[n / 8] &= ~(1 << (n % 8));
}
void ComputedProperties::set_property(PropertyID id, NonnullRefPtr<StyleValue const> value, Inherited inherited, Important important)
{
m_property_values[to_underlying(id)] = move(value);
@ -99,9 +114,15 @@ void ComputedProperties::revert_property(PropertyID id, ComputedProperties const
set_property_inherited(id, style_for_revert.is_property_inherited(id) ? Inherited::Yes : Inherited::No);
}
void ComputedProperties::set_animated_property(PropertyID id, NonnullRefPtr<StyleValue const> value)
void ComputedProperties::set_animated_property(PropertyID id, NonnullRefPtr<StyleValue const> value, Inherited inherited)
{
m_animated_property_values.set(id, move(value));
set_animated_property_inherited(id, inherited);
}
void ComputedProperties::remove_animated_property(PropertyID id)
{
m_animated_property_values.remove(id);
}
void ComputedProperties::reset_animated_properties(Badge<Animations::KeyframeEffect>)

6
Libraries/LibWeb/CSS/ComputedProperties.h
View File

@ -53,11 +53,14 @@ public:
bool is_property_important(PropertyID property_id) const;
bool is_property_inherited(PropertyID property_id) const;
bool is_animated_property_inherited(PropertyID property_id) const;
void set_property_important(PropertyID, Important);
void set_property_inherited(PropertyID, Inherited);
void set_animated_property_inherited(PropertyID, Inherited);
void set_property(PropertyID, NonnullRefPtr<StyleValue const> value, Inherited = Inherited::No, Important = Important::No);
void set_animated_property(PropertyID, NonnullRefPtr<StyleValue const> value);
void set_animated_property(PropertyID, NonnullRefPtr<StyleValue const> value, Inherited = Inherited::No);
void remove_animated_property(PropertyID);
enum class WithAnimationsApplied {
No,
Yes,
@ -270,6 +273,7 @@ private:
Array<RefPtr<StyleValue const>, number_of_properties> m_property_values;
Array<u8, ceil_div(number_of_properties, 8uz)> m_property_important {};
Array<u8, ceil_div(number_of_properties, 8uz)> m_property_inherited {};
Array<u8, ceil_div(number_of_properties, 8uz)> m_animated_property_inherited {};
HashMap<PropertyID, NonnullRefPtr<StyleValue const>> m_animated_property_values;

8
Libraries/LibWeb/CSS/StyleComputer.cpp
View File

@ -1701,7 +1701,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
if (!value_slot) {
if (is_inherited_property(property_id)) {
if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
style.set_animated_property(property_id, animated_inherit_value.value());
style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
style.set_property(
property_id,
get_inherit_value(property_id, element, pseudo_element),
@ -1720,7 +1720,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
if (value_slot->is_inherit()) {
if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
style.set_animated_property(property_id, animated_inherit_value.value());
style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
value_slot = get_inherit_value(property_id, element, pseudo_element);
style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
return;
@ -1732,7 +1732,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
if (is_inherited_property(property_id)) {
// then if it is an inherited property, this is treated as inherit,
if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
style.set_animated_property(property_id, animated_inherit_value.value());
style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
value_slot = get_inherit_value(property_id, element, pseudo_element);
style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
} else {
@ -2693,7 +2693,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
computed_style->set_property(property_id, value.release_nonnull(), inherited);
if (animated_value.has_value())
computed_style->set_animated_property(property_id, animated_value.value());
computed_style->set_animated_property(property_id, animated_value.value(), inherited);
if (property_id == PropertyID::AnimationName) {
computed_style->set_animation_name_source(cascaded_properties.property_source(property_id));

11
Libraries/LibWeb/DOM/Element.cpp
View File

@ -817,6 +817,17 @@ 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 (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);
invalidation |= CSS::compute_property_invalidation(property_id, old_animated_value, new_animated_value);
RefPtr new_value = CSS::StyleComputer::get_inherit_value(property_id, this);
computed_properties->set_property(property_id, *new_value, CSS::ComputedProperties::Inherited::Yes);
invalidation |= CSS::compute_property_invalidation(property_id, old_value, new_value);

1
Tests/LibWeb/Text/expected/css/recompute-inherited-style-animated-properties.txt Normal file
View File

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

26
Tests/LibWeb/Text/input/css/recompute-inherited-style-animated-properties.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<style>
#bar {
color: inherit;
}
</style>
<div id="foo"><div id="bar"></div></div>
<script src="../include.js"></script>
<script>
asyncTest(done => {
// Wait for first layout to complete so we ensure this is done via `recompute_inherited_style()`
setTimeout(() => {
const animation = foo.animate([{ color: "red" }, { color: "blue" }], {
duration: 1000,
});
animation.pause();
animation.currentTime = 500;
println(getComputedStyle(bar).color);
done();
}, 100);
});
</script>
</html>