LibWeb: Split StyleComputer work into two phases with separate outputs

Before this change, StyleComputer would essentially take a DOM element,
find all the CSS rules that apply to it, and resolve the computed value
for each CSS property for that element.

This worked great, but it meant we had to do all the work of selector
matching and cascading every time.

To enable new optimizations, this change introduces a break in the
middle of this process where we've produced a "CascadedProperties".
This object contains the result of the cascade, before we've begun
turning cascaded values into computed values.

The cascaded properties are now stored with each element, which will
later allow us to do partial updates without re-running the full
StyleComputer machine. This will be particularly valuable for
re-implementing CSS inheritance, which is extremely heavy today.

Note that CSS animations and CSS transitions operate entirely on the
computed values, even though the cascade order would have you believe
they happen earlier. I'm not confident we have the right architecture
for this, but that's a separate issue.

Libraries/LibWeb/CMakeLists.txt

@@ -70,6 +70,7 @@ set(SOURCES
     CSS/CSSStyleValue.cpp
     CSS/CSSSupportsRule.cpp
     CSS/CSSTransition.cpp
+    CSS/CascadedProperties.cpp
     CSS/Display.cpp
     CSS/EdgeRect.cpp
     CSS/FontFace.cpp

Libraries/LibWeb/CSS/CascadeOrigin.h

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+namespace Web::CSS {
+
+// https://www.w3.org/TR/css-cascade/#origin
+enum class CascadeOrigin : u8 {
+    Author,
+    User,
+    UserAgent,
+    Animation,
+    Transition,
+};
+
+}

Libraries/LibWeb/CSS/CascadedProperties.cpp

@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/CSS/CSSStyleDeclaration.h>
+#include <LibWeb/CSS/CascadedProperties.h>
+#include <LibWeb/CSS/Parser/Parser.h>
+
+namespace Web::CSS {
+GC_DEFINE_ALLOCATOR(CascadedProperties);
+
+CascadedProperties::CascadedProperties() = default;
+
+CascadedProperties::~CascadedProperties() = default;
+
+void CascadedProperties::visit_edges(Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    for (auto const& [property_id, entries] : m_properties) {
+        for (auto const& entry : entries) {
+            visitor.visit(entry.source);
+        }
+    }
+}
+
+void CascadedProperties::revert_property(PropertyID property_id, Important important, CascadeOrigin cascade_origin)
+{
+    auto it = m_properties.find(property_id);
+    if (it == m_properties.end())
+        return;
+    auto& entries = it->value;
+    entries.remove_all_matching([&](auto& entry) {
+        return entry.property.property_id == property_id
+            && entry.property.important == important
+            && cascade_origin == entry.origin;
+    });
+    if (entries.is_empty())
+        m_properties.remove(it);
+}
+
+void CascadedProperties::revert_layer_property(PropertyID property_id, Important important, Optional<FlyString> layer_name)
+{
+    auto it = m_properties.find(property_id);
+    if (it == m_properties.end())
+        return;
+    auto& entries = it->value;
+    entries.remove_all_matching([&](auto& entry) {
+        return entry.property.property_id == property_id
+            && entry.property.important == important
+            && layer_name == entry.layer_name;
+    });
+    if (entries.is_empty())
+        m_properties.remove(it);
+}
+
+void CascadedProperties::resolve_unresolved_properties(GC::Ref<DOM::Element> element, Optional<Selector::PseudoElement::Type> pseudo_element)
+{
+    for (auto& [property_id, entries] : m_properties) {
+        for (auto& entry : entries) {
+            if (!entry.property.value->is_unresolved())
+                continue;
+            entry.property.value = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { element->document() }, element, pseudo_element, property_id, entry.property.value->as_unresolved());
+        }
+    }
+}
+
+void CascadedProperties::set_property(PropertyID property_id, NonnullRefPtr<CSSStyleValue const> value, Important important, CascadeOrigin origin, Optional<FlyString> layer_name, GC::Ptr<CSS::CSSStyleDeclaration const> source)
+{
+    auto& entries = m_properties.ensure(property_id);
+
+    for (auto& entry : entries.in_reverse()) {
+        if (entry.origin == origin && entry.layer_name == layer_name) {
+            if (entry.property.important == Important::Yes && important == Important::No)
+                return;
+            entry.property = StyleProperty {
+                .important = important,
+                .property_id = property_id,
+                .value = value,
+            };
+            return;
+        }
+    }
+
+    entries.append(Entry {
+        .property = StyleProperty {
+            .important = important,
+            .property_id = property_id,
+            .value = value,
+        },
+        .origin = origin,
+        .layer_name = move(layer_name),
+        .source = source,
+    });
+}
+
+void CascadedProperties::set_property_from_presentational_hint(PropertyID property_id, NonnullRefPtr<CSSStyleValue const> value)
+{
+    auto& entries = m_properties.ensure(property_id);
+
+    entries.append(Entry {
+        .property = StyleProperty {
+            .important = Important::No,
+            .property_id = property_id,
+            .value = value,
+        },
+        .origin = CascadeOrigin::Author,
+        .layer_name = {},
+        .source = nullptr,
+    });
+}
+
+RefPtr<CSSStyleValue const> CascadedProperties::property(PropertyID property_id) const
+{
+    auto it = m_properties.find(property_id);
+    if (it == m_properties.end())
+        return nullptr;
+
+    return it->value.last().property.value;
+}
+
+GC::Ptr<CSSStyleDeclaration const> CascadedProperties::property_source(PropertyID property_id) const
+{
+    auto it = m_properties.find(property_id);
+    if (it == m_properties.end())
+        return nullptr;
+
+    return it->value.last().source;
+}
+
+bool CascadedProperties::is_property_important(PropertyID property_id) const
+{
+    auto it = m_properties.find(property_id);
+    if (it == m_properties.end())
+        return false;
+
+    return it->value.last().property.important == Important::Yes;
+}
+
+}

Libraries/LibWeb/CSS/CascadedProperties.h

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibGC/CellAllocator.h>
+#include <LibJS/Heap/Cell.h>
+#include <LibWeb/CSS/CSSStyleValue.h>
+#include <LibWeb/CSS/CascadeOrigin.h>
+#include <LibWeb/CSS/PropertyID.h>
+#include <LibWeb/CSS/Selector.h>
+#include <LibWeb/CSS/StyleProperty.h>
+
+namespace Web::CSS {
+
+class CascadedProperties final : public JS::Cell {
+    GC_CELL(CascadedProperties, JS::Cell);
+    GC_DECLARE_ALLOCATOR(CascadedProperties);
+
+public:
+    virtual ~CascadedProperties() override;
+
+    [[nodiscard]] RefPtr<CSSStyleValue const> property(PropertyID) const;
+    [[nodiscard]] GC::Ptr<CSSStyleDeclaration const> property_source(PropertyID) const;
+    [[nodiscard]] bool is_property_important(PropertyID) const;
+
+    void set_property(PropertyID, NonnullRefPtr<CSSStyleValue const>, Important, CascadeOrigin, Optional<FlyString> layer_name, GC::Ptr<CSS::CSSStyleDeclaration const> source);
+    void set_property_from_presentational_hint(PropertyID, NonnullRefPtr<CSSStyleValue const>);
+
+    void revert_property(PropertyID, Important, CascadeOrigin);
+    void revert_layer_property(PropertyID, Important, Optional<FlyString> layer_name);
+
+    void resolve_unresolved_properties(GC::Ref<DOM::Element>, Optional<Selector::PseudoElement::Type>);
+
+private:
+    CascadedProperties();
+
+    virtual void visit_edges(Visitor&) override;
+
+    struct Entry {
+        StyleProperty property;
+        CascadeOrigin origin;
+        Optional<FlyString> layer_name;
+        GC::Ptr<CSS::CSSStyleDeclaration const> source;
+    };
+    HashMap<PropertyID, Vector<Entry>> m_properties;
+};
+
+}

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -887,64 +887,47 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
     set_longhand_property(property_id, value);
 }
 
