LibWeb: Rename CSS::StyleProperties => CSS::ComputedProperties

Now that StyleProperties is only used to hold computed properties, let's
name it ComputedProperties.

Libraries/LibWeb/Animations/AnimationEffect.h

@@ -143,7 +143,7 @@ public:
     virtual DOM::Element* target() const { return {}; }
     virtual bool is_keyframe_effect() const { return false; }
 
-    virtual void update_style_properties() = 0;
+    virtual void update_computed_properties() = 0;
 
 protected:
     AnimationEffect(JS::Realm&);

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -915,13 +915,13 @@ static CSS::RequiredInvalidationAfterStyleChange compute_required_invalidation(H
     return invalidation;
 }
 
-void KeyframeEffect::update_style_properties()
+void KeyframeEffect::update_computed_properties()
 {
     auto target = this->target();
     if (!target)
         return;
 
-    Optional<CSS::StyleProperties&> style = {};
+    Optional<CSS::ComputedProperties&> style = {};
     if (!pseudo_element_type().has_value())
         style = target->computed_css_values();
     else
@@ -944,7 +944,7 @@ void KeyframeEffect::update_style_properties()
         for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {
             if (element_style->is_property_inherited(static_cast<CSS::PropertyID>(i))) {
                 auto new_value = CSS::StyleComputer::get_inherit_value(static_cast<CSS::PropertyID>(i), &element);
-                element_style->set_property(static_cast<CSS::PropertyID>(i), *new_value, CSS::StyleProperties::Inherited::Yes);
+                element_style->set_property(static_cast<CSS::PropertyID>(i), *new_value, CSS::ComputedProperties::Inherited::Yes);
             }
         }
 

Libraries/LibWeb/Animations/KeyframeEffect.h

@@ -105,7 +105,7 @@ public:
 
     virtual bool is_keyframe_effect() const override { return true; }
 
-    virtual void update_style_properties() override;
+    virtual void update_computed_properties() override;
 
     Optional<CSS::AnimationPlayState> last_css_animation_play_state() const { return m_last_css_animation_play_state; }
     void set_last_css_animation_play_state(CSS::AnimationPlayState state) { m_last_css_animation_play_state = state; }

Libraries/LibWeb/CMakeLists.txt

@@ -71,6 +71,7 @@ set(SOURCES
     CSS/CSSSupportsRule.cpp
     CSS/CSSTransition.cpp
     CSS/CascadedProperties.cpp
+    CSS/ComputedProperties.cpp
     CSS/Display.cpp
     CSS/EdgeRect.cpp
     CSS/FontFace.cpp
@@ -114,7 +115,6 @@ set(SOURCES
     CSS/Sizing.cpp
     CSS/StyleComputer.cpp
     CSS/StyleInvalidation.cpp
-    CSS/StyleProperties.cpp
     CSS/StyleProperty.cpp
     CSS/StyleSheet.cpp
     CSS/StyleSheetIdentifier.cpp

Libraries/LibWeb/CSS/StyleProperties.cpp → Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -9,7 +9,7 @@
 #include <AK/TypeCasts.h>
 #include <LibCore/DirIterator.h>
 #include <LibWeb/CSS/Clip.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
@@ -42,9 +42,9 @@
 
 namespace Web::CSS {
 
-NonnullRefPtr<StyleProperties::Data> StyleProperties::Data::clone() const
+NonnullRefPtr<ComputedProperties::Data> ComputedProperties::Data::clone() const
 {
-    auto clone = adopt_ref(*new StyleProperties::Data);
+    auto clone = adopt_ref(*new ComputedProperties::Data);
     clone->m_animation_name_source = m_animation_name_source;
     clone->m_transition_property_source = m_transition_property_source;
     clone->m_property_values = m_property_values;
@@ -57,13 +57,13 @@ NonnullRefPtr<StyleProperties::Data> StyleProperties::Data::clone() const
     return clone;
 }
 
-bool StyleProperties::is_property_important(CSS::PropertyID property_id) const
+bool ComputedProperties::is_property_important(CSS::PropertyID property_id) const
 {
     size_t n = to_underlying(property_id);
     return m_data->m_property_important[n / 8] & (1 << (n % 8));
 }
 
-void StyleProperties::set_property_important(CSS::PropertyID property_id, Important important)
+void ComputedProperties::set_property_important(CSS::PropertyID property_id, Important important)
 {
     size_t n = to_underlying(property_id);
     if (important == Important::Yes)
@@ -72,13 +72,13 @@ void StyleProperties::set_property_important(CSS::PropertyID property_id, Import
         m_data->m_property_important[n / 8] &= ~(1 << (n % 8));
 }
 
-bool StyleProperties::is_property_inherited(CSS::PropertyID property_id) const
+bool ComputedProperties::is_property_inherited(CSS::PropertyID property_id) const
 {
     size_t n = to_underlying(property_id);
     return m_data->m_property_inherited[n / 8] & (1 << (n % 8));
 }
 
-void StyleProperties::set_property_inherited(CSS::PropertyID property_id, Inherited inherited)
+void ComputedProperties::set_property_inherited(CSS::PropertyID property_id, Inherited inherited)
 {
     size_t n = to_underlying(property_id);
     if (inherited == Inherited::Yes)
@@ -87,31 +87,31 @@ void StyleProperties::set_property_inherited(CSS::PropertyID property_id, Inheri
         m_data->m_property_inherited[n / 8] &= ~(1 << (n % 8));
 }
 
-void StyleProperties::set_property(CSS::PropertyID id, NonnullRefPtr<CSSStyleValue const> value, Inherited inherited, Important important)
+void ComputedProperties::set_property(CSS::PropertyID id, NonnullRefPtr<CSSStyleValue const> value, Inherited inherited, Important important)
 {
     m_data->m_property_values[to_underlying(id)] = move(value);
     set_property_important(id, important);
     set_property_inherited(id, inherited);
 }
 
-void StyleProperties::revert_property(CSS::PropertyID id, StyleProperties const& style_for_revert)
+void ComputedProperties::revert_property(CSS::PropertyID id, ComputedProperties const& style_for_revert)
 {
     m_data->m_property_values[to_underlying(id)] = style_for_revert.m_data->m_property_values[to_underlying(id)];
     set_property_important(id, style_for_revert.is_property_important(id) ? Important::Yes : Important::No);
     set_property_inherited(id, style_for_revert.is_property_inherited(id) ? Inherited::Yes : Inherited::No);
 }
 
-void StyleProperties::set_animated_property(CSS::PropertyID id, NonnullRefPtr<CSSStyleValue const> value)
+void ComputedProperties::set_animated_property(CSS::PropertyID id, NonnullRefPtr<CSSStyleValue const> value)
 {
     m_data->m_animated_property_values.set(id, move(value));
 }
 
-void StyleProperties::reset_animated_properties()
+void ComputedProperties::reset_animated_properties()
 {
     m_data->m_animated_property_values.clear();
 }
 
-CSSStyleValue const& StyleProperties::property(CSS::PropertyID property_id, WithAnimationsApplied return_animated_value) const
+CSSStyleValue const& ComputedProperties::property(CSS::PropertyID property_id, WithAnimationsApplied return_animated_value) const
 {
     if (return_animated_value == WithAnimationsApplied::Yes) {
         if (auto animated_value = m_data->m_animated_property_values.get(property_id); animated_value.has_value())
@@ -122,14 +122,14 @@ CSSStyleValue const& StyleProperties::property(CSS::PropertyID property_id, With
     return *m_data->m_property_values[to_underlying(property_id)];
 }
 
-CSSStyleValue const* StyleProperties::maybe_null_property(CSS::PropertyID property_id) const
+CSSStyleValue const* ComputedProperties::maybe_null_property(CSS::PropertyID property_id) const
 {
     if (auto animated_value = m_data->m_animated_property_values.get(property_id); animated_value.has_value())
         return animated_value.value();
     return m_data->m_property_values[to_underlying(property_id)];
 }
 
-Variant<LengthPercentage, NormalGap> StyleProperties::gap_value(CSS::PropertyID id) const
+Variant<LengthPercentage, NormalGap> ComputedProperties::gap_value(CSS::PropertyID id) const
 {
     auto const& value = property(id);
     if (value.is_keyword()) {
@@ -149,7 +149,7 @@ Variant<LengthPercentage, NormalGap> StyleProperties::gap_value(CSS::PropertyID
     VERIFY_NOT_REACHED();
 }
 
-CSS::Size StyleProperties::size_value(CSS::PropertyID id) const
+CSS::Size ComputedProperties::size_value(CSS::PropertyID id) const
 {
     auto const& value = property(id);
     if (value.is_keyword()) {
@@ -187,12 +187,12 @@ CSS::Size StyleProperties::size_value(CSS::PropertyID id) const
     return CSS::Size::make_auto();
 }
 
-LengthPercentage StyleProperties::length_percentage_or_fallback(CSS::PropertyID id, LengthPercentage const& fallback) const
+LengthPercentage ComputedProperties::length_percentage_or_fallback(CSS::PropertyID id, LengthPercentage const& fallback) const
 {
     return length_percentage(id).value_or(fallback);
 }
 
-Optional<LengthPercentage> StyleProperties::length_percentage(CSS::PropertyID id) const
+Optional<LengthPercentage> ComputedProperties::length_percentage(CSS::PropertyID id) const
 {
     auto const& value = property(id);
 
@@ -211,7 +211,7 @@ Optional<LengthPercentage> StyleProperties::length_percentage(CSS::PropertyID id
     return {};
 }
 
-LengthBox StyleProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id, const CSS::Length& default_value) const
+LengthBox ComputedProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id, const CSS::Length& default_value) const
 {
     LengthBox box;
     box.left() = length_percentage_or_fallback(left_id, default_value);
@@ -221,7 +221,7 @@ LengthBox StyleProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID t
     return box;
 }
 
-Color StyleProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithStyle const& node, Color fallback) const
+Color ComputedProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithStyle const& node, Color fallback) const
 {
     auto const& value = property(id);
     if (!value.has_color())
@@ -229,7 +229,7 @@ Color StyleProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithSty
     return value.to_color(node);
 }
 
-NonnullRefPtr<Gfx::Font const> StyleProperties::font_fallback(bool monospace, bool bold)
+NonnullRefPtr<Gfx::Font const> ComputedProperties::font_fallback(bool monospace, bool bold)
 {
     if (monospace && bold)
         return Platform::FontPlugin::the().default_fixed_width_font().bold_variant();
@@ -243,7 +243,7 @@ NonnullRefPtr<Gfx::Font const> StyleProperties::font_fallback(bool monospace, bo
     return Platform::FontPlugin::the().default_font();
 }
 
-CSSPixels StyleProperties::compute_line_height(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
+CSSPixels ComputedProperties::compute_line_height(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
 {
     auto const& line_height = property(CSS::PropertyID::LineHeight);
 
@@ -286,7 +286,7 @@ CSSPixels StyleProperties::compute_line_height(CSSPixelRect const& viewport_rect
     return font_metrics.line_height;
 }
 
-Optional<int> StyleProperties::z_index() const
+Optional<int> ComputedProperties::z_index() const
 {
     auto const& value = property(CSS::PropertyID::ZIndex);
     if (value.has_auto())
@@ -303,7 +303,7 @@ Optional<int> StyleProperties::z_index() const
     return {};
 }
 
-float StyleProperties::resolve_opacity_value(CSSStyleValue const& value)
+float ComputedProperties::resolve_opacity_value(CSSStyleValue const& value)
 {
     float unclamped_opacity = 1.0f;
 
@@ -331,31 +331,31 @@ float StyleProperties::resolve_opacity_value(CSSStyleValue const& value)
     return clamp(unclamped_opacity, 0.0f, 1.0f);
 }
 
-float StyleProperties::opacity() const
+float ComputedProperties::opacity() const
 {
     auto const& value = property(CSS::PropertyID::Opacity);
     return resolve_opacity_value(value);
 }
 
-float StyleProperties::fill_opacity() const
+float ComputedProperties::fill_opacity() const
 {
     auto const& value = property(CSS::PropertyID::FillOpacity);
     return resolve_opacity_value(value);
 }
 
-Optional<CSS::StrokeLinecap> StyleProperties::stroke_linecap() const
+Optional<CSS::StrokeLinecap> ComputedProperties::stroke_linecap() const
 {
     auto const& value = property(CSS::PropertyID::StrokeLinecap);
     return keyword_to_stroke_linecap(value.to_keyword());
 }
 
-Optional<CSS::StrokeLinejoin> StyleProperties::stroke_linejoin() const
+Optional<CSS::StrokeLinejoin> ComputedProperties::stroke_linejoin() const
 {
     auto const& value = property(CSS::PropertyID::StrokeLinejoin);
     return keyword_to_stroke_linejoin(value.to_keyword());
 }
 
-NumberOrCalculated StyleProperties::stroke_miterlimit() const
+NumberOrCalculated ComputedProperties::stroke_miterlimit() const
 {
     auto const& value = property(CSS::PropertyID::StrokeMiterlimit);
 
@@ -368,43 +368,43 @@ NumberOrCalculated StyleProperties::stroke_miterlimit() const
     return NumberOrCalculated { value.as_number().number() };
 }
 
-float StyleProperties::stroke_opacity() const
+float ComputedProperties::stroke_opacity() const
 {
     auto const& value = property(CSS::PropertyID::StrokeOpacity);
     return resolve_opacity_value(value);
 }
 
-float StyleProperties::stop_opacity() const
+float ComputedProperties::stop_opacity() const
 {
     auto const& value = property(CSS::PropertyID::StopOpacity);
     return resolve_opacity_value(value);
 }
 
-Optional<CSS::FillRule> StyleProperties::fill_rule() const
+Optional<CSS::FillRule> ComputedProperties::fill_rule() const
 {
     auto const& value = property(CSS::PropertyID::FillRule);
     return keyword_to_fill_rule(value.to_keyword());
 }
 
-Optional<CSS::ClipRule> StyleProperties::clip_rule() const
+Optional<CSS::ClipRule> ComputedProperties::clip_rule() const
 {
     auto const& value = property(CSS::PropertyID::ClipRule);
     return keyword_to_fill_rule(value.to_keyword());
 }
 
-Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
+Optional<CSS::FlexDirection> ComputedProperties::flex_direction() const
 {
     auto const& value = property(CSS::PropertyID::FlexDirection);
     return keyword_to_flex_direction(value.to_keyword());
 }
 
-Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
+Optional<CSS::FlexWrap> ComputedProperties::flex_wrap() const
 {
     auto const& value = property(CSS::PropertyID::FlexWrap);
     return keyword_to_flex_wrap(value.to_keyword());
 }
 
-Optional<CSS::FlexBasis> StyleProperties::flex_basis() const
+Optional<CSS::FlexBasis> ComputedProperties::flex_basis() const
 {
     auto const& value = property(CSS::PropertyID::FlexBasis);
 
@@ -414,7 +414,7 @@ Optional<CSS::FlexBasis> StyleProperties::flex_basis() const
     return size_value(CSS::PropertyID::FlexBasis);
 }
 
-float StyleProperties::flex_grow() const
+float ComputedProperties::flex_grow() const
 {
     auto const& value = property(CSS::PropertyID::FlexGrow);
     if (!value.is_number())
@@ -422,7 +422,7 @@ float StyleProperties::flex_grow() const
     return value.as_number().number();
 }
 
-float StyleProperties::flex_shrink() const
+float ComputedProperties::flex_shrink() const
 {
     auto const& value = property(CSS::PropertyID::FlexShrink);
     if (!value.is_number())
@@ -430,7 +430,7 @@ float StyleProperties::flex_shrink() const
     return value.as_number().number();
 }
 
-int StyleProperties::order() const
+int ComputedProperties::order() const
 {
     auto const& value = property(CSS::PropertyID::Order);
     if (!value.is_integer())
@@ -438,13 +438,13 @@ int StyleProperties::order() const
     return value.as_integer().integer();
 }
 
-Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
+Optional<CSS::ImageRendering> ComputedProperties::image_rendering() const
 {
     auto const& value = property(CSS::PropertyID::ImageRendering);
     return keyword_to_image_rendering(value.to_keyword());
 }
 
-CSS::Length StyleProperties::border_spacing_horizontal(Layout::Node const& layout_node) const
+CSS::Length ComputedProperties::border_spacing_horizontal(Layout::Node const& layout_node) const
 {
     auto const& value = property(CSS::PropertyID::BorderSpacing);
     if (value.is_length())
@@ -455,7 +455,7 @@ CSS::Length StyleProperties::border_spacing_horizontal(Layout::Node const& layou
     return list.value_at(0, false)->as_length().length();
 }
 
-CSS::Length StyleProperties::border_spacing_vertical(Layout::Node const& layout_node) const
+CSS::Length ComputedProperties::border_spacing_vertical(Layout::Node const& layout_node) const
 {
     auto const& value = property(CSS::PropertyID::BorderSpacing);
     if (value.is_length())
@@ -466,13 +466,13 @@ CSS::Length StyleProperties::border_spacing_vertical(Layout::Node const& layout_
     return list.value_at(1, false)->as_length().length();
 }
 
-Optional<CSS::CaptionSide> StyleProperties::caption_side() const
+Optional<CSS::CaptionSide> ComputedProperties::caption_side() const
 {
     auto const& value = property(CSS::PropertyID::CaptionSide);
     return keyword_to_caption_side(value.to_keyword());
 }
 
-CSS::Clip StyleProperties::clip() const
+CSS::Clip ComputedProperties::clip() const
 {
     auto const& value = property(CSS::PropertyID::Clip);
     if (!value.is_rect())
@@ -480,25 +480,25 @@ CSS::Clip StyleProperties::clip() const
     return CSS::Clip(value.as_rect().rect());
 }
 
-Optional<CSS::JustifyContent> StyleProperties::justify_content() const
+Optional<CSS::JustifyContent> ComputedProperties::justify_content() const
 {
     auto const& value = property(CSS::PropertyID::JustifyContent);
     return keyword_to_justify_content(value.to_keyword());
 }
 
-Optional<CSS::JustifyItems> StyleProperties::justify_items() const
+Optional<CSS::JustifyItems> ComputedProperties::justify_items() const
 {
     auto const& value = property(CSS::PropertyID::JustifyItems);
     return keyword_to_justify_items(value.to_keyword());
 }
 
-Optional<CSS::JustifySelf> StyleProperties::justify_self() const
+Optional<CSS::JustifySelf> ComputedProperties::justify_self() const
 {
     auto const& value = property(CSS::PropertyID::JustifySelf);
     return keyword_to_justify_self(value.to_keyword());
 }
 
-Vector<CSS::Transformation> StyleProperties::transformations_for_style_value(CSSStyleValue const& value)
+Vector<CSS::Transformation> ComputedProperties::transformations_for_style_value(CSSStyleValue const& value)
 {
     if (value.is_keyword() && value.to_keyword() == CSS::Keyword::None)
         return {};
@@ -559,12 +559,12 @@ Vector<CSS::Transformation> StyleProperties::transformations_for_style_value(CSS
     return transformations;
 }
 
-Vector<CSS::Transformation> StyleProperties::transformations() const
+Vector<CSS::Transformation> ComputedProperties::transformations() const
 {
     return transformations_for_style_value(property(CSS::PropertyID::Transform));
 }
 
-Optional<CSS::Transformation> StyleProperties::rotate(Layout::Node const& layout_node) const
+Optional<CSS::Transformation> ComputedProperties::rotate(Layout::Node const& layout_node) const
 {
     auto const& value = property(CSS::PropertyID::Rotate);
     if (!value.is_rotation())
@@ -601,7 +601,7 @@ Optional<CSS::Transformation> StyleProperties::rotate(Layout::Node const& layout
     return CSS::Transformation(CSS::TransformFunction::Rotate3d, move(values));
 }
 
-Optional<CSS::Transformation> StyleProperties::translate() const
+Optional<CSS::Transformation> ComputedProperties::translate() const
 {
     auto const& value = property(CSS::PropertyID::Translate);
     if (!value.is_translation())
@@ -615,7 +615,7 @@ Optional<CSS::Transformation> StyleProperties::translate() const
     return CSS::Transformation(CSS::TransformFunction::Translate, move(values));
 }
 
-Optional<CSS::Transformation> StyleProperties::scale() const
+Optional<CSS::Transformation> ComputedProperties::scale() const
 {
     auto const& value = property(CSS::PropertyID::Scale);
     if (!value.is_scale())
@@ -640,13 +640,13 @@ static Optional<LengthPercentage> length_percentage_for_style_value(CSSStyleValu
     return {};
 }
 
-Optional<CSS::TransformBox> StyleProperties::transform_box() const
+Optional<CSS::TransformBox> ComputedProperties::transform_box() const
 {
     auto const& value = property(CSS::PropertyID::TransformBox);
     return keyword_to_transform_box(value.to_keyword());
 }
 
-CSS::TransformOrigin StyleProperties::transform_origin() const
+CSS::TransformOrigin ComputedProperties::transform_origin() const
 {
     auto const& value = property(CSS::PropertyID::TransformOrigin);
     if (!value.is_value_list() || value.as_value_list().size() != 2)
@@ -660,7 +660,7 @@ CSS::TransformOrigin StyleProperties::transform_origin() const
     return { x_value.value(), y_value.value() };
 }
 
-Optional<Color> StyleProperties::accent_color(Layout::NodeWithStyle const& node) const
+Optional<Color> ComputedProperties::accent_color(Layout::NodeWithStyle const& node) const
 {
     auto const& value = property(CSS::PropertyID::AccentColor);
     if (value.has_color())
@@ -668,25 +668,25 @@ Optional<Color> StyleProperties::accent_color(Layout::NodeWithStyle const& node)
     return {};
 }
 
-Optional<CSS::AlignContent> StyleProperties::align_content() const
+Optional<CSS::AlignContent> ComputedProperties::align_content() const
 {
     auto const& value = property(CSS::PropertyID::AlignContent);
     return keyword_to_align_content(value.to_keyword());
 }
 
-Optional<CSS::AlignItems> StyleProperties::align_items() const
+Optional<CSS::AlignItems> ComputedProperties::align_items() const
 {
     auto const& value = property(CSS::PropertyID::AlignItems);
     return keyword_to_align_items(value.to_keyword());
 }
 
-Optional<CSS::AlignSelf> StyleProperties::align_self() const
+Optional<CSS::AlignSelf> ComputedProperties::align_self() const
 {
     auto const& value = property(CSS::PropertyID::AlignSelf);
     return keyword_to_align_self(value.to_keyword());
 }
 
-Optional<CSS::Appearance> StyleProperties::appearance() const
+Optional<CSS::Appearance> ComputedProperties::appearance() const
 {
     auto const& value = property(CSS::PropertyID::Appearance);
     auto appearance = keyword_to_appearance(value.to_keyword());
@@ -716,7 +716,7 @@ Optional<CSS::Appearance> StyleProperties::appearance() const
     return appearance;
 }
 
-CSS::Filter StyleProperties::backdrop_filter() const
+CSS::Filter ComputedProperties::backdrop_filter() const
 {
     auto const& value = property(CSS::PropertyID::BackdropFilter);
     if (value.is_filter_value_list())
@@ -724,7 +724,7 @@ CSS::Filter StyleProperties::backdrop_filter() const
     return Filter::make_none();
 }
 
-CSS::Filter StyleProperties::filter() const
+CSS::Filter ComputedProperties::filter() const
 {
     auto const& value = property(CSS::PropertyID::Filter);
     if (value.is_filter_value_list())
@@ -732,13 +732,13 @@ CSS::Filter StyleProperties::filter() const
     return Filter::make_none();
 }
 
-Optional<CSS::Positioning> StyleProperties::position() const
+Optional<CSS::Positioning> ComputedProperties::position() const
 {
     auto const& value = property(CSS::PropertyID::Position);
     return keyword_to_positioning(value.to_keyword());
 }
 
-bool StyleProperties::operator==(StyleProperties const& other) const
+bool ComputedProperties::operator==(ComputedProperties const& other) const
 {
     if (m_data->m_property_values.size() != other.m_data->m_property_values.size())
         return false;
@@ -764,37 +764,37 @@ bool StyleProperties::operator==(StyleProperties const& other) const
     return true;
 }
 
-Optional<CSS::TextAnchor> StyleProperties::text_anchor() const
+Optional<CSS::TextAnchor> ComputedProperties::text_anchor() const
 {
     auto const& value = property(CSS::PropertyID::TextAnchor);
     return keyword_to_text_anchor(value.to_keyword());
 }
 
-Optional<CSS::TextAlign> StyleProperties::text_align() const
+Optional<CSS::TextAlign> ComputedProperties::text_align() const
 {
     auto const& value = property(CSS::PropertyID::TextAlign);
     return keyword_to_text_align(value.to_keyword());
 }
 
-Optional<CSS::TextJustify> StyleProperties::text_justify() const
+Optional<CSS::TextJustify> ComputedProperties::text_justify() const
 {
     auto const& value = property(CSS::PropertyID::TextJustify);
     return keyword_to_text_justify(value.to_keyword());
 }
 
-Optional<CSS::TextOverflow> StyleProperties::text_overflow() const
+Optional<CSS::TextOverflow> ComputedProperties::text_overflow() const
 {
     auto const& value = property(CSS::PropertyID::TextOverflow);
     return keyword_to_text_overflow(value.to_keyword());
 }
 
-Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
+Optional<CSS::PointerEvents> ComputedProperties::pointer_events() const
 {
     auto const& value = property(CSS::PropertyID::PointerEvents);
     return keyword_to_pointer_events(value.to_keyword());
 }
 
-Variant<LengthOrCalculated, NumberOrCalculated> StyleProperties::tab_size() const
+Variant<LengthOrCalculated, NumberOrCalculated> ComputedProperties::tab_size() const
 {
     auto const& value = property(CSS::PropertyID::TabSize);
     if (value.is_calculated()) {
@@ -813,13 +813,13 @@ Variant<LengthOrCalculated, NumberOrCalculated> StyleProperties::tab_size() cons
     return NumberOrCalculated { value.as_number().number() };
 }
 
-Optional<CSS::WordBreak> StyleProperties::word_break() const
+Optional<CSS::WordBreak> ComputedProperties::word_break() const
 {
     auto const& value = property(CSS::PropertyID::WordBreak);
     return keyword_to_word_break(value.to_keyword());
 }
 
-Optional<CSS::LengthOrCalculated> StyleProperties::word_spacing() const
+Optional<CSS::LengthOrCalculated> ComputedProperties::word_spacing() const
 {
     auto const& value = property(CSS::PropertyID::WordSpacing);
     if (value.is_calculated()) {
@@ -835,13 +835,13 @@ Optional<CSS::LengthOrCalculated> StyleProperties::word_spacing() const
     return {};
 }
 
-Optional<CSS::WhiteSpace> StyleProperties::white_space() const
+Optional<CSS::WhiteSpace> ComputedProperties::white_space() const
 {
     auto const& value = property(CSS::PropertyID::WhiteSpace);
     return keyword_to_white_space(value.to_keyword());
 }
 
-Optional<LengthOrCalculated> StyleProperties::letter_spacing() const
+Optional<LengthOrCalculated> ComputedProperties::letter_spacing() const
 {
     auto const& value = property(CSS::PropertyID::LetterSpacing);
     if (value.is_calculated()) {
@@ -857,37 +857,37 @@ Optional<LengthOrCalculated> StyleProperties::letter_spacing() const
     return {};
 }
 
-Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id) const
+Optional<CSS::LineStyle> ComputedProperties::line_style(CSS::PropertyID property_id) const
 {
     auto const& value = property(property_id);
     return keyword_to_line_style(value.to_keyword());
 }
 
-Optional<CSS::OutlineStyle> StyleProperties::outline_style() const
+Optional<CSS::OutlineStyle> ComputedProperties::outline_style() const
 {
     auto const& value = property(CSS::PropertyID::OutlineStyle);
     return keyword_to_outline_style(value.to_keyword());
 }
 
-Optional<CSS::Float> StyleProperties::float_() const
+Optional<CSS::Float> ComputedProperties::float_() const
 {
     auto const& value = property(CSS::PropertyID::Float);
     return keyword_to_float(value.to_keyword());
 }
 
-Optional<CSS::Clear> StyleProperties::clear() const
+Optional<CSS::Clear> ComputedProperties::clear() const
 {
     auto const& value = property(CSS::PropertyID::Clear);
     return keyword_to_clear(value.to_keyword());
 }
 
-Optional<CSS::ColumnSpan> StyleProperties::column_span() const
+Optional<CSS::ColumnSpan> ComputedProperties::column_span() const
 {
     auto const& value = property(CSS::PropertyID::ColumnSpan);
     return keyword_to_column_span(value.to_keyword());
 }
 
-StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::Element& element, u32 initial_quote_nesting_level) const
+ComputedProperties::ContentDataAndQuoteNestingLevel ComputedProperties::content(DOM::Element& element, u32 initial_quote_nesting_level) const
 {
     auto const& value = property(CSS::PropertyID::Content);
     auto quotes_data = quotes();
@@ -989,19 +989,19 @@ StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::E
     return { {}, quote_nesting_level };
 }
 
-Optional<CSS::ContentVisibility> StyleProperties::content_visibility() const
+Optional<CSS::ContentVisibility> ComputedProperties::content_visibility() const
 {
     auto const& value = property(CSS::PropertyID::ContentVisibility);
     return keyword_to_content_visibility(value.to_keyword());
 }
 
-Optional<CSS::Cursor> StyleProperties::cursor() const
+Optional<CSS::Cursor> ComputedProperties::cursor() const
 {
     auto const& value = property(CSS::PropertyID::Cursor);
     return keyword_to_cursor(value.to_keyword());
 }
 
-Optional<CSS::Visibility> StyleProperties::visibility() const
+Optional<CSS::Visibility> ComputedProperties::visibility() const
 {
     auto const& value = property(CSS::PropertyID::Visibility);
     if (!value.is_keyword())
@@ -1009,7 +1009,7 @@ Optional<CSS::Visibility> StyleProperties::visibility() const
     return keyword_to_visibility(value.to_keyword());
 }
 
-Display StyleProperties::display() const
+Display ComputedProperties::display() const
 {
     auto const& value = property(PropertyID::Display);
     if (value.is_display()) {
@@ -1018,7 +1018,7 @@ Display StyleProperties::display() const
     return Display::from_short(Display::Short::Inline);
 }
 
-Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
+Vector<CSS::TextDecorationLine> ComputedProperties::text_decoration_line() const
 {
     auto const& value = property(CSS::PropertyID::TextDecorationLine);
 
@@ -1038,47 +1038,47 @@ Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
     return {};
 }
 
-Optional<CSS::TextDecorationStyle> StyleProperties::text_decoration_style() const
+Optional<CSS::TextDecorationStyle> ComputedProperties::text_decoration_style() const
 {
     auto const& value = property(CSS::PropertyID::TextDecorationStyle);
     return keyword_to_text_decoration_style(value.to_keyword());
 }
 
-Optional<CSS::TextTransform> StyleProperties::text_transform() const
+Optional<CSS::TextTransform> ComputedProperties::text_transform() const
 {
     auto const& value = property(CSS::PropertyID::TextTransform);
     return keyword_to_text_transform(value.to_keyword());
 }
 
-Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
+Optional<CSS::ListStyleType> ComputedProperties::list_style_type() const
 {
     auto const& value = property(CSS::PropertyID::ListStyleType);
     return keyword_to_list_style_type(value.to_keyword());
 }
 
-Optional<CSS::ListStylePosition> StyleProperties::list_style_position() const
+Optional<CSS::ListStylePosition> ComputedProperties::list_style_position() const
 {
     auto const& value = property(CSS::PropertyID::ListStylePosition);
     return keyword_to_list_style_position(value.to_keyword());
 }
 
-Optional<CSS::Overflow> StyleProperties::overflow_x() const
+Optional<CSS::Overflow> ComputedProperties::overflow_x() const
 {
     return overflow(CSS::PropertyID::OverflowX);
 }
 
-Optional<CSS::Overflow> StyleProperties::overflow_y() const
+Optional<CSS::Overflow> ComputedProperties::overflow_y() const
 {
     return overflow(CSS::PropertyID::OverflowY);
 }
 
-Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) const
+Optional<CSS::Overflow> ComputedProperties::overflow(CSS::PropertyID property_id) const
 {
     auto const& value = property(property_id);
     return keyword_to_overflow(value.to_keyword());
 }
 
-Vector<ShadowData> StyleProperties::shadow(PropertyID property_id, Layout::Node const& layout_node) const
+Vector<ShadowData> ComputedProperties::shadow(PropertyID property_id, Layout::Node const& layout_node) const
 {
     auto const& value = property(property_id);
 
@@ -1138,23 +1138,23 @@ Vector<ShadowData> StyleProperties::shadow(PropertyID property_id, Layout::Node
     return {};
 }
 
-Vector<ShadowData> StyleProperties::box_shadow(Layout::Node const& layout_node) const
+Vector<ShadowData> ComputedProperties::box_shadow(Layout::Node const& layout_node) const
 {
     return shadow(PropertyID::BoxShadow, layout_node);
 }
 
-Vector<ShadowData> StyleProperties::text_shadow(Layout::Node const& layout_node) const
+Vector<ShadowData> ComputedProperties::text_shadow(Layout::Node const& layout_node) const
 {
     return shadow(PropertyID::TextShadow, layout_node);
 }
 
-Optional<CSS::BoxSizing> StyleProperties::box_sizing() const
+Optional<CSS::BoxSizing> ComputedProperties::box_sizing() const
 {
     auto const& value = property(CSS::PropertyID::BoxSizing);
     return keyword_to_box_sizing(value.to_keyword());
 }
 
-Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
+Variant<CSS::VerticalAlign, CSS::LengthPercentage> ComputedProperties::vertical_align() const
 {
     auto const& value = property(CSS::PropertyID::VerticalAlign);
 
@@ -1173,7 +1173,7 @@ Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_ali
     VERIFY_NOT_REACHED();
 }
 
-Optional<FlyString> StyleProperties::font_language_override() const
+Optional<FlyString> ComputedProperties::font_language_override() const
 {
     auto const& value = property(CSS::PropertyID::FontLanguageOverride);
     if (value.is_string())
@@ -1181,49 +1181,49 @@ Optional<FlyString> StyleProperties::font_language_override() const
     return {};
 }
 
-Optional<Gfx::FontVariantAlternates> StyleProperties::font_variant_alternates() const
+Optional<Gfx::FontVariantAlternates> ComputedProperties::font_variant_alternates() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantAlternates);
     return value.to_font_variant_alternates();
 }
 
-Optional<FontVariantCaps> StyleProperties::font_variant_caps() const
+Optional<FontVariantCaps> ComputedProperties::font_variant_caps() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantCaps);
     return value.to_font_variant_caps();
 }
 
-Optional<Gfx::FontVariantEastAsian> StyleProperties::font_variant_east_asian() const
+Optional<Gfx::FontVariantEastAsian> ComputedProperties::font_variant_east_asian() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantEastAsian);
     return value.to_font_variant_east_asian();
 }
 
-Optional<FontVariantEmoji> StyleProperties::font_variant_emoji() const
+Optional<FontVariantEmoji> ComputedProperties::font_variant_emoji() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantEmoji);
     return value.to_font_variant_emoji();
 }
 
-Optional<Gfx::FontVariantLigatures> StyleProperties::font_variant_ligatures() const
+Optional<Gfx::FontVariantLigatures> ComputedProperties::font_variant_ligatures() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantLigatures);
     return value.to_font_variant_ligatures();
 }
 
-Optional<Gfx::FontVariantNumeric> StyleProperties::font_variant_numeric() const
+Optional<Gfx::FontVariantNumeric> ComputedProperties::font_variant_numeric() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantNumeric);
     return value.to_font_variant_numeric();
 }
 
-Optional<FontVariantPosition> StyleProperties::font_variant_position() const
+Optional<FontVariantPosition> ComputedProperties::font_variant_position() const
 {
     auto const& value = property(CSS::PropertyID::FontVariantPosition);
     return value.to_font_variant_position();
 }
 
-Optional<HashMap<FlyString, IntegerOrCalculated>> StyleProperties::font_feature_settings() const
+Optional<HashMap<FlyString, IntegerOrCalculated>> ComputedProperties::font_feature_settings() const
 {
     auto const& value = property(PropertyID::FontFeatureSettings);
 
@@ -1250,7 +1250,7 @@ Optional<HashMap<FlyString, IntegerOrCalculated>> StyleProperties::font_feature_
     return {};
 }
 
-Optional<HashMap<FlyString, NumberOrCalculated>> StyleProperties::font_variation_settings() const
+Optional<HashMap<FlyString, NumberOrCalculated>> ComputedProperties::font_variation_settings() const
 {
     auto const& value = property(CSS::PropertyID::FontVariationSettings);
 
@@ -1277,31 +1277,31 @@ Optional<HashMap<FlyString, NumberOrCalculated>> StyleProperties::font_variation
     return {};
 }
 
-CSS::GridTrackSizeList StyleProperties::grid_auto_columns() const
+CSS::GridTrackSizeList ComputedProperties::grid_auto_columns() const
 {
     auto const& value = property(CSS::PropertyID::GridAutoColumns);
     return value.as_grid_track_size_list().grid_track_size_list();
 }
 
-CSS::GridTrackSizeList StyleProperties::grid_auto_rows() const
+CSS::GridTrackSizeList ComputedProperties::grid_auto_rows() const
 {
     auto const& value = property(CSS::PropertyID::GridAutoRows);
     return value.as_grid_track_size_list().grid_track_size_list();
 }
 
-CSS::GridTrackSizeList StyleProperties::grid_template_columns() const
+CSS::GridTrackSizeList ComputedProperties::grid_template_columns() const
 {
     auto const& value = property(CSS::PropertyID::GridTemplateColumns);
     return value.as_grid_track_size_list().grid_track_size_list();
 }
 
-CSS::GridTrackSizeList StyleProperties::grid_template_rows() const
+CSS::GridTrackSizeList ComputedProperties::grid_template_rows() const
 {
     auto const& value = property(CSS::PropertyID::GridTemplateRows);
     return value.as_grid_track_size_list().grid_track_size_list();
 }
 
-CSS::GridAutoFlow StyleProperties::grid_auto_flow() const
+CSS::GridAutoFlow ComputedProperties::grid_auto_flow() const
 {
     auto const& value = property(CSS::PropertyID::GridAutoFlow);
     if (!value.is_grid_auto_flow())
@@ -1310,49 +1310,49 @@ CSS::GridAutoFlow StyleProperties::grid_auto_flow() const
     return CSS::GridAutoFlow { .row = grid_auto_flow_value.is_row(), .dense = grid_auto_flow_value.is_dense() };
 }
 
-CSS::GridTrackPlacement StyleProperties::grid_column_end() const
+CSS::GridTrackPlacement ComputedProperties::grid_column_end() const
 {
     auto const& value = property(CSS::PropertyID::GridColumnEnd);
     return value.as_grid_track_placement().grid_track_placement();
 }
 
-CSS::GridTrackPlacement StyleProperties::grid_column_start() const
+CSS::GridTrackPlacement ComputedProperties::grid_column_start() const
 {
     auto const& value = property(CSS::PropertyID::GridColumnStart);
     return value.as_grid_track_placement().grid_track_placement();
 }
 
-CSS::GridTrackPlacement StyleProperties::grid_row_end() const
+CSS::GridTrackPlacement ComputedProperties::grid_row_end() const
 {
     auto const& value = property(CSS::PropertyID::GridRowEnd);
     return value.as_grid_track_placement().grid_track_placement();
 }
 
-CSS::GridTrackPlacement StyleProperties::grid_row_start() const
+CSS::GridTrackPlacement ComputedProperties::grid_row_start() const
 {
     auto const& value = property(CSS::PropertyID::GridRowStart);
     return value.as_grid_track_placement().grid_track_placement();
 }
 
-Optional<CSS::BorderCollapse> StyleProperties::border_collapse() const
+Optional<CSS::BorderCollapse> ComputedProperties::border_collapse() const
 {
     auto const& value = property(CSS::PropertyID::BorderCollapse);
     return keyword_to_border_collapse(value.to_keyword());
 }
 
-Vector<Vector<String>> StyleProperties::grid_template_areas() const
+Vector<Vector<String>> ComputedProperties::grid_template_areas() const
 {
     auto const& value = property(CSS::PropertyID::GridTemplateAreas);
     return value.as_grid_template_area().grid_template_area();
 }
 
-Optional<CSS::ObjectFit> StyleProperties::object_fit() const
+Optional<CSS::ObjectFit> ComputedProperties::object_fit() const
 {
     auto const& value = property(CSS::PropertyID::ObjectFit);
     return keyword_to_object_fit(value.to_keyword());
 }
 
-CSS::ObjectPosition StyleProperties::object_position() const
+CSS::ObjectPosition ComputedProperties::object_position() const
 {
     auto const& value = property(CSS::PropertyID::ObjectPosition);
     auto const& position = value.as_position();
@@ -1372,37 +1372,37 @@ CSS::ObjectPosition StyleProperties::object_position() const
     return object_position;
 }
 
-Optional<CSS::TableLayout> StyleProperties::table_layout() const
+Optional<CSS::TableLayout> ComputedProperties::table_layout() const
 {
     auto const& value = property(CSS::PropertyID::TableLayout);
     return keyword_to_table_layout(value.to_keyword());
 }
 
-Optional<CSS::Direction> StyleProperties::direction() const
+Optional<CSS::Direction> ComputedProperties::direction() const
 {
     auto const& value = property(CSS::PropertyID::Direction);
     return keyword_to_direction(value.to_keyword());
 }
 
-Optional<CSS::UnicodeBidi> StyleProperties::unicode_bidi() const
+Optional<CSS::UnicodeBidi> ComputedProperties::unicode_bidi() const
 {
     auto const& value = property(CSS::PropertyID::UnicodeBidi);
     return keyword_to_unicode_bidi(value.to_keyword());
 }
 
-Optional<CSS::WritingMode> StyleProperties::writing_mode() const
+Optional<CSS::WritingMode> ComputedProperties::writing_mode() const
 {
     auto const& value = property(CSS::PropertyID::WritingMode);
     return keyword_to_writing_mode(value.to_keyword());
 }
 
-Optional<CSS::MaskType> StyleProperties::mask_type() const
+Optional<CSS::MaskType> ComputedProperties::mask_type() const
 {
     auto const& value = property(CSS::PropertyID::MaskType);
     return keyword_to_mask_type(value.to_keyword());
 }
 
-Color StyleProperties::stop_color() const
+Color ComputedProperties::stop_color() const
 {
     NonnullRawPtr<CSSStyleValue const> value = property(CSS::PropertyID::StopColor);
     if (value->is_keyword()) {
@@ -1419,14 +1419,14 @@ Color StyleProperties::stop_color() const
     return Color::Black;
 }
 
-void StyleProperties::set_math_depth(int math_depth)
+void ComputedProperties::set_math_depth(int math_depth)
 {
     m_data->m_math_depth = math_depth;
     // Make our children inherit our computed value, not our specified value.
     set_property(PropertyID::MathDepth, MathDepthStyleValue::create_integer(IntegerStyleValue::create(math_depth)));
 }
 
-QuotesData StyleProperties::quotes() const
+QuotesData ComputedProperties::quotes() const
 {
     auto const& value = property(CSS::PropertyID::Quotes);
     if (value.is_keyword()) {
@@ -1454,7 +1454,7 @@ QuotesData StyleProperties::quotes() const
     return InitialValues::quotes();
 }
 
-Vector<CounterData> StyleProperties::counter_data(PropertyID property_id) const
+Vector<CounterData> ComputedProperties::counter_data(PropertyID property_id) const
 {
     auto const& value = property(property_id);
 
@@ -1490,7 +1490,7 @@ Vector<CounterData> StyleProperties::counter_data(PropertyID property_id) const
     return {};
 }
 
-Optional<CSS::ScrollbarWidth> StyleProperties::scrollbar_width() const
+Optional<CSS::ScrollbarWidth> ComputedProperties::scrollbar_width() const
 {
     auto const& value = property(CSS::PropertyID::ScrollbarWidth);
     return keyword_to_scrollbar_width(value.to_keyword());

Libraries/LibWeb/CSS/StyleProperties.h → Libraries/LibWeb/CSS/ComputedProperties.h

@@ -19,7 +19,7 @@
 
 namespace Web::CSS {
 
-class StyleProperties {
+class ComputedProperties {
 public:
     static constexpr size_t number_of_properties = to_underlying(CSS::last_property_id) + 1;
 
@@ -46,7 +46,7 @@ private:
     };
 
 public:
-    StyleProperties() = default;
+    ComputedProperties() = default;
 
     template<typename Callback>
     inline void for_each_property(Callback callback) const
@@ -78,7 +78,7 @@ public:
     };
     CSSStyleValue const& property(CSS::PropertyID, WithAnimationsApplied = WithAnimationsApplied::Yes) const;
     CSSStyleValue const* maybe_null_property(CSS::PropertyID) const;
-    void revert_property(CSS::PropertyID, StyleProperties const& style_for_revert);
+    void revert_property(CSS::PropertyID, ComputedProperties const& style_for_revert);
 
     GC::Ptr<CSS::CSSStyleDeclaration const> animation_name_source() const { return m_data->m_animation_name_source; }
     void set_animation_name_source(GC::Ptr<CSS::CSSStyleDeclaration const> declaration) { m_data->m_animation_name_source = declaration; }
@@ -214,7 +214,7 @@ public:
     [[nodiscard]] CSSPixels line_height() const { return *m_data->m_line_height; }
     void set_line_height(Badge<StyleComputer> const&, CSSPixels line_height) { m_data->m_line_height = line_height; }
 
-    bool operator==(StyleProperties const&) const;
+    bool operator==(ComputedProperties const&) const;
 
     Optional<CSS::Positioning> position() const;
     Optional<int> z_index() const;
@@ -237,7 +237,7 @@ private:
     Optional<CSS::Overflow> overflow(CSS::PropertyID) const;
     Vector<CSS::ShadowData> shadow(CSS::PropertyID, Layout::Node const&) const;
 
-    AK::CopyOnWrite<StyleProperties::Data> m_data;
+    AK::CopyOnWrite<ComputedProperties::Data> m_data;
 };
 
 }

Libraries/LibWeb/CSS/SelectorEngine.cpp

@@ -5,10 +5,10 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Keyword.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/SelectorEngine.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/DOM/Attr.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -1019,7 +1019,7 @@ static void cascade_custom_properties(DOM::Element& element, Optional<CSS::Selec
     }
 }
 
-void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, GC::Ref<Animations::KeyframeEffect> effect, StyleProperties& style_properties, AnimationRefresh refresh) const
+void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, GC::Ref<Animations::KeyframeEffect> effect, ComputedProperties& computed_properties, AnimationRefresh refresh) const
 {
     auto animation = effect->associated_animation();
     if (!animation)
@@ -1075,11 +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.property(it.key);
+                    return computed_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);
+                        return computed_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;
@@ -1091,7 +1091,7 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
         auto const& end_property = keyframe_end_values.properties.get(it.key);
         if (!end_property.has_value()) {
             if (resolved_start_property) {
-                style_properties.set_animated_property(it.key, *resolved_start_property);
+                computed_properties.set_animated_property(it.key, *resolved_start_property);
                 dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "No end property for property {}, using {}", string_from_property_id(it.key), resolved_start_property->to_string(CSSStyleValue::SerializationMode::Normal));
             }
             continue;
@@ -1108,17 +1108,17 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
         auto start = resolved_start_property.release_nonnull();
         auto end = resolved_end_property.release_nonnull();
 
-        if (style_properties.is_property_important(it.key)) {
+        if (computed_properties.is_property_important(it.key)) {
             continue;
         }
 
         if (auto next_value = interpolate_property(*effect->target(), it.key, *start, *end, progress_in_keyframe)) {
             dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Interpolated value for property {} at {}: {} -> {} = {}", string_from_property_id(it.key), progress_in_keyframe, start->to_string(CSSStyleValue::SerializationMode::Normal), end->to_string(CSSStyleValue::SerializationMode::Normal), next_value->to_string(CSSStyleValue::SerializationMode::Normal));
-            style_properties.set_animated_property(it.key, *next_value);
+            computed_properties.set_animated_property(it.key, *next_value);
         } else {
             // If interpolate_property() fails, the element should not be rendered
             dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Interpolated value for property {} at {}: {} -> {} is invalid", string_from_property_id(it.key), progress_in_keyframe, start->to_string(CSSStyleValue::SerializationMode::Normal), end->to_string(CSSStyleValue::SerializationMode::Normal));
-            style_properties.set_animated_property(PropertyID::Visibility, CSSKeywordValue::create(Keyword::Hidden));
+            computed_properties.set_animated_property(PropertyID::Visibility, CSSKeywordValue::create(Keyword::Hidden));
         }
     }
 }
@@ -1207,7 +1207,7 @@ static void apply_dimension_attribute(CascadedProperties& cascaded_properties, D
     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)
+static void compute_transitioned_properties(ComputedProperties const& style, DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element)
 {
     // FIXME: Implement transitioning for pseudo-elements
     (void)pseudo_element;
@@ -1291,7 +1291,7 @@ static void compute_transitioned_properties(StyleProperties const& style, DOM::E
 }
 
 // https://drafts.csswg.org/css-transitions/#starting
-void StyleComputer::start_needed_transitions(StyleProperties const& previous_style, StyleProperties& new_style, DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::start_needed_transitions(ComputedProperties const& previous_style, ComputedProperties& new_style, DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element) const
 {
     // FIXME: Implement transitions for pseudo-elements
     if (pseudo_element.has_value())
@@ -1309,8 +1309,8 @@ void StyleComputer::start_needed_transitions(StyleProperties const& previous_sty
     for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
         auto property_id = static_cast<CSS::PropertyID>(i);
         auto matching_transition_properties = element.property_transition_attributes(property_id);
-        auto const& before_change_value = previous_style.property(property_id, StyleProperties::WithAnimationsApplied::No);
-        auto const& after_change_value = new_style.property(property_id, StyleProperties::WithAnimationsApplied::No);
+        auto const& before_change_value = previous_style.property(property_id, ComputedProperties::WithAnimationsApplied::No);
+        auto const& after_change_value = new_style.property(property_id, ComputedProperties::WithAnimationsApplied::No);
 
         auto existing_transition = element.property_transition(property_id);
         bool has_running_transition = existing_transition && !existing_transition->is_finished();
@@ -1595,7 +1595,7 @@ NonnullRefPtr<CSSStyleValue const> StyleComputer::get_inherit_value(CSS::Propert
     return parent_element->computed_css_values()->property(property_id);
 }
 
-void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM::Element const* element, CSS::PropertyID property_id, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::compute_defaulted_property_value(ComputedProperties& style, DOM::Element const* element, CSS::PropertyID property_id, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     // FIXME: If we don't know the correct initial value for a property, we fall back to `initial`.
 
@@ -1605,7 +1605,7 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
             style.set_property(
                 property_id,
                 get_inherit_value(property_id, element, pseudo_element),
-                StyleProperties::Inherited::Yes,
+                ComputedProperties::Inherited::Yes,
                 Important::No);
         } else {
             style.set_property(property_id, property_initial_value(property_id));
@@ -1620,7 +1620,7 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
 
     if (value_slot->is_inherit()) {
         value_slot = get_inherit_value(property_id, element, pseudo_element);
-        style.set_property_inherited(property_id, StyleProperties::Inherited::Yes);
+        style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
         return;
     }
 
@@ -1630,7 +1630,7 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
         if (is_inherited_property(property_id)) {
             // then if it is an inherited property, this is treated as inherit,
             value_slot = get_inherit_value(property_id, element, pseudo_element);
-            style.set_property_inherited(property_id, StyleProperties::Inherited::Yes);
+            style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
         } else {
             // and if it is not, this is treated as initial.
             value_slot = property_initial_value(property_id);
@@ -1639,7 +1639,7 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
 }
 
 // https://www.w3.org/TR/css-cascade/#defaulting
-void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::compute_defaulted_values(ComputedProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     // Walk the list of all known CSS properties and:
     // - Add them to `style` if they are missing.
@@ -1658,7 +1658,7 @@ void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Elemen
     }
 }
 
-Length::FontMetrics StyleComputer::calculate_root_element_font_metrics(StyleProperties const& style) const
+Length::FontMetrics StyleComputer::calculate_root_element_font_metrics(ComputedProperties const& style) const
 {
     auto const& root_value = style.property(CSS::PropertyID::FontSize);
 
@@ -2010,13 +2010,13 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
         font_list->add(*emoji_font);
     }
 
-    auto found_font = StyleProperties::font_fallback(monospace, bold);
+    auto found_font = ComputedProperties::font_fallback(monospace, bold);
     font_list->set_last_resort_font(found_font->with_size(font_size_in_pt));
 
     return font_list;
 }
 
-void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::compute_font(ComputedProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     // To compute the font, first ensure that we've defaulted the relevant CSS font properties.
     // FIXME: This should be more sophisticated.
@@ -2060,10 +2060,10 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
 Gfx::Font const& StyleComputer::initial_font() const
 {
     // FIXME: This is not correct.
-    return StyleProperties::font_fallback(false, false);
+    return ComputedProperties::font_fallback(false, false);
 }
 
-void StyleComputer::absolutize_values(StyleProperties& style) const
+void StyleComputer::absolutize_values(ComputedProperties& style) const
 {
     Length::FontMetrics font_metrics {
         m_root_element_font_metrics.font_size,
@@ -2100,7 +2100,7 @@ void StyleComputer::absolutize_values(StyleProperties& style) const
     style.set_line_height({}, line_height);
 }
 
-void StyleComputer::resolve_effective_overflow_values(StyleProperties& style) const
+void StyleComputer::resolve_effective_overflow_values(ComputedProperties& style) const
 {
     // https://www.w3.org/TR/css-overflow-3/#overflow-control
     // The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or
@@ -2127,7 +2127,7 @@ enum class BoxTypeTransformation {
     Inlinify,
 };
 
-static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> const& pseudo_element)
+static BoxTypeTransformation required_box_type_transformation(ComputedProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> const& pseudo_element)
 {
     // NOTE: We never blockify <br> elements. They are always inline.
     //       There is currently no way to express in CSS how a <br> element really behaves.
@@ -2155,7 +2155,7 @@ static BoxTypeTransformation required_box_type_transformation(StyleProperties co
 }
 
 // https://drafts.csswg.org/css-display/#transformations
-void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::transform_box_type_if_needed(ComputedProperties& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     // 2.7. Automatic Box Type Transformations
 
@@ -2244,9 +2244,9 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El
         style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create(new_display));
 }
 
-StyleProperties StyleComputer::create_document_style() const
+ComputedProperties StyleComputer::create_document_style() const
 {
-    StyleProperties style = {};
+    ComputedProperties style = {};
     compute_math_depth(style, nullptr, {});
     compute_font(style, nullptr, {});
     compute_defaulted_values(style, nullptr, {});
@@ -2257,17 +2257,17 @@ StyleProperties StyleComputer::create_document_style() const
     return style;
 }
 
-StyleProperties StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+ComputedProperties StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     return compute_style_impl(element, move(pseudo_element), ComputeStyleMode::Normal).release_value();
 }
 
-Optional<StyleProperties> StyleComputer::compute_pseudo_element_style_if_needed(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+Optional<ComputedProperties> StyleComputer::compute_pseudo_element_style_if_needed(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     return compute_style_impl(element, move(pseudo_element), ComputeStyleMode::CreatePseudoElementStyleIfNeeded);
 }
 
-Optional<StyleProperties> StyleComputer::compute_style_impl(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, ComputeStyleMode mode) const
+Optional<ComputedProperties> StyleComputer::compute_style_impl(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, ComputeStyleMode mode) const
 {
     build_rule_cache_if_needed();
 
@@ -2324,9 +2324,9 @@ 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
+ComputedProperties StyleComputer::compute_properties(DOM::Element& element, Optional<Selector::PseudoElement::Type> pseudo_element, CascadedProperties& cascaded_properties) const
 {
-    StyleProperties computed_style;
+    ComputedProperties 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);
@@ -2900,7 +2900,7 @@ void StyleComputer::unload_fonts_from_sheet(CSSStyleSheet& sheet)
     }
 }
 
-void StyleComputer::compute_math_depth(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
+void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
 {
     // https://w3c.github.io/mathml-core/#propdef-math-depth
 

Libraries/LibWeb/CSS/StyleComputer.h

@@ -17,8 +17,8 @@
 #include <LibWeb/CSS/CSSStyleDeclaration.h>
 #include <LibWeb/CSS/CascadeOrigin.h>
 #include <LibWeb/CSS/CascadedProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Selector.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/Forward.h>
 #include <LibWeb/Loader/ResourceLoader.h>
 
@@ -141,10 +141,10 @@ public:
     void push_ancestor(DOM::Element const&);
     void pop_ancestor(DOM::Element const&);
 
-    StyleProperties create_document_style() const;
+    ComputedProperties create_document_style() const;
 
-    StyleProperties compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type> = {}) const;
-    Optional<StyleProperties> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>) const;
+    ComputedProperties compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type> = {}) const;
+    Optional<ComputedProperties> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>) const;
 
     Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin, Optional<CSS::Selector::PseudoElement::Type>, FlyString const& qualified_layer_name = {}) const;
 
@@ -167,13 +167,13 @@ public:
         No,
         Yes,
     };
-    void collect_animation_into(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, GC::Ref<Animations::KeyframeEffect> animation, StyleProperties&, AnimationRefresh = AnimationRefresh::No) const;
+    void collect_animation_into(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, GC::Ref<Animations::KeyframeEffect> animation, ComputedProperties&, 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;
+    [[nodiscard]] ComputedProperties compute_properties(DOM::Element&, Optional<Selector::PseudoElement::Type>, CascadedProperties&) const;
 
 private:
     enum class ComputeStyleMode {
@@ -185,20 +185,20 @@ 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;
+    Optional<ComputedProperties> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, 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;
-    void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
-    void compute_math_depth(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
-    void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
-    void start_needed_transitions(StyleProperties const& old_style, StyleProperties& new_style, DOM::Element&, Optional<Selector::PseudoElement::Type>) const;
-    void absolutize_values(StyleProperties&) const;
-    void resolve_effective_overflow_values(StyleProperties&) const;
-    void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement::Type>) const;
+    void compute_font(ComputedProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
+    void compute_math_depth(ComputedProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
+    void compute_defaulted_values(ComputedProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
+    void start_needed_transitions(ComputedProperties const& old_style, ComputedProperties& new_style, DOM::Element&, Optional<Selector::PseudoElement::Type>) const;
+    void absolutize_values(ComputedProperties&) const;
+    void resolve_effective_overflow_values(ComputedProperties&) const;
+    void transform_box_type_if_needed(ComputedProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement::Type>) const;
 
-    void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const;
+    void compute_defaulted_property_value(ComputedProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const;
 
     void set_all_properties(
         CascadedProperties&,
@@ -216,7 +216,7 @@ private:
 
     [[nodiscard]] CSSPixelRect viewport_rect() const { return m_viewport_rect; }
 
-    [[nodiscard]] Length::FontMetrics calculate_root_element_font_metrics(StyleProperties const&) const;
+    [[nodiscard]] Length::FontMetrics calculate_root_element_font_metrics(ComputedProperties const&) const;
 
     Vector<FlyString> m_qualified_layer_names_in_order;
     void build_qualified_layer_names_cache();

Libraries/LibWeb/CSS/StyleInvalidation.cpp

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleInvalidation.h>
-#include <LibWeb/CSS/StyleProperties.h>
 
 namespace Web::CSS {
 
@@ -45,8 +45,8 @@ RequiredInvalidationAfterStyleChange compute_property_invalidation(CSS::Property
         // OPTIMIZATION: An element creates a stacking context when its opacity changes from 1 to less than 1
         //               and stops to create one when opacity returns to 1. So stacking context tree rebuild is
         //               not required for opacity changes within the range below 1.
-        auto old_value_opacity = CSS::StyleProperties::resolve_opacity_value(*old_value);
-        auto new_value_opacity = CSS::StyleProperties::resolve_opacity_value(*new_value);
+        auto old_value_opacity = CSS::ComputedProperties::resolve_opacity_value(*old_value);
+        auto new_value_opacity = CSS::ComputedProperties::resolve_opacity_value(*new_value);
         if (old_value_opacity != new_value_opacity && (old_value_opacity == 1 || new_value_opacity == 1)) {
             invalidation.rebuild_stacking_context_tree = true;
         }

Libraries/LibWeb/DOM/Document.cpp

@@ -1386,7 +1386,7 @@ void Document::update_animated_style_if_needed()
 
         for (auto& animation : timeline->associated_animations()) {
             if (auto effect = animation->effect())
-                effect->update_style_properties();
+                effect->update_computed_properties();
         }
     }
     m_needs_animated_style_update = false;

Libraries/LibWeb/DOM/Element.cpp

@@ -13,12 +13,12 @@
 #include <LibWeb/Bindings/ElementPrototype.h>
 #include <LibWeb/Bindings/ExceptionOrUtils.h>
 #include <LibWeb/Bindings/MainThreadVM.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/PropertyID.h>
 #include <LibWeb/CSS/ResolvedCSSStyleDeclaration.h>
 #include <LibWeb/CSS/SelectorEngine.h>
 #include <LibWeb/CSS/StyleComputer.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/DOM/Attr.h>
@@ -388,7 +388,7 @@ Vector<String> Element::get_attribute_names() const
     return names;
 }
 
-GC::Ptr<Layout::Node> Element::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> Element::create_layout_node(CSS::ComputedProperties style)
 {
     if (local_name() == "noscript" && document().is_scripting_enabled())
         return nullptr;
@@ -397,7 +397,7 @@ GC::Ptr<Layout::Node> Element::create_layout_node(CSS::StyleProperties style)
     return create_layout_node_for_display_type(document(), display, move(style), this);
 }
 
-GC::Ptr<Layout::NodeWithStyle> Element::create_layout_node_for_display_type(DOM::Document& document, CSS::Display const& display, CSS::StyleProperties style, Element* element)
+GC::Ptr<Layout::NodeWithStyle> Element::create_layout_node_for_display_type(DOM::Document& document, CSS::Display const& display, CSS::ComputedProperties style, Element* element)
 {
     if (display.is_table_inside() || display.is_table_row_group() || display.is_table_header_group() || display.is_table_footer_group() || display.is_table_row())
         return document.heap().allocate<Layout::Box>(document, element, move(style));
@@ -454,7 +454,7 @@ void Element::run_attribute_change_steps(FlyString const& local_name, Optional<S
     }
 }
 
-static CSS::RequiredInvalidationAfterStyleChange compute_required_invalidation(CSS::StyleProperties const& old_style, CSS::StyleProperties const& new_style)
+static CSS::RequiredInvalidationAfterStyleChange compute_required_invalidation(CSS::ComputedProperties const& old_style, CSS::ComputedProperties const& new_style)
 {
     CSS::RequiredInvalidationAfterStyleChange invalidation;
 
@@ -552,10 +552,10 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
     return invalidation;
 }
 
-CSS::StyleProperties Element::resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> type)
+CSS::ComputedProperties Element::resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> type)
 {
     auto element_computed_style = CSS::ResolvedCSSStyleDeclaration::create(*this, type);
-    CSS::StyleProperties properties = {};
+    CSS::ComputedProperties properties = {};
 
     for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {
         auto property_id = (CSS::PropertyID)i;
@@ -2297,13 +2297,13 @@ void Element::set_cascaded_properties(Optional<CSS::Selector::PseudoElement::Typ
     }
 }
 
-void Element::set_computed_css_values(Optional<CSS::StyleProperties> style)
+void Element::set_computed_css_values(Optional<CSS::ComputedProperties> style)
 {
     m_computed_css_values = move(style);
     computed_css_values_changed();
 }
 
-void Element::set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type pseudo_element, Optional<CSS::StyleProperties> style)
+void Element::set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type pseudo_element, Optional<CSS::ComputedProperties> style)
 {
     if (!m_pseudo_element_data && !style.has_value())
         return;
@@ -2315,7 +2315,7 @@ void Element::set_pseudo_element_computed_css_values(CSS::Selector::PseudoElemen
     ensure_pseudo_element(pseudo_element).computed_css_values = move(style);
 }
 
-Optional<CSS::StyleProperties&> Element::pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type type)
+Optional<CSS::ComputedProperties&> Element::pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type type)
 {
     auto pseudo_element = get_pseudo_element(type);
     if (pseudo_element.has_value())
@@ -2917,7 +2917,7 @@ CSS::CountersSet& Element::ensure_counters_set()
 }
 
 // https://drafts.csswg.org/css-lists-3/#auto-numbering
-void Element::resolve_counters(CSS::StyleProperties& style)
+void Element::resolve_counters(CSS::ComputedProperties& style)
 {
     // Resolving counter values on a given element is a multi-step process:
 

Libraries/LibWeb/DOM/Element.h

@@ -14,10 +14,10 @@
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/Bindings/ShadowRootPrototype.h>
 #include <LibWeb/CSS/CascadedProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/CountersSet.h>
 #include <LibWeb/CSS/Selector.h>
 #include <LibWeb/CSS/StyleInvalidation.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleProperty.h>
 #include <LibWeb/DOM/ChildNode.h>
 #include <LibWeb/DOM/NonDocumentTypeChildNode.h>
@@ -185,16 +185,16 @@ public:
     GC::Ptr<Layout::NodeWithStyle> layout_node();
     GC::Ptr<Layout::NodeWithStyle const> layout_node() const;
 
-    Optional<CSS::StyleProperties>& computed_css_values() { return m_computed_css_values; }
-    Optional<CSS::StyleProperties> const& computed_css_values() const { return m_computed_css_values; }
-    void set_computed_css_values(Optional<CSS::StyleProperties>);
-    CSS::StyleProperties resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> = {});
+    Optional<CSS::ComputedProperties>& computed_css_values() { return m_computed_css_values; }
+    Optional<CSS::ComputedProperties> const& computed_css_values() const { return m_computed_css_values; }
+    void set_computed_css_values(Optional<CSS::ComputedProperties>);
+    CSS::ComputedProperties 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);
+    void set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type, Optional<CSS::ComputedProperties>);
+    Optional<CSS::ComputedProperties&> pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type);
 
     void reset_animated_css_properties();
 
@@ -240,13 +240,13 @@ public:
     GC::Ref<Geometry::DOMRect> get_bounding_client_rect() const;
     GC::Ref<Geometry::DOMRectList> get_client_rects() const;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties);
-    virtual void adjust_computed_style(CSS::StyleProperties&) { }
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties);
+    virtual void adjust_computed_style(CSS::ComputedProperties&) { }
 
     virtual void did_receive_focus() { }
     virtual void did_lose_focus() { }
 
-    static GC::Ptr<Layout::NodeWithStyle> create_layout_node_for_display_type(DOM::Document&, CSS::Display const&, CSS::StyleProperties, Element*);
+    static GC::Ptr<Layout::NodeWithStyle> create_layout_node_for_display_type(DOM::Document&, CSS::Display const&, CSS::ComputedProperties, Element*);
 
     void set_pseudo_element_node(Badge<Layout::TreeBuilder>, CSS::Selector::PseudoElement::Type, GC::Ptr<Layout::NodeWithStyle>);
     GC::Ptr<Layout::NodeWithStyle> get_pseudo_element_node(CSS::Selector::PseudoElement::Type) const;
@@ -369,7 +369,7 @@ public:
     bool has_non_empty_counters_set() const { return m_counters_set; }
     Optional<CSS::CountersSet const&> counters_set();
     CSS::CountersSet& ensure_counters_set();
-    void resolve_counters(CSS::StyleProperties&);
+    void resolve_counters(CSS::ComputedProperties&);
     void inherit_counters();
 
 protected:
@@ -416,13 +416,13 @@ private:
 
     GC::Ptr<CSS::CascadedProperties> m_cascaded_properties;
 
-    Optional<CSS::StyleProperties> m_computed_css_values;
+    Optional<CSS::ComputedProperties> 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;
+        Optional<CSS::ComputedProperties> computed_css_values;
         HashMap<FlyString, CSS::StyleProperty> custom_properties;
     };
     // TODO: CSS::Selector::PseudoElement::Type includes a lot of pseudo-elements that exist in shadow trees,

Libraries/LibWeb/Forward.h

@@ -216,7 +216,7 @@ class ShorthandStyleValue;
 class Size;
 class StringStyleValue;
 class StyleComputer;
-class StyleProperties;
+class ComputedProperties;
 class StyleSheet;
 class StyleSheetList;
 class StyleValueList;

Libraries/LibWeb/Geometry/DOMMatrixReadOnly.cpp

@@ -8,8 +8,8 @@
 
 #include <LibJS/Runtime/TypedArray.h>
 #include <LibWeb/Bindings/DOMMatrixReadOnlyPrototype.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
 #include <LibWeb/Geometry/DOMMatrix.h>
 #include <LibWeb/Geometry/DOMMatrixReadOnly.h>
@@ -949,7 +949,7 @@ WebIDL::ExceptionOr<ParsedMatrix> parse_dom_matrix_init_string(JS::Realm& realm,
     auto transform_style_value = parse_css_value(CSS::Parser::ParsingContext {}, transform_list, CSS::PropertyID::Transform);
     if (!transform_style_value)
         return WebIDL::SyntaxError::create(realm, "Failed to parse CSS transform string."_string);
-    auto parsed_value = CSS::StyleProperties::transformations_for_style_value(*transform_style_value);
+    auto parsed_value = CSS::ComputedProperties::transformations_for_style_value(*transform_style_value);
 
     // 3. If parsedValue is none, set parsedValue to a <transform-list> containing a single identity matrix.
     // NOTE: parsed_value is empty on none so for loop in 6 won't modify matrix

Libraries/LibWeb/HTML/HTMLAudioElement.cpp

@@ -29,12 +29,12 @@ void HTMLAudioElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLAudioElement);
 }
 
-GC::Ptr<Layout::Node> HTMLAudioElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLAudioElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::AudioBox>(document(), *this, move(style));
 }
 
-void HTMLAudioElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLAudioElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLAudioElement.h

@@ -25,8 +25,8 @@ private:
 
     virtual void initialize(JS::Realm&) override;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     virtual void on_playing() override;
     virtual void on_paused() override;

Libraries/LibWeb/HTML/HTMLBRElement.cpp

@@ -27,12 +27,12 @@ void HTMLBRElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLBRElement);
 }
 
-GC::Ptr<Layout::Node> HTMLBRElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLBRElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::BreakNode>(document(), *this, move(style));
 }
 
-void HTMLBRElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLBRElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLBRElement.h

@@ -17,8 +17,8 @@ class HTMLBRElement final : public HTMLElement {
 public:
     virtual ~HTMLBRElement() override;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
 private:
     virtual bool is_html_br_element() const override { return true; }

Libraries/LibWeb/HTML/HTMLBodyElement.cpp

@@ -5,7 +5,7 @@
  */
 
 #include <LibWeb/Bindings/HTMLBodyElementPrototype.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>

Libraries/LibWeb/HTML/HTMLCanvasElement.cpp

@@ -175,12 +175,12 @@ WebIDL::ExceptionOr<void> HTMLCanvasElement::set_height(WebIDL::UnsignedLong val
     return {};
 }
 
-GC::Ptr<Layout::Node> HTMLCanvasElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLCanvasElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::CanvasBox>(document(), *this, move(style));
 }
 
-void HTMLCanvasElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLCanvasElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLCanvasElement.h

@@ -54,8 +54,8 @@ private:
 
     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;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     template<typename ContextType>
     JS::ThrowCompletionOr<HasOrCreatedContext> create_webgl_context(JS::Value options);

Libraries/LibWeb/HTML/HTMLDivElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLDivElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLDivElement.h>
 

Libraries/LibWeb/HTML/HTMLElement.cpp

@@ -940,7 +940,7 @@ WebIDL::ExceptionOr<void> HTMLElement::set_popover(Optional<String> value)
     return {};
 }
 
-void HTMLElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (local_name() == HTML::TagNames::wbr) {

Libraries/LibWeb/HTML/HTMLElement.h

@@ -145,7 +145,7 @@ protected:
 private:
     virtual bool is_html_element() const final { return true; }
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     // ^HTML::GlobalEventHandlers
     virtual GC::Ptr<DOM::EventTarget> global_event_handlers_to_event_target(FlyString const&) override { return *this; }

Libraries/LibWeb/HTML/HTMLEmbedElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLEmbedElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/HTML/HTMLEmbedElement.h>
@@ -60,7 +60,7 @@ void HTMLEmbedElement::apply_presentational_hints(GC::Ref<CSS::CascadedPropertie
     });
 }
 
-void HTMLEmbedElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLEmbedElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLEmbedElement.h

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

Libraries/LibWeb/HTML/HTMLFieldSetElement.cpp

@@ -83,7 +83,7 @@ Layout::FieldSetBox* HTMLFieldSetElement::layout_node()
     return static_cast<Layout::FieldSetBox*>(Node::layout_node());
 }
 
-GC::Ptr<Layout::Node> HTMLFieldSetElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLFieldSetElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::FieldSetBox>(document(), *this, style);
 }

Libraries/LibWeb/HTML/HTMLFieldSetElement.h

@@ -42,7 +42,7 @@ public:
 
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::group; }
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
     Layout::FieldSetBox* layout_node();
     Layout::FieldSetBox const* layout_node() const;
 

Libraries/LibWeb/HTML/HTMLFontElement.cpp

@@ -7,9 +7,9 @@
 #include <AK/GenericLexer.h>
 #include <LibWeb/Bindings/HTMLFontElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/Parser/ParsingContext.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/HTML/HTMLFontElement.h>
 #include <LibWeb/HTML/Parser/HTMLParser.h>

Libraries/LibWeb/HTML/HTMLFrameElement.cpp

@@ -82,7 +82,7 @@ i32 HTMLFrameElement::default_tab_index_value() const
     return 0;
 }
 
