LibWeb: Move width into LayoutStyle

This patch also adds the ability for Length to contain percentage
values. This is a little off-spec, but will make storing and dealing
with lengths a lot easier.

To resolve a Length to a px-or-auto Length, there are now helpers
for that. After calling them, you no longer have to think about
em, rem, %, and such things.

Libraries/LibWeb/CSS/Length.cpp

@@ -53,6 +53,8 @@ const char* Length::unit_name() const
         return "rem";
     case Type::Auto:
         return "auto";
+    case Type::Percentage:
+        return "percentage";
     case Type::Undefined:
         return "undefined";
     }

Libraries/LibWeb/CSS/Length.h

@@ -35,6 +35,7 @@ class Length {
 public:
     enum class Type {
         Undefined,
+        Percentage,
         Auto,
         Px,
         Em,
@@ -56,7 +57,24 @@ public:
     static Length make_auto() { return Length(0, Type::Auto); }
     static Length make_px(float value) { return Length(value, Type::Px); }
 
+    Length resolved(const Length& fallback_for_undefined, const LayoutNode& layout_node, float reference_for_percent) const
+    {
+        if (is_undefined())
+            return fallback_for_undefined;
+        if (is_percentage())
+            return make_px(raw_value() / 100.0 * reference_for_percent);
+        if (is_relative())
+            return make_px(to_px(layout_node));
+        return *this;
+    }
+
+    Length resolved_or_auto(const LayoutNode& layout_node, float reference_for_percent) const
+    {
+        return resolved(make_auto(), 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; }
     bool is_absolute() const { return m_type == Type::Px; }
     bool is_relative() const { return m_type == Type::Em || m_type == Type::Rem; }
@@ -72,6 +90,7 @@ public:
         case Type::Px:
             return m_value;
         case Type::Undefined:
+        case Type::Percentage:
         default:
             ASSERT_NOT_REACHED();
         }

Libraries/LibWeb/Layout/LayoutBlock.cpp

@@ -69,20 +69,20 @@ void LayoutBlock::layout_absolutely_positioned_descendant(LayoutBox& box)
 {
     box.layout(LayoutMode::Default);
     auto& box_model = box.box_model();
-    auto& style = box.specified_style();
+    auto& specified_style = box.specified_style();
     auto zero_value = Length::make_px(0);
 
-    auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, Length::make_auto(), width());
+    auto specified_width = box.style().width().resolved_or_auto(box, width());
 
-    box_model.margin.top = style.length_or_fallback(CSS::PropertyID::MarginTop, Length::make_auto(), height());
+    box_model.margin.top = specified_style.length_or_fallback(CSS::PropertyID::MarginTop, Length::make_auto(), height());
-    box_model.margin.right = style.length_or_fallback(CSS::PropertyID::MarginRight, Length::make_auto(), width());
+    box_model.margin.right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, Length::make_auto(), width());
-    box_model.margin.bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, Length::make_auto(), height());
+    box_model.margin.bottom = specified_style.length_or_fallback(CSS::PropertyID::MarginBottom, Length::make_auto(), height());
-    box_model.margin.left = style.length_or_fallback(CSS::PropertyID::MarginLeft, Length::make_auto(), width());
+    box_model.margin.left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, Length::make_auto(), width());
 
-    box_model.offset.top = style.length_or_fallback(CSS::PropertyID::Top, Length::make_auto(), height());
+    box_model.offset.top = specified_style.length_or_fallback(CSS::PropertyID::Top, Length::make_auto(), height());
-    box_model.offset.right = style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), width());
+    box_model.offset.right = specified_style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), width());
-    box_model.offset.bottom = style.length_or_fallback(CSS::PropertyID::Bottom, Length::make_auto(), height());
+    box_model.offset.bottom = specified_style.length_or_fallback(CSS::PropertyID::Bottom, Length::make_auto(), height());
-    box_model.offset.left = style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), width());
+    box_model.offset.left = specified_style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), width());
 
     if (box_model.offset.left.is_auto() && specified_width.is_auto() && box_model.offset.right.is_auto()) {
         if (box_model.margin.left.is_auto())
@@ -164,8 +164,7 @@ void LayoutBlock::layout_contained_boxes(LayoutMode layout_mode)
     });
 
     if (layout_mode != LayoutMode::Default) {
-        auto specified_width = specified_style().length_or_fallback(CSS::PropertyID::Width, Length::make_auto(), containing_block()->width());
+        if (style().width().is_undefined() || style().width().is_auto())
-        if (specified_width.is_auto())
             set_width(content_width);
     }
 
@@ -277,7 +276,7 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
 
 void LayoutBlock::compute_width_for_absolutely_positioned_block()
 {
-    auto& style = this->specified_style();
+    auto& specified_style = this->specified_style();
     auto& containing_block = *this->containing_block();
     auto zero_value = Length::make_px(0);
 
@@ -289,15 +288,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 = style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
+        margin_left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
-        margin_right = style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
+        margin_right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
-        border_left = style.length_or_fallback(CSS::PropertyID::BorderLeftWidth, zero_value);
+        border_left = specified_style.length_or_fallback(CSS::PropertyID::BorderLeftWidth, zero_value);
-        border_right = style.length_or_fallback(CSS::PropertyID::BorderRightWidth, zero_value);
+        border_right = specified_style.length_or_fallback(CSS::PropertyID::BorderRightWidth, zero_value);
-        padding_left = style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value, containing_block.width());
+        padding_left = specified_style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value, containing_block.width());
-        padding_right = style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value, containing_block.width());
+        padding_right = specified_style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value, containing_block.width());
 