-void StyleComputer::set_property_expanding_shorthands(StyleProperties& style, PropertyID property_id, CSSStyleValue const& value, CSSStyleDeclaration const* declaration, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important important)
-{
-    auto revert_shorthand = [&](PropertyID shorthand_id, StyleProperties const& style_for_revert) {
-        auto previous_value = style_for_revert.m_data->m_property_values[to_underlying(shorthand_id)];
-        if (!previous_value)
-            previous_value = CSSKeywordValue::create(Keyword::Initial);
-
-        style.set_property(shorthand_id, *previous_value, StyleProperties::Inherited::No, important);
-        if (shorthand_id == CSS::PropertyID::AnimationName)
-            style.set_animation_name_source(style_for_revert.animation_name_source());
-        if (shorthand_id == CSS::PropertyID::TransitionProperty)
-            style.set_transition_property_source(style_for_revert.transition_property_source());
-    };
-
-    for_each_property_expanding_shorthands(property_id, value, AllowUnresolved::No, [&](PropertyID shorthand_id, CSSStyleValue const& shorthand_value) {
-        if (shorthand_value.is_revert()) {
-            revert_shorthand(shorthand_id, style_for_revert);
-        } else if (shorthand_value.is_revert_layer()) {
-            revert_shorthand(shorthand_id, style_for_revert_layer);
+void StyleComputer::set_property_expanding_shorthands(
+    CascadedProperties& cascaded_properties,
+    PropertyID property_id,
+    CSSStyleValue const& value,
+    GC::Ptr<CSSStyleDeclaration const> declaration,
+    CascadeOrigin cascade_origin,
+    Important important,
+    Optional<FlyString> layer_name)
+{
+    for_each_property_expanding_shorthands(property_id, value, AllowUnresolved::No, [&](PropertyID longhand_id, CSSStyleValue const& longhand_value) {
+        if (longhand_value.is_revert()) {
+            cascaded_properties.revert_property(longhand_id, important, cascade_origin);
+        } else if (longhand_value.is_revert_layer()) {
+            cascaded_properties.revert_layer_property(longhand_id, important, layer_name);
         } else {
-            style.set_property(shorthand_id, shorthand_value, StyleProperties::Inherited::No, important);
-            if (shorthand_id == CSS::PropertyID::AnimationName)
-                style.set_animation_name_source(declaration);
-            if (shorthand_id == CSS::PropertyID::TransitionProperty)
-                style.set_transition_property_source(declaration);
+            cascaded_properties.set_property(longhand_id, longhand_value, important, cascade_origin, layer_name, declaration);
         }
     });
 }
 
-void StyleComputer::set_all_properties(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, StyleProperties& style, CSSStyleValue const& value, DOM::Document& document, CSS::CSSStyleDeclaration const* declaration, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important important) const
+void StyleComputer::set_all_properties(
+    CascadedProperties& cascaded_properties,
+    DOM::Element& element,
+    Optional<Selector::PseudoElement::Type> pseudo_element,
+    CSSStyleValue const& value,
+    DOM::Document& document,
+    GC::Ptr<CSSStyleDeclaration const> declaration,
+    CascadeOrigin cascade_origin,
+    Important important,
+    Optional<FlyString> layer_name) const
 {
     for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
         auto property_id = (CSS::PropertyID)i;
 
         if (value.is_revert()) {
-            style.revert_property(property_id, style_for_revert);
+            cascaded_properties.revert_property(property_id, important, cascade_origin);
             continue;
         }
 
         if (value.is_revert_layer()) {
-            style.revert_property(property_id, style_for_revert_layer);
-            continue;
-        }
-
-        if (value.is_unset()) {
-            if (is_inherited_property(property_id)) {
-                style.set_property(
-                    property_id,
-                    get_inherit_value(property_id, &element, pseudo_element),
-                    StyleProperties::Inherited::Yes,
-                    important);
-            } else {
-                style.set_property(
-                    property_id,
-                    property_initial_value(property_id),
-                    StyleProperties::Inherited::No,
-                    important);
-            }
+            cascaded_properties.revert_layer_property(property_id, important, layer_name);
             continue;
         }
 
@@ -952,15 +935,20 @@ void StyleComputer::set_all_properties(DOM::Element& element, Optional<CSS::Sele
         if (property_value->is_unresolved())
             property_value = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { document }, element, pseudo_element, property_id, property_value->as_unresolved());
         if (!property_value->is_unresolved())
-            set_property_expanding_shorthands(style, property_id, property_value, declaration, style_for_revert, style_for_revert_layer);
-
-        style.set_property_important(property_id, important);
+            set_property_expanding_shorthands(cascaded_properties, property_id, property_value, declaration, cascade_origin, important, layer_name);
 
-        set_property_expanding_shorthands(style, property_id, value, declaration, style_for_revert, style_for_revert_layer, important);
+        set_property_expanding_shorthands(cascaded_properties, property_id, value, declaration, cascade_origin, important, layer_name);
     }
 }
 
-void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, Important important, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer) const
+void StyleComputer::cascade_declarations(
+    CascadedProperties& cascaded_properties,
+    DOM::Element& element,
+    Optional<CSS::Selector::PseudoElement::Type> pseudo_element,
+    Vector<MatchingRule> const& matching_rules,
+    CascadeOrigin cascade_origin,
+    Important important,
+    Optional<FlyString> layer_name) const
 {
     for (auto const& match : matching_rules) {
         for (auto const& property : match.declaration().properties()) {
@@ -968,7 +956,7 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
                 continue;
 
             if (property.property_id == CSS::PropertyID::All) {
-                set_all_properties(element, pseudo_element, style, property.value, m_document, &match.declaration(), style_for_revert, style_for_revert_layer, important);
+                set_all_properties(cascaded_properties, element, pseudo_element, property.value, m_document, &match.declaration(), cascade_origin, important, layer_name);
                 continue;
             }
 
@@ -976,7 +964,7 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
             if (property.value->is_unresolved())
                 property_value = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { document() }, element, pseudo_element, property.property_id, property.value->as_unresolved());
             if (!property_value->is_unresolved())
-                set_property_expanding_shorthands(style, property.property_id, property_value, &match.declaration(), style_for_revert, style_for_revert_layer, important);
+                set_property_expanding_shorthands(cascaded_properties, property.property_id, property_value, &match.declaration(), cascade_origin, important, layer_name);
         }
     }
 
@@ -987,7 +975,7 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
                     continue;
 
                 if (property.property_id == CSS::PropertyID::All) {
-                    set_all_properties(element, pseudo_element, style, property.value, m_document, inline_style, style_for_revert, style_for_revert_layer, important);
+                    set_all_properties(cascaded_properties, element, pseudo_element, property.value, m_document, inline_style, cascade_origin, important, layer_name);
                     continue;
                 }
 
@@ -995,7 +983,7 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
                 if (property.value->is_unresolved())
                     property_value = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { document() }, element, pseudo_element, property.property_id, property.value->as_unresolved());
                 if (!property_value->is_unresolved())
-                    set_property_expanding_shorthands(style, property.property_id, property_value, inline_style, style_for_revert, style_for_revert_layer, important);
+                    set_property_expanding_shorthands(cascaded_properties, property.property_id, property_value, inline_style, cascade_origin, important, layer_name);
             }
         }
     }
@@ -1087,9 +1075,11 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
                 [&](Animations::KeyframeEffect::KeyFrameSet::UseInitial) -> RefPtr<CSSStyleValue const> {
                     if (refresh == AnimationRefresh::Yes)
                         return {};
-                    return style_properties.maybe_null_property(it.key);
+                    return style_properties.property(it.key);
                 },
                 [&](RefPtr<CSSStyleValue const> value) -> RefPtr<CSSStyleValue const> {
+                    if (value->is_revert() || value->is_revert_layer())
+                        return style_properties.property(it.key);
                     if (value->is_unresolved())
                         return Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { element.document() }, element, pseudo_element, it.key, value->as_unresolved());
                     return value;
@@ -1133,12 +1123,12 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
     }
 }
 
-static void apply_animation_properties(DOM::Document& document, StyleProperties& style, Animations::Animation& animation)
+static void apply_animation_properties(DOM::Document& document, CascadedProperties& cascaded_properties, Animations::Animation& animation)
 {
     auto& effect = verify_cast<Animations::KeyframeEffect>(*animation.effect());
 
     Optional<CSS::Time> duration;
-    if (auto duration_value = style.maybe_null_property(PropertyID::AnimationDuration); duration_value) {
+    if (auto duration_value = cascaded_properties.property(PropertyID::AnimationDuration); duration_value) {
         if (duration_value->is_time()) {
             duration = duration_value->as_time().time();
         } else if (duration_value->is_keyword() && duration_value->as_keyword().keyword() == Keyword::Auto) {
@@ -1148,11 +1138,11 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
     }
 
     CSS::Time delay { 0, CSS::Time::Type::S };
-    if (auto delay_value = style.maybe_null_property(PropertyID::AnimationDelay); delay_value && delay_value->is_time())
+    if (auto delay_value = cascaded_properties.property(PropertyID::AnimationDelay); delay_value && delay_value->is_time())
         delay = delay_value->as_time().time();
 
     double iteration_count = 1.0;
-    if (auto iteration_count_value = style.maybe_null_property(PropertyID::AnimationIterationCount); iteration_count_value) {
+    if (auto iteration_count_value = cascaded_properties.property(PropertyID::AnimationIterationCount); iteration_count_value) {
         if (iteration_count_value->is_keyword() && iteration_count_value->to_keyword() == Keyword::Infinite)
             iteration_count = HUGE_VAL;
         else if (iteration_count_value->is_number())
@@ -1160,25 +1150,25 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
     }
 
     CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None };
-    if (auto fill_mode_property = style.maybe_null_property(PropertyID::AnimationFillMode); fill_mode_property && fill_mode_property->is_keyword()) {
+    if (auto fill_mode_property = cascaded_properties.property(PropertyID::AnimationFillMode); fill_mode_property && fill_mode_property->is_keyword()) {
         if (auto fill_mode_value = keyword_to_animation_fill_mode(fill_mode_property->to_keyword()); fill_mode_value.has_value())
             fill_mode = *fill_mode_value;
     }
 
     CSS::AnimationDirection direction { CSS::AnimationDirection::Normal };
-    if (auto direction_property = style.maybe_null_property(PropertyID::AnimationDirection); direction_property && direction_property->is_keyword()) {
+    if (auto direction_property = cascaded_properties.property(PropertyID::AnimationDirection); direction_property && direction_property->is_keyword()) {
         if (auto direction_value = keyword_to_animation_direction(direction_property->to_keyword()); direction_value.has_value())
             direction = *direction_value;
     }
 
     CSS::AnimationPlayState play_state { CSS::AnimationPlayState::Running };
-    if (auto play_state_property = style.maybe_null_property(PropertyID::AnimationPlayState); play_state_property && play_state_property->is_keyword()) {
+    if (auto play_state_property = cascaded_properties.property(PropertyID::AnimationPlayState); play_state_property && play_state_property->is_keyword()) {
         if (auto play_state_value = keyword_to_animation_play_state(play_state_property->to_keyword()); play_state_value.has_value())
             play_state = *play_state_value;
     }
 
     CSS::EasingStyleValue::Function timing_function { CSS::EasingStyleValue::CubicBezier::ease() };
-    if (auto timing_property = style.maybe_null_property(PropertyID::AnimationTimingFunction); timing_property && timing_property->is_easing())
+    if (auto timing_property = cascaded_properties.property(PropertyID::AnimationTimingFunction); timing_property && timing_property->is_easing())
         timing_function = timing_property->as_easing().function();
 
     auto iteration_duration = duration.has_value()
@@ -1204,7 +1194,7 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
     }
 }
 
-static void apply_dimension_attribute(StyleProperties& style, DOM::Element const& element, FlyString const& attribute_name, CSS::PropertyID property_id)
+static void apply_dimension_attribute(CascadedProperties& cascaded_properties, DOM::Element const& element, FlyString const& attribute_name, CSS::PropertyID property_id)
 {
     auto attribute = element.attribute(attribute_name);
     if (!attribute.has_value())
@@ -1214,7 +1204,7 @@ static void apply_dimension_attribute(StyleProperties& style, DOM::Element const
     if (!parsed_value)
         return;
 
-    style.set_property(property_id, parsed_value.release_nonnull());
+    cascaded_properties.set_property_from_presentational_hint(property_id, parsed_value.release_nonnull());
 }
 
 static void compute_transitioned_properties(StyleProperties const& style, DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element)
@@ -1495,8 +1485,10 @@ void StyleComputer::start_needed_transitions(StyleProperties const& previous_sty
 
 // https://www.w3.org/TR/css-cascade/#cascading
 // https://drafts.csswg.org/css-cascade-5/#layering
-void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, bool& did_match_any_pseudo_element_rules, ComputeStyleMode mode) const
+GC::Ref<CascadedProperties> StyleComputer::compute_cascaded_values(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, bool& did_match_any_pseudo_element_rules, ComputeStyleMode mode) const
 {
+    auto cascaded_properties = m_document->heap().allocate<CascadedProperties>();
+
     // First, we collect all the CSS rules whose selectors match `element`:
     MatchingRuleSet matching_rule_set;
     matching_rule_set.user_agent_rules = collect_matching_rules(element, CascadeOrigin::UserAgent, pseudo_element);
@@ -1518,7 +1510,7 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element
         VERIFY(pseudo_element.has_value());
         if (matching_rule_set.author_rules.is_empty() && matching_rule_set.user_rules.is_empty() && matching_rule_set.user_agent_rules.is_empty()) {
             did_match_any_pseudo_element_rules = false;
-            return;
+            return cascaded_properties;
         }
         did_match_any_pseudo_element_rules = true;
     }
@@ -1535,14 +1527,10 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element
     // Then we apply the declarations from the matched rules in cascade order:
 
     // Normal user agent declarations
-    auto previous_origin_style = style;
-    auto previous_layer_style = style;
-    cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::No, previous_origin_style, previous_layer_style);
+    cascade_declarations(*cascaded_properties, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::No, {});
 
     // Normal user declarations
-    previous_origin_style = style;
-    previous_layer_style = style;
-    cascade_declarations(style, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::No, previous_origin_style, previous_layer_style);
+    cascade_declarations(*cascaded_properties, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::No, {});
 
     // Author presentational hints
     // The spec calls this a special "Author presentational hint origin":
@@ -1550,119 +1538,40 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element
     // however for the purpose of the revert keyword (but not for the revert-layer keyword) it is considered
     // part of the author origin."
     // https://drafts.csswg.org/css-cascade-5/#author-presentational-hint-origin
-    previous_origin_style = style;
     if (!pseudo_element.has_value()) {
-        element.apply_presentational_hints(style);
-
+        element.apply_presentational_hints(cascaded_properties);
         if (element.supports_dimension_attributes()) {
-            apply_dimension_attribute(style, element, HTML::AttributeNames::width, CSS::PropertyID::Width);
-            apply_dimension_attribute(style, element, HTML::AttributeNames::height, CSS::PropertyID::Height);
+            apply_dimension_attribute(cascaded_properties, element, HTML::AttributeNames::width, CSS::PropertyID::Width);
+            apply_dimension_attribute(cascaded_properties, element, HTML::AttributeNames::height, CSS::PropertyID::Height);
         }
 
         // SVG presentation attributes are parsed as CSS values, so we need to handle potential custom properties here.
         if (element.is_svg_element()) {
-            // FIXME: This is not very efficient, we should only resolve the custom properties that are actually used.
-            for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {
-                auto property_id = (CSS::PropertyID)i;
-                auto& property = style.m_data->m_property_values[i];
-                if (property && property->is_unresolved())
-                    property = Parser::Parser::resolve_unresolved_style_value(Parser::ParsingContext { document() }, element, pseudo_element, property_id, property->as_unresolved());
-            }
+            cascaded_properties->resolve_unresolved_properties(element, pseudo_element);
         }
     }
 
     // Normal author declarations, ordered by @layer, with un-@layer-ed rules last
     for (auto const& layer : matching_rule_set.author_rules) {
-        previous_layer_style = style;
-        cascade_declarations(style, element, pseudo_element, layer.rules, CascadeOrigin::Author, Important::No, previous_origin_style, previous_layer_style);
-    }
-
-    // Animation declarations [css-animations-2]
-    auto animation_name = [&]() -> Optional<String> {
-        auto const* animation_name = style.maybe_null_property(PropertyID::AnimationName);
-        if (!animation_name)
-            return OptionalNone {};
-        if (animation_name->is_string())
-            return animation_name->as_string().string_value().to_string();
-        return animation_name->to_string(CSSStyleValue::SerializationMode::Normal);
-    }();
-
-    if (animation_name.has_value()) {
-        if (auto source_declaration = style.animation_name_source()) {
-            auto& realm = element.realm();
-
-            if (source_declaration != element.cached_animation_name_source(pseudo_element)) {
-                // This animation name is new, so we need to create a new animation for it.
-                if (auto existing_animation = element.cached_animation_name_animation(pseudo_element))
-                    existing_animation->cancel(Animations::Animation::ShouldInvalidate::No);
-                element.set_cached_animation_name_source(source_declaration, pseudo_element);
-
-                auto effect = Animations::KeyframeEffect::create(realm);
-                auto animation = CSSAnimation::create(realm);
-                animation->set_id(animation_name.release_value());
-                animation->set_timeline(m_document->timeline());
-                animation->set_owning_element(element);
-                animation->set_effect(effect);
-                apply_animation_properties(m_document, style, animation);
-                if (pseudo_element.has_value())
-                    effect->set_pseudo_element(Selector::PseudoElement { pseudo_element.value() });
-
-                auto const& rule_cache = rule_cache_for_cascade_origin(CascadeOrigin::Author);
-                if (auto keyframe_set = rule_cache.rules_by_animation_keyframes.get(animation->id()); keyframe_set.has_value())
-                    effect->set_key_frame_set(keyframe_set.value());
-
-                effect->set_target(&element);
-                element.set_cached_animation_name_animation(animation, pseudo_element);
-
-                HTML::TemporaryExecutionContext context(realm);
-                animation->play().release_value_but_fixme_should_propagate_errors();
-            } else {
-                // The animation hasn't changed, but some properties of the animation may have
-                apply_animation_properties(m_document, style, *element.cached_animation_name_animation(pseudo_element));
-            }
-        }
-    } else {
-        // If the element had an existing animation, cancel it
-        if (auto existing_animation = element.cached_animation_name_animation(pseudo_element)) {
-            existing_animation->cancel(Animations::Animation::ShouldInvalidate::No);
-            element.set_cached_animation_name_animation({}, pseudo_element);
-            element.set_cached_animation_name_source({}, pseudo_element);
-        }
-    }
-
-    auto animations = element.get_animations_internal(Animations::GetAnimationsOptions { .subtree = false });
-    if (animations.is_exception()) {
-        dbgln("Error getting animations for element {}", element.debug_description());
-    } else {
-        for (auto& animation : animations.value()) {
-            if (auto effect = animation->effect(); effect && effect->is_keyframe_effect()) {
-                auto& keyframe_effect = *static_cast<Animations::KeyframeEffect*>(effect.ptr());
-                if (keyframe_effect.pseudo_element_type() == pseudo_element)
-                    collect_animation_into(element, pseudo_element, keyframe_effect, style);
-            }
-        }
+        cascade_declarations(cascaded_properties, element, pseudo_element, layer.rules, CascadeOrigin::Author, Important::No, layer.qualified_layer_name);
     }
 
     // Important author declarations, with un-@layer-ed rules first, followed by each @layer in reverse order.
-    previous_origin_style = style;
     for (auto const& layer : matching_rule_set.author_rules.in_reverse()) {
-        previous_layer_style = style;
-        cascade_declarations(style, element, pseudo_element, layer.rules, CascadeOrigin::Author, Important::Yes, previous_origin_style, previous_layer_style);
+        cascade_declarations(cascaded_properties, element, pseudo_element, layer.rules, CascadeOrigin::Author, Important::Yes, {});
     }
 
     // Important user declarations
-    previous_origin_style = style;
-    previous_layer_style = style;
-    cascade_declarations(style, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::Yes, previous_origin_style, previous_layer_style);
+    cascade_declarations(cascaded_properties, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::Yes, {});
 
     // Important user agent declarations
-    previous_origin_style = style;
-    previous_layer_style = style;
-    cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::Yes, previous_origin_style, previous_layer_style);
+    cascade_declarations(cascaded_properties, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::Yes, {});
 
     // Transition declarations [css-transitions-1]
     // Note that we have to do these after finishing computing the style,
     // so they're not done here, but as the final step in compute_style_impl()
+
+    return cascaded_properties;
 }
 
 DOM::Element const* element_to_inherit_style_from(DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element)
@@ -2377,10 +2286,11 @@ Optional<StyleProperties> StyleComputer::compute_style_impl(DOM::Element& elemen
 
     ScopeGuard guard { [&element]() { element.set_needs_style_update(false); } };
 
-    StyleProperties style = {};
     // 1. Perform the cascade. This produces the "specified style"
     bool did_match_any_pseudo_element_rules = false;
-    compute_cascaded_values(style, element, pseudo_element, did_match_any_pseudo_element_rules, mode);
+    auto cascaded_properties = compute_cascaded_values(element, pseudo_element, did_match_any_pseudo_element_rules, mode);
+
+    element.set_cascaded_properties(pseudo_element, cascaded_properties);
 
     if (mode == ComputeStyleMode::CreatePseudoElementStyleIfNeeded) {
         // NOTE: If we're computing style for a pseudo-element, we look for a number of reasons to bail early.
@@ -2393,7 +2303,7 @@ Optional<StyleProperties> StyleComputer::compute_style_impl(DOM::Element& elemen
         // - content: none
         // - content: normal (for ::before and ::after)
         bool content_is_normal = false;
-        if (auto content_value = style.maybe_null_property(CSS::PropertyID::Content)) {
+        if (auto content_value = cascaded_properties->property(CSS::PropertyID::Content)) {
             if (content_value->is_keyword()) {
                 auto content = content_value->as_keyword().keyword();
                 if (content == CSS::Keyword::None)
@@ -2411,35 +2321,140 @@ Optional<StyleProperties> StyleComputer::compute_style_impl(DOM::Element& elemen
         }
     }
 
+    return compute_properties(element, pseudo_element, cascaded_properties);
+}
+
+StyleProperties StyleComputer::compute_properties(DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element, CascadedProperties& cascaded_properties) const
+{
+    StyleProperties computed_style;
+
+    for (auto i = to_underlying(first_longhand_property_id); i <= to_underlying(last_longhand_property_id); ++i) {
+        auto property_id = static_cast<CSS::PropertyID>(i);
+        auto value = cascaded_properties.property(property_id);
+        if ((!value && is_inherited_property(property_id))
+            || (value && value->is_inherit())) {
+            if (auto inheritance_parent = element_to_inherit_style_from(&element, pseudo_element)) {
+                value = inheritance_parent->computed_css_values()->property(property_id);
+            } else {
+                value = property_initial_value(property_id);
+            }
+        }
+
+        if (!value || value->is_initial())
+            value = property_initial_value(property_id);
+
+        if (value->is_unset()) {
+            if (is_inherited_property(property_id))
+                value = CSSKeywordValue::create(Keyword::Inherit);
+            else
+                value = CSSKeywordValue::create(Keyword::Initial);
+        }
+
+        computed_style.set_property(property_id, value.release_nonnull());
+
+        if (property_id == PropertyID::AnimationName) {
+            computed_style.set_animation_name_source(cascaded_properties.property_source(property_id));
+        }
+        if (property_id == PropertyID::TransitionProperty) {
+            computed_style.set_transition_property_source(cascaded_properties.property_source(property_id));
+        }
+    }
+
+    // Animation declarations [css-animations-2]
+    auto animation_name = [&]() -> Optional<String> {
+        auto const animation_name = computed_style.maybe_null_property(PropertyID::AnimationName);
+        if (!animation_name)
+            return OptionalNone {};
+        if (animation_name->is_string())
+            return animation_name->as_string().string_value().to_string();
+        return animation_name->to_string(CSSStyleValue::SerializationMode::Normal);
+    }();
+
+    if (animation_name.has_value()) {
+        if (auto source_declaration = computed_style.animation_name_source()) {
+            auto& realm = element.realm();
+
+            if (source_declaration != element.cached_animation_name_source(pseudo_element)) {
+                // This animation name is new, so we need to create a new animation for it.
+                if (auto existing_animation = element.cached_animation_name_animation(pseudo_element))
+                    existing_animation->cancel(Animations::Animation::ShouldInvalidate::No);
+                element.set_cached_animation_name_source(source_declaration, pseudo_element);
+
+                auto effect = Animations::KeyframeEffect::create(realm);
+                auto animation = CSSAnimation::create(realm);
+                animation->set_id(animation_name.release_value());
+                animation->set_timeline(m_document->timeline());
+                animation->set_owning_element(element);
+                animation->set_effect(effect);
+                apply_animation_properties(m_document, cascaded_properties, animation);
+                if (pseudo_element.has_value())
+                    effect->set_pseudo_element(Selector::PseudoElement { pseudo_element.value() });
+
+                auto const& rule_cache = rule_cache_for_cascade_origin(CascadeOrigin::Author);
+                if (auto keyframe_set = rule_cache.rules_by_animation_keyframes.get(animation->id()); keyframe_set.has_value())
+                    effect->set_key_frame_set(keyframe_set.value());
+
+                effect->set_target(&element);
+                element.set_cached_animation_name_animation(animation, pseudo_element);
+
+                HTML::TemporaryExecutionContext context(realm);
+                animation->play().release_value_but_fixme_should_propagate_errors();
+            } else {
+                // The animation hasn't changed, but some properties of the animation may have
+                apply_animation_properties(m_document, cascaded_properties, *element.cached_animation_name_animation(pseudo_element));
+            }
+        }
+    } else {
+        // If the element had an existing animation, cancel it
+        if (auto existing_animation = element.cached_animation_name_animation(pseudo_element)) {
+            existing_animation->cancel(Animations::Animation::ShouldInvalidate::No);
+            element.set_cached_animation_name_animation({}, pseudo_element);
+            element.set_cached_animation_name_source({}, pseudo_element);
+        }
+    }
+
+    auto animations = element.get_animations_internal(Animations::GetAnimationsOptions { .subtree = false });
+    if (animations.is_exception()) {
+        dbgln("Error getting animations for element {}", element.debug_description());
+    } else {
+        for (auto& animation : animations.value()) {
+            if (auto effect = animation->effect(); effect && effect->is_keyframe_effect()) {
+                auto& keyframe_effect = *static_cast<Animations::KeyframeEffect*>(effect.ptr());
+                if (keyframe_effect.pseudo_element_type() == pseudo_element)
+                    collect_animation_into(element, pseudo_element, keyframe_effect, computed_style);
+            }
+        }
+    }
+
     // 2. Compute the math-depth property, since that might affect the font-size
-    compute_math_depth(style, &element, pseudo_element);
+    compute_math_depth(computed_style, &element, pseudo_element);
 
     // 3. Compute the font, since that may be needed for font-relative CSS units
-    compute_font(style, &element, pseudo_element);
+    compute_font(computed_style, &element, pseudo_element);
 
     // 4. Absolutize values, turning font/viewport relative lengths into absolute lengths
-    absolutize_values(style);
+    absolutize_values(computed_style);
 
     // 5. Default the values, applying inheritance and 'initial' as needed
-    compute_defaulted_values(style, &element, pseudo_element);
+    compute_defaulted_values(computed_style, &element, pseudo_element);
 
     // 6. Run automatic box type transformations
-    transform_box_type_if_needed(style, element, pseudo_element);
+    transform_box_type_if_needed(computed_style, element, pseudo_element);
 
     // 7. Resolve effective overflow values
-    resolve_effective_overflow_values(style);
+    resolve_effective_overflow_values(computed_style);
 
     // 8. Let the element adjust computed style
-    element.adjust_computed_style(style);
+    element.adjust_computed_style(computed_style);
 
     // 9. Transition declarations [css-transitions-1]
     // Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now.
-    compute_transitioned_properties(style, element, pseudo_element);
+    compute_transitioned_properties(computed_style, element, pseudo_element);
     if (auto previous_style = element.computed_css_values(); previous_style.has_value()) {
-        start_needed_transitions(*previous_style, style, element, pseudo_element);
+        start_needed_transitions(*previous_style, computed_style, element, pseudo_element);
     }
 
-    return style;
+    return computed_style;
 }
 
 void StyleComputer::build_rule_cache_if_needed() const

Libraries/LibWeb/CSS/StyleComputer.h

@@ -15,6 +15,8 @@
 #include <LibWeb/CSS/CSSFontFaceRule.h>
 #include <LibWeb/CSS/CSSKeyframesRule.h>
 #include <LibWeb/CSS/CSSStyleDeclaration.h>
+#include <LibWeb/CSS/CascadeOrigin.h>
+#include <LibWeb/CSS/CascadedProperties.h>
 #include <LibWeb/CSS/Selector.h>
 #include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/Forward.h>
@@ -71,15 +73,6 @@ private:
     CounterType m_buckets[bucket_count];
 };
 
-// https://www.w3.org/TR/css-cascade/#origin
-enum class CascadeOrigin : u8 {
-    Author,
-    User,
-    UserAgent,
-    Animation,
-    Transition,
-};
-
 struct MatchingRule {
     GC::Ptr<DOM::ShadowRoot const> shadow_root;
     GC::Ptr<CSSRule const> rule; // Either CSSStyleRule or CSSNestedDeclarations
@@ -126,7 +119,14 @@ public:
         No,
     };
     static void for_each_property_expanding_shorthands(PropertyID, CSSStyleValue const&, AllowUnresolved, Function<void(PropertyID, CSSStyleValue const&)> const& set_longhand_property);
-    static void set_property_expanding_shorthands(StyleProperties&, PropertyID, CSSStyleValue const&, CSS::CSSStyleDeclaration const*, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important = Important::No);
+    static void set_property_expanding_shorthands(
+        CascadedProperties&,
+        PropertyID,
+        CSSStyleValue const&,
+        GC::Ptr<CSSStyleDeclaration const>,
+        CascadeOrigin,
+        Important,
+        Optional<FlyString> layer_name);
     static NonnullRefPtr<CSSStyleValue const> get_inherit_value(CSS::PropertyID, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type> = {});
 
     static Optional<String> user_agent_style_sheet_source(StringView name);
@@ -167,12 +167,14 @@ public:
         No,
         Yes,
     };
-    void collect_animation_into(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, GC::Ref<Animations::KeyframeEffect> animation, StyleProperties& style_properties, AnimationRefresh = AnimationRefresh::No) const;
+    void collect_animation_into(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, GC::Ref<Animations::KeyframeEffect> animation, StyleProperties&, AnimationRefresh = AnimationRefresh::No) const;
 
     [[nodiscard]] bool has_has_selectors() const { return m_has_has_selectors; }
 
     size_t number_of_css_font_faces_with_loading_in_progress() const;
 
+    [[nodiscard]] StyleProperties compute_properties(DOM::Element&, Optional<Selector::PseudoElement::Type>, CascadedProperties&) const;
+
 private:
     enum class ComputeStyleMode {
         Normal,
@@ -184,7 +186,7 @@ private:
     [[nodiscard]] bool should_reject_with_ancestor_filter(Selector const&) const;
 
     Optional<StyleProperties> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, ComputeStyleMode) const;
-    void compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, bool& did_match_any_pseudo_element_rules, ComputeStyleMode) const;
+    [[nodiscard]] GC::Ref<CascadedProperties> compute_cascaded_values(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, bool& did_match_any_pseudo_element_rules, ComputeStyleMode) const;
     static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_ascending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
     static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
     RefPtr<Gfx::FontCascadeList const> font_matching_algorithm(FlyString const& family_name, int weight, int slope, float font_size_in_pt) const;
@@ -198,7 +200,16 @@ private:
 
     void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const;
 
-    void set_all_properties(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, StyleProperties&, CSSStyleValue const&, DOM::Document&, CSS::CSSStyleDeclaration const*, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important = Important::No) const;
+    void set_all_properties(
+        CascadedProperties&,
+        DOM::Element&,
+        Optional<Selector::PseudoElement::Type>,
+        CSSStyleValue const&,
+        DOM::Document&,
+        GC::Ptr<CSSStyleDeclaration const>,
+        CascadeOrigin,
+        Important,
+        Optional<FlyString> layer_name) const;
 
     template<typename Callback>
     void for_each_stylesheet(CascadeOrigin, Callback) const;
@@ -221,7 +232,14 @@ private:
         Vector<LayerMatchingRules> author_rules;
     };
 
-    void cascade_declarations(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, Vector<MatchingRule> const&, CascadeOrigin, Important, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer) const;
+    void cascade_declarations(
+        CascadedProperties&,
+        DOM::Element&,
+        Optional<CSS::Selector::PseudoElement::Type>,
+        Vector<MatchingRule> const&,
+        CascadeOrigin,
+        Important,
+        Optional<FlyString> layer_name) const;
 
     void build_rule_cache();
     void build_rule_cache_if_needed() const;

Libraries/LibWeb/DOM/Element.cpp

@@ -101,8 +101,10 @@ void Element::visit_edges(Cell::Visitor& visitor)
     visitor.visit(m_class_list);
     visitor.visit(m_shadow_root);
     visitor.visit(m_custom_element_definition);
+    visitor.visit(m_cascaded_properties);
     if (m_pseudo_element_data) {
         for (auto& pseudo_element : *m_pseudo_element_data) {
+            visitor.visit(pseudo_element.cascaded_properties);
             visitor.visit(pseudo_element.layout_node);
         }
     }
@@ -2273,6 +2275,28 @@ size_t Element::attribute_list_size() const
     return m_attributes->length();
 }
 
+GC::Ptr<CSS::CascadedProperties> Element::cascaded_properties(Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+{
+    if (pseudo_element.has_value()) {
+        auto pseudo_element_data = get_pseudo_element(pseudo_element.value());
+        if (pseudo_element_data.has_value())
+            return pseudo_element_data->cascaded_properties;
+        return nullptr;
+    }
+    return m_cascaded_properties;
+}
+
+void Element::set_cascaded_properties(Optional<CSS::Selector::PseudoElement::Type> pseudo_element, GC::Ptr<CSS::CascadedProperties> cascaded_properties)
+{
+    if (pseudo_element.has_value()) {
+        if (pseudo_element.value() >= CSS::Selector::PseudoElement::Type::KnownPseudoElementCount)
+            return;
+        ensure_pseudo_element(pseudo_element.value()).cascaded_properties = cascaded_properties;
+    } else {
+        m_cascaded_properties = cascaded_properties;
+    }
+}
+
 void Element::set_computed_css_values(Optional<CSS::StyleProperties> style)
 {
     m_computed_css_values = move(style);

Libraries/LibWeb/DOM/Element.h

@@ -13,6 +13,7 @@
 #include <LibWeb/Bindings/ElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/Bindings/ShadowRootPrototype.h>
+#include <LibWeb/CSS/CascadedProperties.h>
 #include <LibWeb/CSS/CountersSet.h>
 #include <LibWeb/CSS/Selector.h>
 #include <LibWeb/CSS/StyleInvalidation.h>
@@ -172,7 +173,7 @@ public:
     // https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
     virtual bool supports_dimension_attributes() const { return false; }
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const { }
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const { }
 
     void run_attribute_change_steps(FlyString const& local_name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_);
 
@@ -189,6 +190,9 @@ public:
     void set_computed_css_values(Optional<CSS::StyleProperties>);
     CSS::StyleProperties resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> = {});
 
+    [[nodiscard]] GC::Ptr<CSS::CascadedProperties> cascaded_properties(Optional<CSS::Selector::PseudoElement::Type>) const;
+    void set_cascaded_properties(Optional<CSS::Selector::PseudoElement::Type>, GC::Ptr<CSS::CascadedProperties>);
+
     void set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type, Optional<CSS::StyleProperties>);
     Optional<CSS::StyleProperties&> pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type);
 