-void HTMLFrameElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLFrameElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLFrameElement.h

@@ -28,7 +28,7 @@ private:
     virtual void removed_from(Node*) override;
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
     virtual i32 default_tab_index_value() const override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     void process_the_frame_attributes(bool initial_insertion = false);
 };

Libraries/LibWeb/HTML/HTMLFrameSetElement.cpp

@@ -21,7 +21,7 @@ HTMLFrameSetElement::HTMLFrameSetElement(DOM::Document& document, DOM::Qualified
 
 HTMLFrameSetElement::~HTMLFrameSetElement() = default;
 
-void HTMLFrameSetElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLFrameSetElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLFrameSetElement.h

@@ -24,7 +24,7 @@ public:
 private:
     HTMLFrameSetElement(DOM::Document&, DOM::QualifiedName);
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     virtual void initialize(JS::Realm&) override;
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;

Libraries/LibWeb/HTML/HTMLHRElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLHRElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/HTML/HTMLHRElement.h>
 #include <LibWeb/HTML/Parser/HTMLParser.h>

Libraries/LibWeb/HTML/HTMLHeadingElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLHeadingElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLHeadingElement.h>
 

Libraries/LibWeb/HTML/HTMLIFrameElement.cpp

@@ -34,12 +34,12 @@ void HTMLIFrameElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLIFrameElement);
 }
 
