LibWeb: Store only typed computed values

Reconstruct transient generic workspaces for animation and inherited
style updates, then remove durable ComputedProperties storage from
elements and pseudo-elements. Return immutable ComputedValues directly
from style computation and keep mutable access confined to consuming
builders. Handle CSS animations whose effects are temporarily detached
by script.

Author: awesomekling

Libraries/LibWeb/Animations/AnimationEffect.cpp

@@ -931,7 +931,12 @@ AnimationUpdateContext::~AnimationUpdateContext()
         }
 
         if (invalidation.needs_repaint()) {
-            target->set_needs_repaint();
+            if (element.pseudo_element().has_value()) {
+                if (auto pseudo_element_node = target->pseudo_element_unsafe_layout_node(*element.pseudo_element()); pseudo_element_node && pseudo_element_node->paintable())
+                    pseudo_element_node->paintable()->set_needs_repaint();
+            } else {
+                target->set_needs_repaint();
+            }
         }
         if (invalidation.needs_stacking_context_tree_rebuild())
             element.document().invalidate_stacking_context_tree();

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -976,15 +976,20 @@ void KeyframeEffect::update_computed_properties(AnimationUpdateContext& context)
     target->update_animated_properties({}, pseudo_element_type(), *this, context);
 }
 
-void KeyframeEffect::update_computed_properties_for_style(AnimationUpdateContext& context, DOM::AbstractElement abstract_element, CSS::ComputedProperties& computed_properties)
+void KeyframeEffect::update_computed_properties_for_style(AnimationUpdateContext& context, DOM::AbstractElement abstract_element)
 {
-    context.elements.ensure(abstract_element, [&abstract_element, &computed_properties] {
-        auto old_animated_properties = abstract_element.computed_values()->animated_properties_snapshot();
-        computed_properties.reset_non_inherited_animated_properties({});
-        return AnimationUpdateContext::ElementData { move(old_animated_properties), computed_properties };
+    auto& style_computer = abstract_element.element().document().style_computer();
+    auto& element_data = context.elements.ensure(abstract_element, [&abstract_element, &style_computer] {
+        auto computed_values = abstract_element.computed_values();
+        VERIFY(computed_values);
+        auto old_animated_properties = computed_values->animated_properties_snapshot();
+        auto computed_properties = style_computer.reconstruct_computed_properties(*computed_values);
+        computed_properties->reset_non_inherited_animated_properties({});
+        return AnimationUpdateContext::ElementData { move(old_animated_properties), move(computed_properties) };
     });
 
-    abstract_element.element().document().style_computer().collect_animation_into(abstract_element, *this, computed_properties);
+    VERIFY(element_data.target_style);
+    style_computer.collect_animation_into(abstract_element, *this, *element_data.target_style);
 }
 
 Bindings::CompositeOperation css_animation_composition_to_bindings_composite_operation(CSS::AnimationComposition composition)

Libraries/LibWeb/Animations/KeyframeEffect.h

@@ -107,7 +107,7 @@ class KeyframeEffect final : public AnimationEffect {
     virtual bool is_keyframe_effect() const override { return true; }
 
     virtual void update_computed_properties(AnimationUpdateContext&) override;
-    void update_computed_properties_for_style(AnimationUpdateContext&, DOM::AbstractElement, CSS::ComputedProperties&);
+    void update_computed_properties_for_style(AnimationUpdateContext&, DOM::AbstractElement);
 
 private:
     KeyframeEffect(JS::Realm&);

Libraries/LibWeb/CMakeLists.txt

@@ -93,6 +93,7 @@ set(SOURCES
     CSS/CascadedProperties.cpp
     CSS/Clip.cpp
     CSS/ComputedProperties.cpp
+    CSS/ComputedValues.cpp
     CSS/ContainerQuery.cpp
     CSS/CountersSet.cpp
     CSS/CounterStyle.cpp

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -572,10 +572,10 @@ static void ensure_pseudo_element_style_for_cssom(DOM::AbstractElement abstract_
 
     bool did_change_custom_properties = false;
     auto style = style_computer.compute_pseudo_element_style_if_needed(abstract_element, did_change_custom_properties);
-    if (style.has_value())
-        abstract_element.element().set_computed_style(*pseudo_element, move(style->properties), move(style->values));
+    if (style)
+        abstract_element.element().set_computed_style(*pseudo_element, move(style));
     else
-        abstract_element.element().set_computed_style(*pseudo_element, nullptr, nullptr);
+        abstract_element.element().set_computed_style(*pseudo_element, nullptr);
 }
 
 Optional<StyleProperty> CSSStyleProperties::get_direct_property(PropertyNameAndID const& property_name_and_id) const
@@ -680,31 +680,22 @@ Optional<StyleProperty> CSSStyleProperties::get_direct_property(PropertyNameAndI
 
         if (!layout_node) {
             auto computed_values = abstract_element.computed_values();
-            auto computed_properties = abstract_element.computed_properties();
-            Optional<StyleComputationResult> transient_style;
+            RefPtr<ComputedValues const> transient_style;
             if (!computed_values) {
                 // A synthetic pseudo-element without matching rules has no durable style. Seed the ancestor chain
                 // before this one-off computation so ancestor-dependent selectors still match.
                 transient_style = abstract_element.document().style_computer().compute_style_with_seeded_ancestors(abstract_element);
-                computed_values = transient_style->values;
-                computed_properties = transient_style->properties;
+                computed_values = transient_style;
             }
 
             auto computed_value_for_property = [&](PropertyID computed_property_id) -> NonnullRefPtr<StyleValue const> {
                 if (property_is_logical_alias(computed_property_id))
                     computed_property_id = map_logical_alias_to_physical_property(computed_property_id, LogicalAliasMappingContext { computed_values->writing_mode(), computed_values->direction() });
-                auto computed_value = computed_values->computed_style_value(computed_property_id).release_nonnull();
-                if (computed_property_id == PropertyID::Color)
-                    return computed_value;
-                if (computed_properties) {
-                    auto const& generic_value = computed_properties->property(computed_property_id);
-                    // NB: Color keywords need the resolved typed color when there is no layout node.
-                    if (property_accepts_type(computed_property_id, ValueType::Color) && generic_value.is_keyword() && first_is_one_of(generic_value.to_keyword(), Keyword::Auto, Keyword::Currentcolor))
-                        return computed_value;
-                    // NB: Keep the generic value until typed reconstruction is structurally lossless for this property.
-                    if (*computed_value != generic_value)
-                        return generic_value;
+                if (computed_property_id == PropertyID::BackgroundColor) {
+                    if (auto style_value = computed_values->background_color_style_value(); style_value && !style_value->depends_on_current_color())
+                        return style_value.release_nonnull();
                 }
+                auto computed_value = computed_values->computed_style_value(computed_property_id).release_nonnull();
                 return computed_value;
             };
 
@@ -816,12 +807,7 @@ RefPtr<StyleValue const> CSSStyleProperties::style_value_for_computed_property(L
     };
 
     auto get_computed_value = [&element, pseudo_element](PropertyID property_id) -> NonnullRefPtr<StyleValue const> {
-        auto computed_value = element.computed_values(pseudo_element)->computed_style_value(property_id).release_nonnull();
-        auto const& generic_value = element.computed_properties(pseudo_element)->property(property_id);
-        // NB: Keep the generic value until typed reconstruction is structurally lossless for this property.
-        if (*computed_value != generic_value)
-            return generic_value;
-        return computed_value;
+        return element.computed_values(pseudo_element)->computed_style_value(property_id).release_nonnull();
     };
 
     if (property_is_logical_alias(property_id)) {
@@ -855,7 +841,10 @@ RefPtr<StyleValue const> CSSStyleProperties::style_value_for_computed_property(L
         // -> A resolved value special case property like color defined in another specification
         //    The resolved value is the used value.
     case PropertyID::BackgroundColor:
-        return resolve_color_style_value(*get_computed_value(property_id), layout_node.computed_values().background_color(), &layout_node);
+        return resolve_color_style_value(
+            *layout_node.computed_values().background_color_style_value(),
+            layout_node.computed_values().background_color(),
+            &layout_node);
     case PropertyID::BorderBottomColor:
         return resolve_color_style_value(*get_computed_value(property_id), layout_node.computed_values().border_bottom().color, &layout_node);
     case PropertyID::BorderLeftColor: