LibWeb: Propagate animated values in recompute_inherited_style

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.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -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>)

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -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;
 

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -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));

Libraries/LibWeb/DOM/Element.cpp

@@ -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);

Tests/LibWeb/Text/expected/css/recompute-inherited-style-animated-properties.txt

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

Tests/LibWeb/Text/input/css/recompute-inherited-style-animated-properties.html

@@ -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>