-GC::Ptr<Layout::Node> HTMLIFrameElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLIFrameElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::NavigableContainerViewport>(document(), *this, move(style));
 }
 
-void HTMLIFrameElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLIFrameElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLIFrameElement.h

@@ -23,8 +23,8 @@ class HTMLIFrameElement final
 public:
     virtual ~HTMLIFrameElement() override;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     void set_current_navigation_was_lazy_loaded(bool value);
 

Libraries/LibWeb/HTML/HTMLImageElement.cpp

@@ -134,12 +134,12 @@ void HTMLImageElement::form_associated_element_attribute_changed(FlyString const
     }
 }
 
-GC::Ptr<Layout::Node> HTMLImageElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLImageElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::ImageBox>(document(), *this, move(style), *this);
 }
 
-void HTMLImageElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLImageElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLImageElement.h

@@ -126,8 +126,8 @@ private:
     // https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element:dimension-attributes
     virtual bool supports_dimension_attributes() const override { return true; }
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     virtual void did_set_viewport_rect(CSSPixelRect const&) override;
 

Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -99,7 +99,7 @@ GC::Ref<ValidityState const> HTMLInputElement::validity() const
     return realm.create<ValidityState>(realm);
 }
 
-GC::Ptr<Layout::Node> HTMLInputElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLInputElement::create_layout_node(CSS::ComputedProperties style)
 {
     if (type_state() == TypeAttributeState::Hidden)
         return nullptr;
@@ -130,7 +130,7 @@ GC::Ptr<Layout::Node> HTMLInputElement::create_layout_node(CSS::StyleProperties
     return Element::create_layout_node_for_display_type(document(), style.display(), style, this);
 }
 
-void HTMLInputElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLInputElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     if (type_state() == TypeAttributeState::Hidden || type_state() == TypeAttributeState::SubmitButton || type_state() == TypeAttributeState::Button || type_state() == TypeAttributeState::ResetButton || type_state() == TypeAttributeState::ImageButton || type_state() == TypeAttributeState::Checkbox || type_state() == TypeAttributeState::RadioButton)
         return;

Libraries/LibWeb/HTML/HTMLInputElement.h

@@ -58,8 +58,8 @@ class HTMLInputElement final
 public:
     virtual ~HTMLInputElement() override;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     enum class TypeAttributeState {
 #define __ENUMERATE_HTML_INPUT_TYPE_ATTRIBUTE(_, state) state,

Libraries/LibWeb/HTML/HTMLLabelElement.cpp

@@ -27,7 +27,7 @@ void HTMLLabelElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLLabelElement);
 }
 