@@ -410,11 +414,14 @@ private:
     GC::Ptr<DOMTokenList> m_class_list;
     GC::Ptr<ShadowRoot> m_shadow_root;
 
+    GC::Ptr<CSS::CascadedProperties> m_cascaded_properties;
+
     Optional<CSS::StyleProperties> m_computed_css_values;
     HashMap<FlyString, CSS::StyleProperty> m_custom_properties;
 
     struct PseudoElement {
         GC::Ptr<Layout::NodeWithStyle> layout_node;
+        GC::Ptr<CSS::CascadedProperties> cascaded_properties;
         Optional<CSS::StyleProperties> computed_css_values;
         HashMap<FlyString, CSS::StyleProperty> custom_properties;
     };

Libraries/LibWeb/Dump.cpp

@@ -137,14 +137,14 @@ void dump_tree(StringBuilder& builder, DOM::Node const& node)
     --indent;
 }
 
-void dump_tree(Layout::Node const& layout_node, bool show_box_model, bool show_specified_style)
+void dump_tree(Layout::Node const& layout_node, bool show_box_model, bool show_cascaded_properties)
 {
     StringBuilder builder;
-    dump_tree(builder, layout_node, show_box_model, show_specified_style, true);
+    dump_tree(builder, layout_node, show_box_model, show_cascaded_properties, true);
     dbgln("{}", builder.string_view());
 }
 