-        auto left = style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), containing_block.width());
+        auto left = specified_style.length_or_fallback(CSS::PropertyID::Left, Length::make_auto(), containing_block.width());
-        auto right = style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), containing_block.width());
+        auto right = specified_style.length_or_fallback(CSS::PropertyID::Right, Length::make_auto(), containing_block.width());
         auto width = a_width;
 
         auto solve_for_left = [&] {
@@ -386,14 +385,14 @@ void LayoutBlock::compute_width_for_absolutely_positioned_block()
         return width;
     };
 
-    auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, Length::make_auto(), containing_block.width());
+    auto specified_width = style().width().resolved_or_auto(*this, containing_block.width());
 
     // 1. The tentative used width is calculated (without 'min-width' and 'max-width')
     auto used_width = try_compute_width(specified_width);
 
     // 2. The tentative used width is greater than 'max-width', the rules above are applied again,
     //    but this time using the computed value of 'max-width' as the computed value for 'width'.
-    auto specified_max_width = style.length_or_fallback(CSS::PropertyID::MaxWidth, Length::make_auto(), containing_block.width());
+    auto specified_max_width = specified_style.length_or_fallback(CSS::PropertyID::MaxWidth, Length::make_auto(), containing_block.width());
     if (!specified_max_width.is_auto()) {
         if (used_width.to_px(*this) > specified_max_width.to_px(*this)) {
             used_width = try_compute_width(specified_max_width);
@@ -402,7 +401,7 @@ void LayoutBlock::compute_width_for_absolutely_positioned_block()
 
     // 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
     //    but this time using the value of 'min-width' as the computed value for 'width'.
-    auto specified_min_width = style.length_or_fallback(CSS::PropertyID::MinWidth, Length::make_auto(), containing_block.width());
+    auto specified_min_width = specified_style.length_or_fallback(CSS::PropertyID::MinWidth, Length::make_auto(), containing_block.width());
     if (!specified_min_width.is_auto()) {
         if (used_width.to_px(*this) < specified_min_width.to_px(*this)) {
             used_width = try_compute_width(specified_min_width);

Libraries/LibWeb/Layout/LayoutNode.cpp

@@ -226,6 +226,7 @@ void LayoutNodeWithStyle::apply_style(const StyleProperties& specified_style)
     style.set_position(specified_style.position());
     style.set_text_align(specified_style.text_align());
     style.set_z_index(specified_style.z_index());
+    style.set_width(specified_style.length_or_fallback(CSS::PropertyID::Width, {}));
 }
 
 }

Libraries/LibWeb/Layout/LayoutReplaced.cpp

@@ -45,13 +45,13 @@ float LayoutReplaced::calculate_width() const
 {
     // 10.3.2 [Inline,] replaced elements
 
-    auto& style = this->specified_style();
+    auto& specified_style = this->specified_style();
     auto auto_value = Length::make_auto();
     auto zero_value = Length::make_px(0);
     auto& containing_block = *this->containing_block();
 
-    auto margin_left = style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
+    auto margin_left = specified_style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
-    auto margin_right = style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
+    auto margin_right = specified_style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, 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())
@@ -59,8 +59,8 @@ float LayoutReplaced::calculate_width() const
     if (margin_right.is_auto())
         margin_right = zero_value;
 
-    auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, auto_value, containing_block.width());
+    auto specified_width = style().width().resolved_or_auto(*this, containing_block.width());
-    auto specified_height = style.length_or_fallback(CSS::PropertyID::Height, auto_value, containing_block.height());
+    auto specified_height = specified_style.length_or_fallback(CSS::PropertyID::Height, auto_value, containing_block.height());
 
     // FIXME: Actually compute 'width'
     auto computed_width = specified_width;

Libraries/LibWeb/Layout/LayoutStyle.h

@@ -36,11 +36,13 @@ public:
     Optional<int> z_index() const { return m_z_index; }
     CSS::TextAlign text_align() const { return m_text_align; }
     CSS::Position position() const { return m_position; }
+    const Length& width() const { return m_width; }
 
 protected:
     Optional<int> m_z_index;
     CSS::TextAlign m_text_align;
     CSS::Position m_position;
+    Length m_width;
 };
 
 class ImmutableLayoutStyle final : public LayoutStyle {
@@ -51,6 +53,7 @@ public:
     void set_z_index(Optional<int> value) { m_z_index = value; }
     void set_text_align(CSS::TextAlign text_align) { m_text_align = text_align; }
     void set_position(CSS::Position position) { m_position = position; }
+    void set_width(const Length& width) { m_width = width; }
 };
 
 }