-GC::Ptr<Layout::Node> HTMLLabelElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLLabelElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::Label>(document(), this, move(style));
 }

Libraries/LibWeb/HTML/HTMLLabelElement.h

@@ -17,7 +17,7 @@ class HTMLLabelElement final : public HTMLElement {
 public:
     virtual ~HTMLLabelElement() override;
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
 
     Optional<String> for_() const { return attribute(HTML::AttributeNames::for_); }
 

Libraries/LibWeb/HTML/HTMLLegendElement.cpp

@@ -40,7 +40,7 @@ HTMLFormElement* HTMLLegendElement::form()
     return nullptr;
 }
 
-GC::Ptr<Layout::Node> HTMLLegendElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLLegendElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::LegendBox>(document(), *this, move(style));
 }

Libraries/LibWeb/HTML/HTMLLegendElement.h

@@ -20,7 +20,7 @@ public:
 
     HTMLFormElement* form();
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
     Layout::LegendBox* layout_node();
     Layout::LegendBox const* layout_node() const;
 

Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp

@@ -7,7 +7,7 @@
 
 #include <LibWeb/Bindings/HTMLMarqueeElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/HTML/HTMLMarqueeElement.h>
 #include <LibWeb/HTML/Numbers.h>

Libraries/LibWeb/HTML/HTMLMeterElement.cpp

@@ -178,7 +178,7 @@ void HTMLMeterElement::removed_from(DOM::Node*)
     set_shadow_root(nullptr);
 }
 
-void HTMLMeterElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLMeterElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLMeterElement.h

@@ -37,7 +37,7 @@ public:
     virtual void inserted() override;
     virtual void removed_from(DOM::Node*) override;
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     // https://html.spec.whatwg.org/multipage/forms.html#category-label
     virtual bool is_labelable() const override { return true; }

Libraries/LibWeb/HTML/HTMLObjectElement.cpp

@@ -158,7 +158,7 @@ String HTMLObjectElement::data() const
     return document().encoding_parse_url(*data).to_string();
 }
 
-GC::Ptr<Layout::Node> HTMLObjectElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLObjectElement::create_layout_node(CSS::ComputedProperties style)
 {
     switch (m_representation) {
     case Representation::Children:
@@ -176,7 +176,7 @@ GC::Ptr<Layout::Node> HTMLObjectElement::create_layout_node(CSS::StyleProperties
     return nullptr;
 }
 
-void HTMLObjectElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLObjectElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLObjectElement.h

@@ -56,8 +56,8 @@ private:
 
     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;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     bool has_ancestor_media_element_or_object_element_not_showing_fallback_content() const;
 

Libraries/LibWeb/HTML/HTMLParagraphElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLParagraphElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLParagraphElement.h>
 

Libraries/LibWeb/HTML/HTMLPreElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLPreElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLPreElement.h>
 #include <LibWeb/HTML/Numbers.h>

Libraries/LibWeb/HTML/HTMLProgressElement.cpp

@@ -7,7 +7,7 @@
  */
 
 #include <LibWeb/Bindings/HTMLProgressElementPrototype.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/ElementFactory.h>
@@ -99,7 +99,7 @@ void HTMLProgressElement::removed_from(DOM::Node*)
     set_shadow_root(nullptr);
 }
 
-void HTMLProgressElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLProgressElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLProgressElement.h

@@ -31,7 +31,7 @@ public:
     virtual void inserted() override;
     virtual void removed_from(DOM::Node*) override;
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     // https://html.spec.whatwg.org/multipage/forms.html#category-label
     virtual bool is_labelable() const override { return true; }

Libraries/LibWeb/HTML/HTMLSelectElement.cpp

@@ -64,7 +64,7 @@ void HTMLSelectElement::visit_edges(Cell::Visitor& visitor)
     }
 }
 
-void HTMLSelectElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLSelectElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLSelectElement.h

@@ -27,7 +27,7 @@ class HTMLSelectElement final
 public:
     virtual ~HTMLSelectElement() override;
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     WebIDL::UnsignedLong size() const;
     WebIDL::ExceptionOr<void> set_size(WebIDL::UnsignedLong);

Libraries/LibWeb/HTML/HTMLTableCaptionElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLTableCaptionElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLTableCaptionElement.h>
 

Libraries/LibWeb/HTML/HTMLTableCellElement.cpp

@@ -7,8 +7,8 @@
 
 #include <LibWeb/Bindings/HTMLTableCellElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>

Libraries/LibWeb/HTML/HTMLTableColElement.cpp

@@ -6,7 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLTableColElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/HTML/HTMLTableColElement.h>
 #include <LibWeb/HTML/Numbers.h>
 #include <LibWeb/HTML/Parser/HTMLParser.h>

Libraries/LibWeb/HTML/HTMLTableElement.cpp

@@ -7,8 +7,8 @@
 
 #include <LibWeb/Bindings/HTMLTableElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>

Libraries/LibWeb/HTML/HTMLTableRowElement.cpp

@@ -6,9 +6,9 @@
 
 #include <LibWeb/Bindings/HTMLTableRowElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/Parser/ParsingContext.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>

Libraries/LibWeb/HTML/HTMLTableSectionElement.cpp

@@ -7,7 +7,7 @@
 
 #include <LibWeb/Bindings/HTMLTableSectionElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
 #include <LibWeb/DOM/Document.h>

Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp

@@ -10,7 +10,7 @@
 #include <AK/Utf16View.h>
 #include <LibWeb/Bindings/HTMLTextAreaElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
-#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/DOM/Document.h>
@@ -41,7 +41,7 @@ HTMLTextAreaElement::HTMLTextAreaElement(DOM::Document& document, DOM::Qualified
 
 HTMLTextAreaElement::~HTMLTextAreaElement() = default;
 
-void HTMLTextAreaElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLTextAreaElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLTextAreaElement.h

@@ -28,7 +28,7 @@ class HTMLTextAreaElement final
 public:
     virtual ~HTMLTextAreaElement() override;
 
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     String const& type() const
     {

Libraries/LibWeb/HTML/HTMLVideoElement.cpp

@@ -63,12 +63,12 @@ void HTMLVideoElement::attribute_changed(FlyString const& name, Optional<String>
     }
 }
 
-GC::Ptr<Layout::Node> HTMLVideoElement::create_layout_node(CSS::StyleProperties style)
+GC::Ptr<Layout::Node> HTMLVideoElement::create_layout_node(CSS::ComputedProperties style)
 {
     return heap().allocate<Layout::VideoBox>(document(), *this, move(style));
 }
 
-void HTMLVideoElement::adjust_computed_style(CSS::StyleProperties& style)
+void HTMLVideoElement::adjust_computed_style(CSS::ComputedProperties& style)
 {
     // https://drafts.csswg.org/css-display-3/#unbox
     if (style.display().is_contents())

Libraries/LibWeb/HTML/HTMLVideoElement.h

@@ -60,8 +60,8 @@ private:
     // https://html.spec.whatwg.org/multipage/media.html#the-video-element:dimension-attributes
     virtual bool supports_dimension_attributes() const override { return true; }
 
-    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::StyleProperties) override;
-    virtual void adjust_computed_style(CSS::StyleProperties&) override;
+    virtual GC::Ptr<Layout::Node> create_layout_node(CSS::ComputedProperties) override;
+    virtual void adjust_computed_style(CSS::ComputedProperties&) override;
 
     virtual void on_playing() override;
     virtual void on_paused() override;

Libraries/LibWeb/Layout/AudioBox.cpp

@@ -12,7 +12,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(AudioBox);
 
-AudioBox::AudioBox(DOM::Document& document, DOM::Element& element, CSS::StyleProperties style)
+AudioBox::AudioBox(DOM::Document& document, DOM::Element& element, CSS::ComputedProperties style)
     : ReplacedBox(document, element, move(style))
 {
     set_natural_width(300);

Libraries/LibWeb/Layout/AudioBox.h

@@ -23,7 +23,7 @@ public:
     virtual GC::Ptr<Painting::Paintable> create_paintable() const override;
 
 private:
-    AudioBox(DOM::Document&, DOM::Element&, CSS::StyleProperties);
+    AudioBox(DOM::Document&, DOM::Element&, CSS::ComputedProperties);
 };
 
 }

Libraries/LibWeb/Layout/BlockContainer.cpp