-void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool show_box_model, bool show_specified_style, bool interactive)
+void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool show_box_model, bool show_cascaded_properties, bool interactive)
 {
     static size_t indent = 0;
     for (size_t i = 0; i < indent; ++i)
@@ -329,7 +329,7 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
                 builder.appendff(" (url: {})", document->url());
                 if (auto const* nested_layout_root = document->layout_node()) {
                     ++indent;
-                    dump_tree(builder, *nested_layout_root, show_box_model, show_specified_style, interactive);
+                    dump_tree(builder, *nested_layout_root, show_box_model, show_cascaded_properties, interactive);
                     --indent;
                 }
             }
@@ -348,7 +348,7 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
                         builder.append("  "sv);
                     builder.append("(SVG-as-image isolated context)\n"sv);
 
-                    dump_tree(builder, *svg_data.svg_document().layout_node(), show_box_model, show_specified_style, interactive);
+                    dump_tree(builder, *svg_data.svg_document().layout_node(), show_box_model, show_cascaded_properties, interactive);
                     --indent;
                 }
             }
@@ -397,7 +397,7 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
         }
     }
 
-    if (show_specified_style && layout_node.dom_node() && layout_node.dom_node()->is_element() && verify_cast<DOM::Element>(layout_node.dom_node())->computed_css_values().has_value()) {
+    if (show_cascaded_properties && layout_node.dom_node() && layout_node.dom_node()->is_element() && verify_cast<DOM::Element>(layout_node.dom_node())->computed_css_values().has_value()) {
         struct NameAndValue {
             FlyString name;
             String value;
@@ -417,7 +417,7 @@ void dump_tree(StringBuilder& builder, Layout::Node const& layout_node, bool sho
 
     ++indent;
     layout_node.for_each_child([&](auto& child) {
-        dump_tree(builder, child, show_box_model, show_specified_style, interactive);
+        dump_tree(builder, child, show_box_model, show_cascaded_properties, interactive);
         return IterationDecision::Continue;
     });
     --indent;

Libraries/LibWeb/Dump.h

@@ -16,8 +16,8 @@ namespace Web {
 void dump_tree(HTML::TraversableNavigable&);
 void dump_tree(StringBuilder&, DOM::Node const&);
 void dump_tree(DOM::Node const&);
-void dump_tree(StringBuilder&, Layout::Node const&, bool show_box_model = false, bool show_specified_style = false, bool colorize = false);
-void dump_tree(Layout::Node const&, bool show_box_model = true, bool show_specified_style = false);
+void dump_tree(StringBuilder&, Layout::Node const&, bool show_box_model = false, bool show_cascaded_properties = false, bool colorize = false);
+void dump_tree(Layout::Node const&, bool show_box_model = true, bool show_cascaded_properties = false);
 void dump_tree(StringBuilder&, Painting::Paintable const&, bool colorize = false, int indent = 0);
 void dump_tree(Painting::Paintable const&);
 void dump_sheet(StringBuilder&, CSS::StyleSheet const&);

Libraries/LibWeb/HTML/HTMLBodyElement.cpp

@@ -41,22 +41,22 @@ void HTMLBodyElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLBodyElement);
 }
 
-void HTMLBodyElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLBodyElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("bgcolor"sv)) {
             // https://html.spec.whatwg.org/multipage/rendering.html#the-page:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
         } else if (name.equals_ignoring_ascii_case("text"sv)) {
             // https://html.spec.whatwg.org/multipage/rendering.html#the-page:rules-for-parsing-a-legacy-colour-value-2
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::Color, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Color, CSS::CSSColorValue::create_from_color(color.value()));
         } else if (name.equals_ignoring_ascii_case("background"sv)) {
             VERIFY(m_background_style_value);
-            style.set_property(CSS::PropertyID::BackgroundImage, *m_background_style_value);
+            cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundImage, *m_background_style_value);
         }
     });
 
