LibWeb: Move the offset, margin and padding boxes into LayoutStyle

Libraries/LibWeb/CSS/Length.h

@@ -73,6 +73,11 @@ public:
         return resolved(make_auto(), layout_node, reference_for_percent);
     }
 
+    Length resolved_or_zero(const LayoutNode& layout_node, float reference_for_percent) const
+    {
+        return resolved(make_px(0), layout_node, reference_for_percent);
+    }
+
     bool is_undefined() const { return m_type == Type::Undefined; }
     bool is_percentage() const { return m_type == Type::Percentage; }
     bool is_auto() const { return m_type == Type::Auto; }

Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -76,14 +76,14 @@ Length StyleProperties::length_or_fallback(CSS::PropertyID id, const Length& fal
     return value.value()->to_length();
 }
 
-Length StyleProperties::length_or_fallback(CSS::PropertyID id, const Length& fallback, float reference_for_percentages) const
+LengthBox StyleProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id) const
 {
-    auto value = property(id);
-    if (!value.has_value())
-        return fallback;
-    if (value.value()->is_percentage())
-        return static_cast<const PercentageStyleValue&>(*value.value()).to_length(reference_for_percentages);
-    return value.value()->to_length();
+    LengthBox box;
+    box.left = length_or_fallback(left_id, {});
+    box.top = length_or_fallback(top_id, {});
+    box.right = length_or_fallback(right_id, {});
+    box.bottom = length_or_fallback(bottom_id, {});
+    return box;
 }
 
 String StyleProperties::string_or_fallback(CSS::PropertyID id, const StringView& fallback) const

Libraries/LibWeb/CSS/StyleProperties.h

@@ -30,6 +30,7 @@
 #include <AK/NonnullRefPtr.h>
 #include <LibGfx/Font.h>
 #include <LibGfx/Forward.h>
+#include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web {
@@ -56,7 +57,7 @@ public:
     Optional<NonnullRefPtr<StyleValue>> property(CSS::PropertyID) const;
 
     Length length_or_fallback(CSS::PropertyID, const Length& fallback) const;
-    Length length_or_fallback(CSS::PropertyID, const Length& fallback, float reference_for_percentages) const;
+    LengthBox length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id) const;
     String string_or_fallback(CSS::PropertyID, const StringView& fallback) const;
     Color color_or_fallback(CSS::PropertyID, const Document&, Color fallback) const;
     CSS::TextAlign text_align() const;

Libraries/LibWeb/CSS/StyleValue.h

@@ -155,7 +155,6 @@ public:
         Initial,
         String,
         Length,
-        Percentage,
         Color,
         Identifier,
         Image,
@@ -171,7 +170,6 @@ public:
     bool is_image() const { return type() == Type::Image; }
     bool is_string() const { return type() == Type::String; }
     bool is_length() const { return type() == Type::Length; }
-    bool is_percentage() const { return type() == Type::Percentage; }
     bool is_position() const { return type() == Type::Position; }
 
     virtual String to_string() const = 0;
@@ -232,31 +230,6 @@ private:
     Length m_length;
 };
 