@@ -9,7 +9,7 @@
 
 namespace Web::Layout {
 
-BlockContainer::BlockContainer(DOM::Document& document, DOM::Node* node, CSS::StyleProperties style)
+BlockContainer::BlockContainer(DOM::Document& document, DOM::Node* node, CSS::ComputedProperties style)
     : Box(document, node, move(style))
 {
 }

Libraries/LibWeb/Layout/BlockContainer.h

@@ -16,7 +16,7 @@ class BlockContainer : public Box {
     GC_CELL(BlockContainer, Box);
 
 public:
-    BlockContainer(DOM::Document&, DOM::Node*, CSS::StyleProperties);
+    BlockContainer(DOM::Document&, DOM::Node*, CSS::ComputedProperties);
     BlockContainer(DOM::Document&, DOM::Node*, NonnullOwnPtr<CSS::ComputedValues>);
     virtual ~BlockContainer() override;
 

Libraries/LibWeb/Layout/Box.cpp

@@ -14,7 +14,7 @@
 
 namespace Web::Layout {
 
-Box::Box(DOM::Document& document, DOM::Node* node, CSS::StyleProperties style)
+Box::Box(DOM::Document& document, DOM::Node* node, CSS::ComputedProperties style)
     : NodeWithStyleAndBoxModelMetrics(document, node, move(style))
 {
 }

Libraries/LibWeb/Layout/Box.h

@@ -55,7 +55,7 @@ public:
     virtual void visit_edges(Cell::Visitor&) override;
 
 protected:
-    Box(DOM::Document&, DOM::Node*, CSS::StyleProperties);
+    Box(DOM::Document&, DOM::Node*, CSS::ComputedProperties);
     Box(DOM::Document&, DOM::Node*, NonnullOwnPtr<CSS::ComputedValues>);
 
 private:

Libraries/LibWeb/Layout/BreakNode.cpp

@@ -12,7 +12,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(BreakNode);
 
-BreakNode::BreakNode(DOM::Document& document, HTML::HTMLBRElement& element, CSS::StyleProperties style)
+BreakNode::BreakNode(DOM::Document& document, HTML::HTMLBRElement& element, CSS::ComputedProperties style)
     : Layout::NodeWithStyleAndBoxModelMetrics(document, &element, move(style))
 {
 }

Libraries/LibWeb/Layout/BreakNode.h

@@ -16,7 +16,7 @@ class BreakNode final : public NodeWithStyleAndBoxModelMetrics {
     GC_DECLARE_ALLOCATOR(BreakNode);
 
 public:
-    BreakNode(DOM::Document&, HTML::HTMLBRElement&, CSS::StyleProperties);
+    BreakNode(DOM::Document&, HTML::HTMLBRElement&, CSS::ComputedProperties);
     virtual ~BreakNode() override;
 
     const HTML::HTMLBRElement& dom_node() const { return verify_cast<HTML::HTMLBRElement>(*Node::dom_node()); }

Libraries/LibWeb/Layout/CanvasBox.cpp

@@ -11,7 +11,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(CanvasBox);
 
-CanvasBox::CanvasBox(DOM::Document& document, HTML::HTMLCanvasElement& element, CSS::StyleProperties style)
+CanvasBox::CanvasBox(DOM::Document& document, HTML::HTMLCanvasElement& element, CSS::ComputedProperties style)
     : ReplacedBox(document, element, move(style))
 {
 }

Libraries/LibWeb/Layout/CanvasBox.h

@@ -16,7 +16,7 @@ class CanvasBox final : public ReplacedBox {
     GC_DECLARE_ALLOCATOR(CanvasBox);
 
 public:
-    CanvasBox(DOM::Document&, HTML::HTMLCanvasElement&, CSS::StyleProperties);
+    CanvasBox(DOM::Document&, HTML::HTMLCanvasElement&, CSS::ComputedProperties);
     virtual ~CanvasBox() override;
 
     virtual void prepare_for_replaced_layout() override;

Libraries/LibWeb/Layout/CheckBox.cpp

@@ -13,7 +13,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(CheckBox);
 
-CheckBox::CheckBox(DOM::Document& document, HTML::HTMLInputElement& element, CSS::StyleProperties style)
+CheckBox::CheckBox(DOM::Document& document, HTML::HTMLInputElement& element, CSS::ComputedProperties style)
     : FormAssociatedLabelableNode(document, element, move(style))
 {
     set_natural_width(13);

Libraries/LibWeb/Layout/CheckBox.h

@@ -16,7 +16,7 @@ class CheckBox final : public FormAssociatedLabelableNode {
     GC_DECLARE_ALLOCATOR(CheckBox);
 
 public:
-    CheckBox(DOM::Document&, HTML::HTMLInputElement&, CSS::StyleProperties);
+    CheckBox(DOM::Document&, HTML::HTMLInputElement&, CSS::ComputedProperties);
     virtual ~CheckBox() override;
 
 private:

Libraries/LibWeb/Layout/FieldSetBox.cpp

@@ -14,7 +14,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(FieldSetBox);
 
-FieldSetBox::FieldSetBox(DOM::Document& document, DOM::Element& element, CSS::StyleProperties style)
+FieldSetBox::FieldSetBox(DOM::Document& document, DOM::Element& element, CSS::ComputedProperties style)
     : BlockContainer(document, &element, move(style))
 {
 }

Libraries/LibWeb/Layout/FieldSetBox.h

@@ -16,7 +16,7 @@ class FieldSetBox final : public BlockContainer {
     GC_DECLARE_ALLOCATOR(FieldSetBox);
 
 public:
-    FieldSetBox(DOM::Document&, DOM::Element&, CSS::StyleProperties);
+    FieldSetBox(DOM::Document&, DOM::Element&, CSS::ComputedProperties);
     virtual ~FieldSetBox() override;
 
     DOM::Element& dom_node() { return static_cast<DOM::Element&>(*BlockContainer::dom_node()); }

Libraries/LibWeb/Layout/FormAssociatedLabelableNode.h

@@ -21,7 +21,7 @@ public:
     HTML::FormAssociatedElement& dom_node() { return dynamic_cast<HTML::FormAssociatedElement&>(LabelableNode::dom_node()); }
 
 protected:
-    FormAssociatedLabelableNode(DOM::Document& document, HTML::FormAssociatedElement& element, CSS::StyleProperties style)
+    FormAssociatedLabelableNode(DOM::Document& document, HTML::FormAssociatedElement& element, CSS::ComputedProperties style)
         : LabelableNode(document, element.form_associated_element_to_html_element(), move(style))
     {
     }

Libraries/LibWeb/Layout/ImageBox.cpp

@@ -15,7 +15,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(ImageBox);
 
-ImageBox::ImageBox(DOM::Document& document, DOM::Element& element, CSS::StyleProperties style, ImageProvider const& image_provider)
+ImageBox::ImageBox(DOM::Document& document, DOM::Element& element, CSS::ComputedProperties style, ImageProvider const& image_provider)
     : ReplacedBox(document, element, move(style))
     , m_image_provider(image_provider)
 {

Libraries/LibWeb/Layout/ImageBox.h

@@ -16,7 +16,7 @@ class ImageBox final : public ReplacedBox {
     GC_DECLARE_ALLOCATOR(ImageBox);
 
 public:
-    ImageBox(DOM::Document&, DOM::Element&, CSS::StyleProperties, ImageProvider const&);
+    ImageBox(DOM::Document&, DOM::Element&, CSS::ComputedProperties, ImageProvider const&);
     virtual ~ImageBox() override;
 
     virtual void prepare_for_replaced_layout() override;

Libraries/LibWeb/Layout/InlineNode.cpp

@@ -16,7 +16,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(InlineNode);
 
-InlineNode::InlineNode(DOM::Document& document, DOM::Element* element, CSS::StyleProperties style)
+InlineNode::InlineNode(DOM::Document& document, DOM::Element* element, CSS::ComputedProperties style)
     : Layout::NodeWithStyleAndBoxModelMetrics(document, element, move(style))
 {
 }

Libraries/LibWeb/Layout/InlineNode.h

@@ -15,7 +15,7 @@ class InlineNode final : public NodeWithStyleAndBoxModelMetrics {
     GC_DECLARE_ALLOCATOR(InlineNode);
 
 public:
-    InlineNode(DOM::Document&, DOM::Element*, CSS::StyleProperties);
+    InlineNode(DOM::Document&, DOM::Element*, CSS::ComputedProperties);
     virtual ~InlineNode() override;
 
     GC::Ptr<Painting::PaintableWithLines> create_paintable_for_line_with_index(size_t line_index) const;

Libraries/LibWeb/Layout/Label.cpp

@@ -17,7 +17,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(Label);
 
-Label::Label(DOM::Document& document, HTML::HTMLLabelElement* element, CSS::StyleProperties style)
+Label::Label(DOM::Document& document, HTML::HTMLLabelElement* element, CSS::ComputedProperties style)
     : BlockContainer(document, element, move(style))
 {
 }

Libraries/LibWeb/Layout/Label.h

@@ -16,7 +16,7 @@ class Label final : public BlockContainer {
     GC_DECLARE_ALLOCATOR(Label);
 
 public:
-    Label(DOM::Document&, HTML::HTMLLabelElement*, CSS::StyleProperties);
+    Label(DOM::Document&, HTML::HTMLLabelElement*, CSS::ComputedProperties);
     virtual ~Label() override;
 
     static bool is_inside_associated_label(LabelableNode const&, CSSPixelPoint);

Libraries/LibWeb/Layout/LabelableNode.h

@@ -19,7 +19,7 @@ public:
     Painting::LabelablePaintable const* paintable() const;
 
 protected:
-    LabelableNode(DOM::Document& document, DOM::Element& element, CSS::StyleProperties style)
+    LabelableNode(DOM::Document& document, DOM::Element& element, CSS::ComputedProperties style)
         : ReplacedBox(document, element, move(style))
     {
     }

Libraries/LibWeb/Layout/LegendBox.cpp

@@ -10,7 +10,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(LegendBox);
 
-LegendBox::LegendBox(DOM::Document& document, DOM::Element& element, CSS::StyleProperties style)
+LegendBox::LegendBox(DOM::Document& document, DOM::Element& element, CSS::ComputedProperties style)
     : BlockContainer(document, &element, move(style))
 {
 }

Libraries/LibWeb/Layout/LegendBox.h

@@ -15,7 +15,7 @@ class LegendBox final : public BlockContainer {
     GC_DECLARE_ALLOCATOR(LegendBox);
 
 public:
-    LegendBox(DOM::Document&, DOM::Element&, CSS::StyleProperties);
+    LegendBox(DOM::Document&, DOM::Element&, CSS::ComputedProperties);
     virtual ~LegendBox() override;
 
     DOM::Element& dom_node() { return static_cast<DOM::Element&>(*Box::dom_node()); }

Libraries/LibWeb/Layout/ListItemBox.cpp

@@ -12,7 +12,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(ListItemBox);
 
-ListItemBox::ListItemBox(DOM::Document& document, DOM::Element* element, CSS::StyleProperties style)
+ListItemBox::ListItemBox(DOM::Document& document, DOM::Element* element, CSS::ComputedProperties style)
     : Layout::BlockContainer(document, element, move(style))
 {
 }

Libraries/LibWeb/Layout/ListItemBox.h

@@ -16,7 +16,7 @@ class ListItemBox final : public BlockContainer {
     GC_DECLARE_ALLOCATOR(ListItemBox);
 
 public:
-    ListItemBox(DOM::Document&, DOM::Element*, CSS::StyleProperties);
+    ListItemBox(DOM::Document&, DOM::Element*, CSS::ComputedProperties);
     virtual ~ListItemBox() override;
 
     DOM::Element& dom_node() { return static_cast<DOM::Element&>(*BlockContainer::dom_node()); }

Libraries/LibWeb/Layout/ListItemMarkerBox.cpp

@@ -12,7 +12,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(ListItemMarkerBox);
 
-ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, CSS::ListStylePosition style_position, size_t index, CSS::StyleProperties style)
+ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, CSS::ListStylePosition style_position, size_t index, CSS::ComputedProperties style)
     : Box(document, nullptr, move(style))
     , m_list_style_type(style_type)
     , m_list_style_position(style_position)

Libraries/LibWeb/Layout/ListItemMarkerBox.h

@@ -16,7 +16,7 @@ class ListItemMarkerBox final : public Box {
     GC_DECLARE_ALLOCATOR(ListItemMarkerBox);
 
 public:
-    explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, CSS::ListStylePosition, size_t index, CSS::StyleProperties);
+    explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, CSS::ListStylePosition, size_t index, CSS::ComputedProperties);
     virtual ~ListItemMarkerBox() override;
 
     Optional<ByteString> const& text() const { return m_text; }

Libraries/LibWeb/Layout/NavigableContainerViewport.cpp

@@ -16,7 +16,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(NavigableContainerViewport);
 
-NavigableContainerViewport::NavigableContainerViewport(DOM::Document& document, HTML::NavigableContainer& element, CSS::StyleProperties style)
+NavigableContainerViewport::NavigableContainerViewport(DOM::Document& document, HTML::NavigableContainer& element, CSS::ComputedProperties style)
     : ReplacedBox(document, element, move(style))
 {
 }

Libraries/LibWeb/Layout/NavigableContainerViewport.h

@@ -16,7 +16,7 @@ class NavigableContainerViewport final : public ReplacedBox {
     GC_DECLARE_ALLOCATOR(NavigableContainerViewport);
 
 public:
-    NavigableContainerViewport(DOM::Document&, HTML::NavigableContainer&, CSS::StyleProperties);
+    NavigableContainerViewport(DOM::Document&, HTML::NavigableContainer&, CSS::ComputedProperties);
     virtual ~NavigableContainerViewport() override;
 
     virtual void prepare_for_replaced_layout() override;

Libraries/LibWeb/Layout/Node.cpp

@@ -276,7 +276,7 @@ bool Node::is_sticky_position() const
     return position == CSS::Positioning::Sticky;
 }
 
-NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::StyleProperties computed_style)
+NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::ComputedProperties computed_style)
     : Node(document, node)
     , m_computed_values(make<CSS::ComputedValues>())
 {
@@ -324,7 +324,7 @@ static CSSPixels snap_a_length_as_a_border_width(double device_pixels_per_css_pi
     return length;
 }
 
-void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
+void NodeWithStyle::apply_style(const CSS::ComputedProperties& computed_style)
 {
     auto& computed_values = mutable_computed_values();
 

Libraries/LibWeb/Layout/Node.h

@@ -9,9 +9,9 @@
 #include <AK/NonnullRefPtr.h>
 #include <AK/Vector.h>
 #include <LibJS/Heap/Cell.h>
+#include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/ComputedValues.h>
 #include <LibWeb/CSS/StyleComputer.h>
-#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/Forward.h>
@@ -222,7 +222,7 @@ public:
     CSS::ImmutableComputedValues const& computed_values() const { return static_cast<CSS::ImmutableComputedValues const&>(*m_computed_values); }
     CSS::MutableComputedValues& mutable_computed_values() { return static_cast<CSS::MutableComputedValues&>(*m_computed_values); }
 
-    void apply_style(const CSS::StyleProperties&);
+    void apply_style(const CSS::ComputedProperties&);
 
     Gfx::Font const& first_available_font() const;
     Vector<CSS::BackgroundLayerData> const& background_layers() const { return computed_values().background_layers(); }
@@ -238,7 +238,7 @@ public:
     virtual void visit_edges(Cell::Visitor& visitor) override;
 
 protected:
-    NodeWithStyle(DOM::Document&, DOM::Node*, CSS::StyleProperties);
+    NodeWithStyle(DOM::Document&, DOM::Node*, CSS::ComputedProperties);
     NodeWithStyle(DOM::Document&, DOM::Node*, NonnullOwnPtr<CSS::ComputedValues>);
 
 private:
@@ -257,7 +257,7 @@ public:
     BoxModelMetrics const& box_model() const { return m_box_model; }
 
 protected:
-    NodeWithStyleAndBoxModelMetrics(DOM::Document& document, DOM::Node* node, CSS::StyleProperties style)
+    NodeWithStyleAndBoxModelMetrics(DOM::Document& document, DOM::Node* node, CSS::ComputedProperties style)
         : NodeWithStyle(document, node, move(style))
     {
     }

Libraries/LibWeb/Layout/RadioButton.cpp

@@ -14,7 +14,7 @@ namespace Web::Layout {
 
 GC_DEFINE_ALLOCATOR(RadioButton);
 
-RadioButton::RadioButton(DOM::Document& document, HTML::HTMLInputElement& element, CSS::StyleProperties style)
+RadioButton::RadioButton(DOM::Document& document, HTML::HTMLInputElement& element, CSS::ComputedProperties style)
     : FormAssociatedLabelableNode(document, element, move(style))
 {
     set_natural_width(12);