@@ -84,7 +84,7 @@ void HTMLBodyElement::apply_presentational_hints(CSS::StyleProperties& style) co
         if (!value.has_value())
             return;
         if (auto parsed_value = parse_non_negative_integer(value.value()); parsed_value.has_value())
-            style.set_property(property_id, CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value)));
+            cascaded_properties->set_property_from_presentational_hint(property_id, CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value)));
     };
 
     apply_margin_value(CSS::PropertyID::MarginTop, margin_top_value);

Libraries/LibWeb/HTML/HTMLBodyElement.h

@@ -22,7 +22,7 @@ public:
     virtual ~HTMLBodyElement() override;
 
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // https://www.w3.org/TR/html-aria/#el-body
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::generic; }

Libraries/LibWeb/HTML/HTMLCanvasElement.cpp

@@ -65,7 +65,7 @@ void HTMLCanvasElement::visit_edges(Cell::Visitor& visitor)
         });
 }
 
-void HTMLCanvasElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLCanvasElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
     // The width and height attributes map to the aspect-ratio property on canvas elements.
@@ -79,7 +79,7 @@ void HTMLCanvasElement::apply_presentational_hints(CSS::StyleProperties& style)
 
     if (w.has_value() && h.has_value())
         // then the user agent is expected to use the parsed integers as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
-        style.set_property(CSS::PropertyID::AspectRatio,
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::AspectRatio,
             CSS::StyleValueList::create(CSS::StyleValueVector {
                                             CSS::CSSKeywordValue::create(CSS::Keyword::Auto),
                                             CSS::RatioStyleValue::create(CSS::Ratio { static_cast<double>(w.value()), static_cast<double>(h.value()) }) },

Libraries/LibWeb/HTML/HTMLCanvasElement.h

@@ -52,7 +52,7 @@ private:
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
     virtual void adjust_computed_style(CSS::StyleProperties&) override;

Libraries/LibWeb/HTML/HTMLDivElement.cpp

@@ -22,18 +22,18 @@ HTMLDivElement::HTMLDivElement(DOM::Document& document, DOM::QualifiedName quali
 HTMLDivElement::~HTMLDivElement() = default;
 
 // https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
-void HTMLDivElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLDivElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value.equals_ignoring_ascii_case("left"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
             else if (value.equals_ignoring_ascii_case("right"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
             else if (value.equals_ignoring_ascii_case("center"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
             else if (value.equals_ignoring_ascii_case("justify"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Libraries/LibWeb/HTML/HTMLDivElement.h

@@ -26,7 +26,7 @@ protected:
 
 private:
     virtual void initialize(JS::Realm&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLEmbedElement.cpp

@@ -29,32 +29,32 @@ void HTMLEmbedElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLEmbedElement);
 }
 
-void HTMLEmbedElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLEmbedElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value.equals_ignoring_ascii_case("middle"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
         } else if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_dimension_value(value))
-                style.set_property(CSS::PropertyID::Height, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, *parsed_value);
         }
         // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
         else if (name == HTML::AttributeNames::hspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::vspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginTop, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginBottom, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLEmbedElement.h

@@ -22,7 +22,7 @@ private:
 
     virtual bool is_html_embed_element() const override { return true; }
     virtual void initialize(JS::Realm&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
     virtual void adjust_computed_style(CSS::StyleProperties&) override;
 };
 

Libraries/LibWeb/HTML/HTMLFontElement.cpp

@@ -112,21 +112,21 @@ void HTMLFontElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLFontElement);
 }
 
-void HTMLFontElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLFontElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("color"sv)) {
             // https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::Color, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Color, CSS::CSSColorValue::create_from_color(color.value()));
         } else if (name.equals_ignoring_ascii_case("size"sv)) {
             // When a font element has a size attribute, the user agent is expected to use the following steps, known as the rules for parsing a legacy font size, to treat the attribute as a presentational hint setting the element's 'font-size' property:
             auto font_size_or_empty = parse_legacy_font_size(value);
             if (font_size_or_empty.has_value()) {
                 auto font_size = string_from_keyword(font_size_or_empty.release_value());
                 if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, font_size, CSS::PropertyID::FontSize))
-                    style.set_property(CSS::PropertyID::FontSize, parsed_value.release_nonnull());
+                    cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::FontSize, parsed_value.release_nonnull());
             }
         }
     });

Libraries/LibWeb/HTML/HTMLFontElement.h

@@ -17,7 +17,7 @@ class HTMLFontElement final : public HTMLElement {
 public:
     virtual ~HTMLFontElement() override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
 private:
     HTMLFontElement(DOM::Document&, DOM::QualifiedName);

Libraries/LibWeb/HTML/HTMLHRElement.cpp

@@ -28,13 +28,13 @@ void HTMLHRElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLHRElement);
 }
 
-void HTMLHRElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         // https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2:maps-to-the-dimension-property
         if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLHRElement.h

@@ -26,7 +26,7 @@ private:
 
     virtual void initialize(JS::Realm&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLHeadingElement.cpp

@@ -28,19 +28,19 @@ void HTMLHeadingElement::initialize(JS::Realm& realm)
 }
 
 // https://html.spec.whatwg.org/multipage/rendering.html#tables-2
-void HTMLHeadingElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLHeadingElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    HTMLElement::apply_presentational_hints(style);
+    HTMLElement::apply_presentational_hints(cascaded_properties);
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "left"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
             else if (value == "right"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
             else if (value == "center"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value == "justify"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Libraries/LibWeb/HTML/HTMLHeadingElement.h

@@ -18,7 +18,7 @@ class HTMLHeadingElement final : public HTMLElement {
 public:
     virtual ~HTMLHeadingElement() override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // https://www.w3.org/TR/html-aria/#el-h1-h6
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::heading; }

Libraries/LibWeb/HTML/HTMLImageElement.cpp

@@ -82,32 +82,32 @@ void HTMLImageElement::visit_edges(Cell::Visitor& visitor)
     visit_lazy_loading_element(visitor);
 }
 
-void HTMLImageElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLImageElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::hspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::vspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginTop, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginBottom, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::border) {
             if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value()) {
                 auto width_value = CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value));
-                style.set_property(CSS::PropertyID::BorderTopWidth, width_value);
-                style.set_property(CSS::PropertyID::BorderRightWidth, width_value);
-                style.set_property(CSS::PropertyID::BorderBottomWidth, width_value);
-                style.set_property(CSS::PropertyID::BorderLeftWidth, width_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopWidth, width_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightWidth, width_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomWidth, width_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftWidth, width_value);
 
                 auto solid_value = CSS::CSSKeywordValue::create(CSS::Keyword::Solid);
-                style.set_property(CSS::PropertyID::BorderTopStyle, solid_value);
-                style.set_property(CSS::PropertyID::BorderRightStyle, solid_value);
-                style.set_property(CSS::PropertyID::BorderBottomStyle, solid_value);
-                style.set_property(CSS::PropertyID::BorderLeftStyle, solid_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopStyle, solid_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightStyle, solid_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomStyle, solid_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, solid_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLImageElement.h

@@ -121,7 +121,7 @@ private:
 
     virtual void adopted_from(DOM::Document&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:dimension-attributes
     virtual bool supports_dimension_attributes() const override { return true; }

Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -1593,7 +1593,7 @@ void HTMLInputElement::form_associated_element_was_removed(DOM::Node*)
     set_shadow_root(nullptr);
 }
 
-void HTMLInputElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLInputElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     if (type_state() != TypeAttributeState::ImageButton)
         return;
@@ -1601,42 +1601,42 @@ void HTMLInputElement::apply_presentational_hints(CSS::StyleProperties& style) c
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value.equals_ignoring_ascii_case("middle"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
         } else if (name == HTML::AttributeNames::border) {
             if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value()) {
                 auto width_style_value = CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value));
-                style.set_property(CSS::PropertyID::BorderTopWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderRightWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderBottomWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderLeftWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftWidth, width_style_value);
 
                 auto border_style_value = CSS::CSSKeywordValue::create(CSS::Keyword::Solid);
-                style.set_property(CSS::PropertyID::BorderTopStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderRightStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderBottomStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderLeftStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, border_style_value);
             }
         } else if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Height, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, *parsed_value);
             }
         }
         // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
         else if (name == HTML::AttributeNames::hspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::vspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginTop, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginBottom, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLInputElement.h

@@ -227,7 +227,7 @@ private:
 
     void type_attribute_changed(TypeAttributeState old_state, TypeAttributeState new_state);
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // ^DOM::Node
     virtual bool is_html_input_element() const final { return true; }

Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp

@@ -30,33 +30,33 @@ void HTMLMarqueeElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLMarqueeElement);
 }
 
-void HTMLMarqueeElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLMarqueeElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    HTMLElement::apply_presentational_hints(style);
+    HTMLElement::apply_presentational_hints(cascaded_properties);
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::bgcolor) {
             // https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
         } else if (name == HTML::AttributeNames::height) {
             // https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2:maps-to-the-dimension-property
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Height, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::hspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::vspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginTop, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginBottom, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLMarqueeElement.h

@@ -30,7 +30,7 @@ private:
     HTMLMarqueeElement(DOM::Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLObjectElement.cpp

@@ -100,49 +100,49 @@ void HTMLObjectElement::form_associated_element_was_removed(DOM::Node*)
     destroy_the_child_navigable();
 }
 
-void HTMLObjectElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLObjectElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value.equals_ignoring_ascii_case("middle"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
         } else if (name == HTML::AttributeNames::border) {
             if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value()) {
                 auto width_style_value = CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value));
-                style.set_property(CSS::PropertyID::BorderTopWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderRightWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderBottomWidth, width_style_value);
-                style.set_property(CSS::PropertyID::BorderLeftWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomWidth, width_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftWidth, width_style_value);
 
                 auto border_style_value = CSS::CSSKeywordValue::create(CSS::Keyword::Solid);