-class PercentageStyleValue : public StyleValue {
-public:
-    static NonnullRefPtr<PercentageStyleValue> create(float percentage)
-    {
-        return adopt(*new PercentageStyleValue(percentage));
-    }
-    virtual ~PercentageStyleValue() override { }
-
-    virtual String to_string() const override { return String::format("%g%%", m_percentage); }
-
-    Length to_length(float reference) const { return Length((m_percentage / 100.0f) * reference, Length::Type::Px); }
-
-private:
-    virtual Length to_length() const override { return Length::make_auto(); }
-    virtual bool is_auto() const override { return false; }
-
-    explicit PercentageStyleValue(float percentage)
-        : StyleValue(Type::Percentage)
-        , m_percentage(percentage)
-    {
-    }
-
-    float m_percentage { 0 };
-};
-
 class InitialStyleValue final : public StyleValue {
 public:
     static NonnullRefPtr<InitialStyleValue> create() { return adopt(*new InitialStyleValue); }

Libraries/LibWeb/Layout/LayoutBlock.cpp

@@ -69,20 +69,19 @@ void LayoutBlock::layout_absolutely_positioned_descendant(LayoutBox& box)
 {
     box.layout(LayoutMode::Default);
     auto& box_model = box.box_model();
-    auto& specified_style = box.specified_style();
     auto zero_value = Length::make_px(0);
 
     auto specified_width = box.style().width().resolved_or_auto(box, width());
 
-    box_model.margin.top = specified_style.length_or_fallback(CSS::PropertyID::MarginTop, Length::make_auto(), height());
-    box_model.margin.right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, Length::make_auto(), width());
-    box_model.margin.bottom = specified_style.length_or_fallback(CSS::PropertyID::MarginBottom, Length::make_auto(), height());
-    box_model.margin.left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, Length::make_auto(), width());
+    box_model.margin.left = box.style().margin().left.resolved_or_auto(box, width());
+    box_model.margin.top = box.style().margin().top.resolved_or_auto(box, height());
+    box_model.margin.right = box.style().margin().right.resolved_or_auto(box, width());
+    box_model.margin.bottom = box.style().margin().bottom.resolved_or_auto(box, height());
 
-    box_model.offset.top = specified_style.length_or_fallback(CSS::PropertyID::Top, Length::make_auto(), height());
-    box_model.offset.right = specified_style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), width());
-    box_model.offset.bottom = specified_style.length_or_fallback(CSS::PropertyID::Bottom, Length::make_auto(), height());
-    box_model.offset.left = specified_style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), width());
+    box_model.offset.left = box.style().offset().left.resolved_or_auto(box, width());
+    box_model.offset.top = box.style().offset().top.resolved_or_auto(box, height());
+    box_model.offset.right = box.style().offset().right.resolved_or_auto(box, width());
+    box_model.offset.bottom = box.style().offset().bottom.resolved_or_auto(box, height());
 
     if (box_model.offset.left.is_auto() && specified_width.is_auto() && box_model.offset.right.is_auto()) {
         if (box_model.margin.left.is_auto())
@@ -288,15 +287,15 @@ void LayoutBlock::compute_width_for_absolutely_positioned_block()
     Length padding_right = Length::make_auto();
 
     auto try_compute_width = [&](const auto& a_width) {
-        margin_left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
-        margin_right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
+        margin_left = style().margin().left.resolved(zero_value, *this, containing_block.width());
+        margin_right = style().margin().right.resolved(zero_value, *this, containing_block.width());
         border_left = specified_style.length_or_fallback(CSS::PropertyID::BorderLeftWidth, zero_value);
         border_right = specified_style.length_or_fallback(CSS::PropertyID::BorderRightWidth, zero_value);
-        padding_left = specified_style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value, containing_block.width());
-        padding_right = specified_style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value, containing_block.width());
+        padding_left = style().padding().left.resolved(zero_value, *this, containing_block.width());
+        padding_right = style().padding().right.resolved(zero_value, *this, containing_block.width());
 
-        auto left = specified_style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), containing_block.width());
-        auto right = specified_style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), containing_block.width());
+        auto left = style().offset().left.resolved_or_auto(*this, containing_block.width());
+        auto right = style().offset().right.resolved_or_auto(*this, containing_block.width());
         auto width = a_width;
 
         auto solve_for_left = [&] {
@@ -437,16 +436,12 @@ void LayoutBlock::compute_width()
 
     auto try_compute_width = [&](const auto& a_width) {
         Length width = a_width;
-#ifdef HTML_DEBUG
-        dbg() << " Left: " << margin_left << "+" << border_left << "+" << padding_left;
-        dbg() << "Right: " << margin_right << "+" << border_right << "+" << padding_right;
-#endif
-        margin_left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
-        margin_right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
+        margin_left = style().margin().left.resolved_or_zero(*this, containing_block.width());
+        margin_right = style().margin().right.resolved_or_zero(*this, containing_block.width());
         border_left = specified_style.length_or_fallback(CSS::PropertyID::BorderLeftWidth, zero_value);
         border_right = specified_style.length_or_fallback(CSS::PropertyID::BorderRightWidth, zero_value);
-        padding_left = specified_style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value, containing_block.width());
-        padding_right = specified_style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value, containing_block.width());
+        padding_left = style().padding().left.resolved_or_zero(*this, containing_block.width());
+        padding_right = style().padding().right.resolved_or_zero(*this, containing_block.width());
 
         float total_px = 0;
         for (auto& value : { margin_left, border_left, padding_left, width, padding_right, border_right, margin_right }) {
@@ -559,17 +554,16 @@ void LayoutBlock::compute_width()
 void LayoutBlock::place_block_level_replaced_element_in_normal_flow(LayoutReplaced& box)
 {
     ASSERT(!is_absolutely_positioned());
-    auto& style = box.specified_style();
-    auto zero_value = Length::make_px(0);
+    auto& specified_style = box.specified_style();
     auto& containing_block = *this;
     auto& replaced_element_box_model = box.box_model();
 
-    replaced_element_box_model.margin.top = style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value, containing_block.width());
-    replaced_element_box_model.margin.bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value, containing_block.width());
-    replaced_element_box_model.border.top = style.length_or_fallback(CSS::PropertyID::BorderTopWidth, zero_value);
-    replaced_element_box_model.border.bottom = style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, zero_value);
-    replaced_element_box_model.padding.top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value, containing_block.width());
-    replaced_element_box_model.padding.bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value, containing_block.width());
+    replaced_element_box_model.margin.top = style().margin().top.resolved_or_zero(*this, containing_block.width());
+    replaced_element_box_model.margin.bottom = style().margin().bottom.resolved_or_zero(*this, containing_block.width());
+    replaced_element_box_model.border.top = specified_style.length_or_fallback(CSS::PropertyID::BorderTopWidth, Length::make_px(0));
+    replaced_element_box_model.border.bottom = specified_style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, Length::make_px(0));
+    replaced_element_box_model.padding.top = style().padding().top.resolved_or_zero(*this, containing_block.width());
+    replaced_element_box_model.padding.bottom = style().padding().bottom.resolved_or_zero(*this, containing_block.width());
 
     float x = replaced_element_box_model.margin.left.to_px(*this)
         + replaced_element_box_model.border.left.to_px(*this)
@@ -618,13 +612,14 @@ void LayoutBlock::place_block_level_non_replaced_element_in_normal_flow(LayoutBl
     auto zero_value = Length::make_px(0);
     auto& containing_block = *this;
     auto& box = block.box_model();
+    auto& style = block.style();
 
-    box.margin.top = specified_style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value, containing_block.width());
-    box.margin.bottom = specified_style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value, containing_block.width());
+    box.margin.top = style.margin().top.resolved(zero_value, *this, containing_block.width());
+    box.margin.bottom = style.margin().bottom.resolved(zero_value, *this, containing_block.width());
     box.border.top = specified_style.length_or_fallback(CSS::PropertyID::BorderTopWidth, zero_value);
     box.border.bottom = specified_style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, zero_value);
-    box.padding.top = specified_style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value, containing_block.width());
-    box.padding.bottom = specified_style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value, containing_block.width());
+    box.padding.top = style.padding().top.resolved(zero_value, *this, containing_block.width());
+    box.padding.bottom = style.padding().bottom.resolved(zero_value, *this, containing_block.width());
 
     float x = box.margin.left.to_px(*this)
         + box.border.left.to_px(*this)
@@ -676,13 +671,12 @@ void LayoutBlock::compute_height()
     auto specified_height = style().height().resolved_or_auto(*this, containing_block.height());
     auto specified_max_height = style().max_height().resolved_or_auto(*this, containing_block.height());
 
-
-    box_model().margin.top = specified_style.length_or_fallback(CSS::PropertyID::MarginTop, Length::make_px(0), containing_block.width());
-    box_model().margin.bottom = specified_style.length_or_fallback(CSS::PropertyID::MarginBottom, Length::make_px(0), containing_block.width());
+    box_model().margin.top = style().margin().top.resolved_or_zero(*this, containing_block.width());
+    box_model().margin.bottom = style().margin().bottom.resolved_or_zero(*this, containing_block.width());
     box_model().border.top = specified_style.length_or_fallback(CSS::PropertyID::BorderTopWidth, Length::make_px(0));
     box_model().border.bottom = specified_style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, Length::make_px(0));