-                style.set_property(CSS::PropertyID::BorderTopStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderRightStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderBottomStyle, border_style_value);
-                style.set_property(CSS::PropertyID::BorderLeftStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomStyle, border_style_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, border_style_value);
             }
         }
         // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property-3
         else if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Height, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, *parsed_value);
             }
         }
         // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
         else if (name == HTML::AttributeNames::hspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::vspace) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
-                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginTop, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginBottom, *parsed_value);
             }
         } else if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLObjectElement.h

@@ -54,7 +54,7 @@ private:
 
     virtual void initialize(JS::Realm&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
     virtual void adjust_computed_style(CSS::StyleProperties&) override;

Libraries/LibWeb/HTML/HTMLParagraphElement.cpp

@@ -28,19 +28,19 @@ void HTMLParagraphElement::initialize(JS::Realm& realm)
 }
 
 // https://html.spec.whatwg.org/multipage/rendering.html#tables-2
-void HTMLParagraphElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLParagraphElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    HTMLElement::apply_presentational_hints(style);
+    HTMLElement::apply_presentational_hints(cascaded_properties);
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "left"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
             else if (value == "right"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
             else if (value == "center"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value == "justify"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Libraries/LibWeb/HTML/HTMLParagraphElement.h

@@ -18,7 +18,7 @@ class HTMLParagraphElement final : public HTMLElement {
 public:
     virtual ~HTMLParagraphElement() override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // https://www.w3.org/TR/html-aria/#el-p
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::paragraph; }

Libraries/LibWeb/HTML/HTMLPreElement.cpp

@@ -28,13 +28,13 @@ void HTMLPreElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLPreElement);
 }
 
-void HTMLPreElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLPreElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    HTMLElement::apply_presentational_hints(style);
+    HTMLElement::apply_presentational_hints(cascaded_properties);
 
     for_each_attribute([&](auto const& name, auto const&) {
         if (name.equals_ignoring_ascii_case(HTML::AttributeNames::wrap))
-            style.set_property(CSS::PropertyID::WhiteSpace, CSS::CSSKeywordValue::create(CSS::Keyword::PreWrap));
+            cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::WhiteSpace, CSS::CSSKeywordValue::create(CSS::Keyword::PreWrap));
     });
 }
 

Libraries/LibWeb/HTML/HTMLPreElement.h

@@ -26,7 +26,7 @@ private:
     HTMLPreElement(DOM::Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLTableCaptionElement.cpp

@@ -28,13 +28,13 @@ void HTMLTableCaptionElement::initialize(JS::Realm& realm)
 }
 
 // https://html.spec.whatwg.org/multipage/rendering.html#tables-2
-void HTMLTableCaptionElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableCaptionElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    HTMLElement::apply_presentational_hints(style);
+    HTMLElement::apply_presentational_hints(cascaded_properties);
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "bottom"sv)
-                style.set_property(CSS::PropertyID::CaptionSide, CSS::CSSKeywordValue::create(CSS::Keyword::Bottom));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::CaptionSide, CSS::CSSKeywordValue::create(CSS::Keyword::Bottom));
         }
     });
 }

Libraries/LibWeb/HTML/HTMLTableCaptionElement.h

@@ -18,7 +18,7 @@ class HTMLTableCaptionElement final : public HTMLElement {
 public:
     virtual ~HTMLTableCaptionElement() override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     // https://www.w3.org/TR/html-aria/#el-caption
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::caption; }

Libraries/LibWeb/HTML/HTMLTableCellElement.cpp

@@ -37,46 +37,46 @@ void HTMLTableCellElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLTableCellElement);
 }
 
-void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableCellElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::bgcolor) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
             return;
         }
         if (name == HTML::AttributeNames::valign) {
             if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::VerticalAlign))
-                style.set_property(CSS::PropertyID::VerticalAlign, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::VerticalAlign, parsed_value.release_nonnull());
             return;
         }
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv) || value.equals_ignoring_ascii_case("middle"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
             } else if (value.equals_ignoring_ascii_case("left"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
             } else if (value.equals_ignoring_ascii_case("right"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
             } else {
                 if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::TextAlign))
-                    style.set_property(CSS::PropertyID::TextAlign, parsed_value.release_nonnull());
+                    cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::TextAlign, parsed_value.release_nonnull());
             }
             return;
         }
         if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_nonzero_dimension_value(value))
-                style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, parsed_value.release_nonnull());
             return;
         } else if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_nonzero_dimension_value(value))
-                style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, parsed_value.release_nonnull());
             return;
         } else if (name == HTML::AttributeNames::background) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:encoding-parsing-and-serializing-a-url
             if (auto parsed_value = document().encoding_parse_url(value); parsed_value.is_valid())
-                style.set_property(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
             return;
         }
     });
@@ -86,10 +86,10 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
         return;
 
     if (auto padding = table_element->padding()) {
-        style.set_property(CSS::PropertyID::PaddingTop, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
-        style.set_property(CSS::PropertyID::PaddingBottom, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
-        style.set_property(CSS::PropertyID::PaddingLeft, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
-        style.set_property(CSS::PropertyID::PaddingRight, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::PaddingTop, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::PaddingBottom, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::PaddingLeft, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::PaddingRight, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
     }
 
     auto border = table_element->border();
@@ -97,9 +97,9 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
     if (!border)
         return;
     auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
-        style.set_property(style_property, CSS::CSSKeywordValue::create(CSS::Keyword::Inset));
-        style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(1)));
-        style.set_property(color_property, table_element->computed_css_values()->property(color_property));
+        cascaded_properties->set_property_from_presentational_hint(style_property, CSS::CSSKeywordValue::create(CSS::Keyword::Inset));
+        cascaded_properties->set_property_from_presentational_hint(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(1)));
+        cascaded_properties->set_property_from_presentational_hint(color_property, table_element->computed_css_values()->property(color_property));
     };
     apply_border_style(CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor);
     apply_border_style(CSS::PropertyID::BorderTopStyle, CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor);

Libraries/LibWeb/HTML/HTMLTableCellElement.h

@@ -34,7 +34,7 @@ private:
     virtual bool is_html_table_cell_element() const override { return true; }
 
     virtual void initialize(JS::Realm&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLTableColElement.cpp

@@ -51,13 +51,13 @@ WebIDL::ExceptionOr<void> HTMLTableColElement::set_span(unsigned int value)
     return set_attribute(HTML::AttributeNames::span, String::number(value));
 }
 
-void HTMLTableColElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableColElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:maps-to-the-dimension-property-2
         if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_dimension_value(value)) {
-                style.set_property(CSS::PropertyID::Width, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, *parsed_value);
             }
         }
     });

Libraries/LibWeb/HTML/HTMLTableColElement.h

@@ -26,7 +26,7 @@ private:
 
     virtual void initialize(JS::Realm&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 };
 
 }

Libraries/LibWeb/HTML/HTMLTableElement.cpp

@@ -51,44 +51,44 @@ static unsigned parse_border(StringView value)
     return value.to_number<unsigned>().value_or(0);
 }
 
-void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::width) {
             if (auto parsed_value = parse_nonzero_dimension_value(value))
-                style.set_property(CSS::PropertyID::Width, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, parsed_value.release_nonnull());
             return;
         }
         if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_dimension_value(value))
-                style.set_property(CSS::PropertyID::Height, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, parsed_value.release_nonnull());
             return;
         }
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv)) {
-                style.set_property(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
-                style.set_property(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
             } else if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::Float)) {
-                style.set_property(CSS::PropertyID::Float, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Float, parsed_value.release_nonnull());
             }
             return;
         }
         if (name == HTML::AttributeNames::background) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:encoding-parsing-and-serializing-a-url
             if (auto parsed_value = document().encoding_parse_url(value); parsed_value.is_valid())
-                style.set_property(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
             return;
         }
         if (name == HTML::AttributeNames::bgcolor) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
             return;
         }
         if (name == HTML::AttributeNames::cellspacing) {
             if (auto parsed_value = parse_dimension_value(value))
-                style.set_property(CSS::PropertyID::BorderSpacing, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderSpacing, parsed_value.release_nonnull());
             return;
         }
         if (name == HTML::AttributeNames::border) {
@@ -97,9 +97,9 @@ void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) c
                 return;
             auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
                 auto legacy_line_style = CSS::CSSKeywordValue::create(CSS::Keyword::Outset);
-                style.set_property(style_property, legacy_line_style);
-                style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(border)));
-                style.set_property(color_property, CSS::CSSColorValue::create_from_color(Color(128, 128, 128)));
+                cascaded_properties->set_property_from_presentational_hint(style_property, legacy_line_style);
+                cascaded_properties->set_property_from_presentational_hint(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(border)));
+                cascaded_properties->set_property_from_presentational_hint(color_property, CSS::CSSColorValue::create_from_color(Color(128, 128, 128)));
             };
             apply_border_style(CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor);
             apply_border_style(CSS::PropertyID::BorderTopStyle, CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor);

Libraries/LibWeb/HTML/HTMLTableElement.h

@@ -58,7 +58,7 @@ private:
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
 
     GC::Ptr<DOM::HTMLCollection> mutable m_rows;

Libraries/LibWeb/HTML/HTMLTableRowElement.cpp

@@ -39,25 +39,25 @@ void HTMLTableRowElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLTableRowElement);
 }
 
-void HTMLTableRowElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableRowElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    Base::apply_presentational_hints(style);
+    Base::apply_presentational_hints(cascaded_properties);
     for_each_attribute([&](auto& name, auto& value) {
         if (name == HTML::AttributeNames::bgcolor) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:rules-for-parsing-a-legacy-colour-value
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
         } else if (name == HTML::AttributeNames::background) {
             // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:encoding-parsing-and-serializing-a-url
             if (auto parsed_value = document().encoding_parse_url(value); parsed_value.is_valid())
-                style.set_property(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
         } else if (name == HTML::AttributeNames::height) {
             if (auto parsed_value = parse_dimension_value(value))
-                style.set_property(CSS::PropertyID::Height, *parsed_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, *parsed_value);
         } else if (name == HTML::AttributeNames::valign) {
             if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::VerticalAlign))
-                style.set_property(CSS::PropertyID::VerticalAlign, parsed_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::VerticalAlign, parsed_value.release_nonnull());
         }
     });
 }