-    box_model().padding.top = specified_style.length_or_fallback(CSS::PropertyID::PaddingTop, Length::make_px(0), containing_block.width());
-    box_model().padding.bottom = specified_style.length_or_fallback(CSS::PropertyID::PaddingBottom, Length::make_px(0), containing_block.width());
+    box_model().padding.top = style().padding().top.resolved_or_zero(*this, containing_block.width());
+    box_model().padding.bottom = style().padding().bottom.resolved_or_zero(*this, containing_block.width());
 
     if (!specified_height.is_auto()) {
         float used_height = specified_height.to_px(*this);

Libraries/LibWeb/Layout/LayoutNode.cpp

@@ -237,6 +237,10 @@ void LayoutNodeWithStyle::apply_style(const StyleProperties& specified_style)
     style.set_height(specified_style.length_or_fallback(CSS::PropertyID::Height, {}));
     style.set_min_height(specified_style.length_or_fallback(CSS::PropertyID::MinHeight, {}));
     style.set_max_height(specified_style.length_or_fallback(CSS::PropertyID::MaxHeight, {}));
+
+    style.set_offset(specified_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom));
+    style.set_margin(specified_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom));
+    style.set_padding(specified_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom));
 }
 
 }

Libraries/LibWeb/Layout/LayoutReplaced.cpp

@@ -45,12 +45,11 @@ float LayoutReplaced::calculate_width() const
 {
     // 10.3.2 [Inline,] replaced elements
 
-    auto& specified_style = this->specified_style();
     auto zero_value = Length::make_px(0);
     auto& containing_block = *this->containing_block();
 
-    auto margin_left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
-    auto margin_right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
+    auto margin_left = style().margin().left.resolved_or_zero(*this, containing_block.width());
+    auto margin_right = style().margin().right.resolved_or_zero(*this, containing_block.width());
 
     // A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
     if (margin_left.is_auto())

Libraries/LibWeb/Layout/LayoutStyle.h

@@ -27,6 +27,7 @@
 #pragma once
 
 #include <AK/Optional.h>
+#include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web {
@@ -49,6 +50,10 @@ public:
     const Length& min_height() const { return m_min_height; }
     const Length& max_height() const { return m_max_height; }
 
+    const LengthBox& offset() const { return m_offset; }
+    const LengthBox& margin() const { return m_margin; }
+    const LengthBox& padding() const { return m_padding; }
+
 protected:
     Optional<int> m_z_index;
     CSS::TextAlign m_text_align;
@@ -60,6 +65,9 @@ protected:
     Length m_height;
     Length m_min_height;
     Length m_max_height;
+    LengthBox m_offset;
+    LengthBox m_margin;
+    LengthBox m_padding;
 };
 
 class ImmutableLayoutStyle final : public LayoutStyle {
@@ -77,6 +85,9 @@ public:
     void set_height(const Length& height) { m_height = height; }
     void set_min_height(const Length& height) { m_min_height = height; }
     void set_max_height(const Length& height) { m_max_height = height; }
+    void set_offset(const LengthBox& offset) { m_offset = offset; }
+    void set_margin(const LengthBox& margin) { m_margin = margin; }
+    void set_padding(const LengthBox& padding) { m_padding = padding; }
 };
 
 }

Libraries/LibWeb/Parser/CSSParser.cpp

@@ -266,7 +266,7 @@ NonnullRefPtr<StyleValue> parse_css_value(const StringView& string)
     auto number = parse_number(string);
     if (number.has_value()) {
         if (string.ends_with('%'))
-            return PercentageStyleValue::create(number.value());
+            return LengthStyleValue::create(Length(number.value(), Length::Type::Percentage));
         if (string.ends_with("em"))
             return LengthStyleValue::create(Length(number.value(), Length::Type::Em));
         if (string.ends_with("rem"))