Libraries/LibWeb/HTML/HTMLTableRowElement.h

@@ -35,7 +35,7 @@ private:
 
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     GC::Ptr<DOM::HTMLCollection> mutable m_cells;
 };

Libraries/LibWeb/HTML/HTMLTableSectionElement.cpp

@@ -100,18 +100,18 @@ WebIDL::ExceptionOr<void> HTMLTableSectionElement::delete_row(WebIDL::Long index
     return {};
 }
 
-void HTMLTableSectionElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void HTMLTableSectionElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     for_each_attribute([&](auto& name, auto& value) {
         // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:encoding-parsing-and-serializing-a-url
         if (name == HTML::AttributeNames::background) {
             if (auto parsed_value = document().encoding_parse_url(value); parsed_value.is_valid())
-                style.set_property(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundImage, CSS::ImageStyleValue::create(parsed_value));
         }
         // https://html.spec.whatwg.org/multipage/rendering.html#tables-2:rules-for-parsing-a-legacy-colour-value
         else if (name == HTML::AttributeNames::bgcolor) {
             if (auto color = parse_legacy_color_value(value); color.has_value())
-                style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
         }
     });
 }

Libraries/LibWeb/HTML/HTMLTableSectionElement.h

@@ -37,7 +37,7 @@ private:
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     GC::Ptr<DOM::HTMLCollection> mutable m_rows;
 };

Libraries/LibWeb/SVG/SVGCircleElement.cpp

@@ -29,22 +29,22 @@ void SVGCircleElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGCircleElement);
 }
 
-void SVGCircleElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGCircleElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    Base::apply_presentational_hints(style);
+    Base::apply_presentational_hints(cascaded_properties);
     auto parsing_context = CSS::Parser::ParsingContext { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
 
     auto cx_attribute = attribute(SVG::AttributeNames::cx);
     if (auto cx_value = parse_css_value(parsing_context, cx_attribute.value_or(String {}), CSS::PropertyID::Cx))
-        style.set_property(CSS::PropertyID::Cx, cx_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Cx, cx_value.release_nonnull());
 
     auto cy_attribute = attribute(SVG::AttributeNames::cy);
     if (auto cy_value = parse_css_value(parsing_context, cy_attribute.value_or(String {}), CSS::PropertyID::Cy))
-        style.set_property(CSS::PropertyID::Cy, cy_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Cy, cy_value.release_nonnull());
 
     auto r_attribute = attribute(SVG::AttributeNames::r);
     if (auto r_value = parse_css_value(parsing_context, r_attribute.value_or(String {}), CSS::PropertyID::R))
-        style.set_property(CSS::PropertyID::R, r_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::R, r_value.release_nonnull());
 }
 
 Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)

Libraries/LibWeb/SVG/SVGCircleElement.h

@@ -18,7 +18,7 @@ class SVGCircleElement final : public SVGGeometryElement {
 public:
     virtual ~SVGCircleElement() override = default;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
 

Libraries/LibWeb/SVG/SVGForeignObjectElement.cpp

@@ -52,15 +52,15 @@ GC::Ptr<Layout::Node> SVGForeignObjectElement::create_layout_node(CSS::StyleProp
     return heap().allocate<Layout::SVGForeignObjectBox>(document(), *this, move(style));
 }
 
-void SVGForeignObjectElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGForeignObjectElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    Base::apply_presentational_hints(style);
+    Base::apply_presentational_hints(cascaded_properties);
     auto parsing_context = CSS::Parser::ParsingContext { document() };
     if (auto width_value = parse_css_value(parsing_context, get_attribute_value(Web::HTML::AttributeNames::width), CSS::PropertyID::Width))
-        style.set_property(CSS::PropertyID::Width, width_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, width_value.release_nonnull());
 
     if (auto height_value = parse_css_value(parsing_context, get_attribute_value(Web::HTML::AttributeNames::height), CSS::PropertyID::Height))
-        style.set_property(CSS::PropertyID::Height, height_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, height_value.release_nonnull());
 }
 
 GC::Ref<SVG::SVGAnimatedLength> SVGForeignObjectElement::x()

Libraries/LibWeb/SVG/SVGForeignObjectElement.h

@@ -31,7 +31,7 @@ private:
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     GC::Ptr<SVG::SVGAnimatedLength> m_x;
     GC::Ptr<SVG::SVGAnimatedLength> m_y;

Libraries/LibWeb/SVG/SVGGraphicsElement.cpp

@@ -143,7 +143,7 @@ struct NamedPropertyID {
     StringView name;
 };
 
-void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGGraphicsElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     static Array const attribute_style_properties {
         // FIXME: The `fill` attribute and CSS `fill` property are not the same! But our support is limited enough that they are equivalent for now.
@@ -175,7 +175,7 @@ void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style)
             if (!name.equals_ignoring_ascii_case(property.name))
                 continue;
             if (auto style_value = parse_css_value(parsing_context, value, property.id))
-                style.set_property(property.id, style_value.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(property.id, style_value.release_nonnull());
             break;
         }
     });

Libraries/LibWeb/SVG/SVGGraphicsElement.h

@@ -29,7 +29,7 @@ class SVGGraphicsElement : public SVGElement {
     WEB_PLATFORM_OBJECT(SVGGraphicsElement, SVGElement);
 
 public:
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
 

Libraries/LibWeb/SVG/SVGSVGElement.cpp

@@ -79,26 +79,26 @@ RefPtr<CSS::CSSStyleValue> SVGSVGElement::height_style_value_from_attribute() co
     return nullptr;
 }
 
-void SVGSVGElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGSVGElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    Base::apply_presentational_hints(style);
+    Base::apply_presentational_hints(cascaded_properties);
     auto parsing_context = CSS::Parser::ParsingContext { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
 
     auto x_attribute = attribute(SVG::AttributeNames::x);
     if (auto x_value = parse_css_value(parsing_context, x_attribute.value_or(String {}), CSS::PropertyID::X)) {
-        style.set_property(CSS::PropertyID::X, x_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::X, x_value.release_nonnull());
     }
 
     auto y_attribute = attribute(SVG::AttributeNames::y);
     if (auto y_value = parse_css_value(parsing_context, y_attribute.value_or(String {}), CSS::PropertyID::Y)) {
-        style.set_property(CSS::PropertyID::Y, y_value.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Y, y_value.release_nonnull());
     }
 
     if (auto width = width_style_value_from_attribute())
-        style.set_property(CSS::PropertyID::Width, width.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Width, width.release_nonnull());
 
     if (auto height = height_style_value_from_attribute())
-        style.set_property(CSS::PropertyID::Height, height.release_nonnull());
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height, height.release_nonnull());
 }
 
 void SVGSVGElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_)

Libraries/LibWeb/SVG/SVGSVGElement.h

@@ -31,7 +31,7 @@ class SVGSVGElement final : public SVGGraphicsElement
 public:
     virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual bool requires_svg_container() const override { return false; }
     virtual bool is_svg_container() const override { return true; }

Libraries/LibWeb/SVG/SVGStopElement.cpp

@@ -30,18 +30,18 @@ void SVGStopElement::attribute_changed(FlyString const& name, Optional<String> c
     }
 }
 
-void SVGStopElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGStopElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
     CSS::Parser::ParsingContext parsing_context { document() };
     for_each_attribute([&](auto& name, auto& value) {
         CSS::Parser::ParsingContext parsing_context { document() };
         if (name.equals_ignoring_ascii_case("stop-color"sv)) {
             if (auto stop_color = parse_css_value(parsing_context, value, CSS::PropertyID::StopColor)) {
-                style.set_property(CSS::PropertyID::StopColor, stop_color.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::StopColor, stop_color.release_nonnull());
             }
         } else if (name.equals_ignoring_ascii_case("stop-opacity"sv)) {
             if (auto stop_opacity = parse_css_value(parsing_context, value, CSS::PropertyID::StopOpacity)) {
-                style.set_property(CSS::PropertyID::StopOpacity, stop_opacity.release_nonnull());
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::StopOpacity, stop_opacity.release_nonnull());
             }
         }
     });

Libraries/LibWeb/SVG/SVGStopElement.h

@@ -25,7 +25,7 @@ public:
 
     GC::Ref<SVGAnimatedNumber> offset() const;
 
-    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     NumberPercentage stop_offset() const { return m_offset.value_or(NumberPercentage::create_number(0)); }
     Gfx::Color stop_color() const;

Libraries/LibWeb/SVG/SVGSymbolElement.cpp

@@ -40,13 +40,13 @@ void SVGSymbolElement::visit_edges(Cell::Visitor& visitor)
 }
 
 // https://svgwg.org/svg2-draft/struct.html#SymbolNotes
-void SVGSymbolElement::apply_presentational_hints(CSS::StyleProperties& style) const
+void SVGSymbolElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
 {
-    Base::apply_presentational_hints(style);
+    Base::apply_presentational_hints(cascaded_properties);
 
     if (is_direct_child_of_use_shadow_tree()) {
         // The generated instance of a ‘symbol’ that is the direct referenced element of a ‘use’ element must always have a computed value of inline for the display property.
-        style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::Inline)));
+        cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::Inline)));
     }
 }
 

Libraries/LibWeb/SVG/SVGSymbolElement.h

@@ -19,7 +19,7 @@ class SVGSymbolElement final : public SVGGraphicsElement
 public:
     virtual ~SVGSymbolElement() override = default;
 
-    void apply_presentational_hints(CSS::StyleProperties& style) const override;
+    virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const override;
 
     virtual Optional<ViewBox> view_box() const override { return m_view_box; }
     virtual Optional<PreserveAspectRatio> preserve_aspect_ratio() const override