From 70eca3b500b9ebc96022643e06ecef91fd036934 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 18 Aug 2019 08:09:56 +0200 Subject: [PATCH] LibHTML: Finish the block width calculation Also add horizontal box values to the layout tree dump. --- Libraries/LibHTML/CSS/Length.h | 5 ++ Libraries/LibHTML/CSS/StyleValue.h | 4 ++ Libraries/LibHTML/Dump.cpp | 12 ++++ Libraries/LibHTML/Layout/LayoutBlock.cpp | 72 +++++++++++++++++++----- 4 files changed, 78 insertions(+), 15 deletions(-) diff --git a/Libraries/LibHTML/CSS/Length.h b/Libraries/LibHTML/CSS/Length.h index c0dcefb628..a353ffee0e 100644 --- a/Libraries/LibHTML/CSS/Length.h +++ b/Libraries/LibHTML/CSS/Length.h @@ -40,3 +40,8 @@ private: Type m_type { Type::Auto }; int m_value { 0 }; }; + +inline const LogStream& operator<<(const LogStream& stream, const Length& value) +{ + return stream << value.to_string(); +} diff --git a/Libraries/LibHTML/CSS/StyleValue.h b/Libraries/LibHTML/CSS/StyleValue.h index dd42aa7a19..11ff210a6a 100644 --- a/Libraries/LibHTML/CSS/StyleValue.h +++ b/Libraries/LibHTML/CSS/StyleValue.h @@ -26,6 +26,8 @@ public: virtual String to_string() const = 0; virtual Length to_length() const { return {}; } + virtual bool is_auto() const { return false; } + protected: explicit StyleValue(Type); @@ -66,6 +68,8 @@ public: const Length& length() const { return m_length; } + virtual bool is_auto() const override { return m_length.is_auto(); } + private: explicit LengthStyleValue(const Length& length) : StyleValue(Type::Length) diff --git a/Libraries/LibHTML/Dump.cpp b/Libraries/LibHTML/Dump.cpp index 477b8aa55a..834d360761 100644 --- a/Libraries/LibHTML/Dump.cpp +++ b/Libraries/LibHTML/Dump.cpp @@ -58,8 +58,20 @@ void dump_tree(const LayoutNode& layout_node) layout_node.rect().y(), layout_node.rect().width(), layout_node.rect().height()); + + // Dump the horizontal box properties + printf(" [%d+%d+%d %d %d+%d+%d]", + layout_node.style().margin().left.to_px(), + layout_node.style().border().left.to_px(), + layout_node.style().padding().left.to_px(), + layout_node.rect().width(), + layout_node.style().margin().right.to_px(), + layout_node.style().border().right.to_px(), + layout_node.style().padding().right.to_px()); + if (layout_node.is_text()) printf(" \"%s\"", static_cast(layout_node).text().characters()); + printf("\n"); ++indent; layout_node.for_each_child([](auto& child) { diff --git a/Libraries/LibHTML/Layout/LayoutBlock.cpp b/Libraries/LibHTML/Layout/LayoutBlock.cpp index 5705fafd03..894a8aeb6b 100644 --- a/Libraries/LibHTML/Layout/LayoutBlock.cpp +++ b/Libraries/LibHTML/Layout/LayoutBlock.cpp @@ -35,37 +35,79 @@ void LayoutBlock::compute_width() return; } - auto auto_value= LengthStyleValue::create({}); auto& styled_node = *this->styled_node(); - auto width = styled_node.property("width").value_or(auto_value); + auto auto_value = Length(); + auto zero_value = Length(0, Length::Type::Absolute); - auto zero_value = LengthStyleValue::create(Length(0, Length::Type::Absolute)); + auto length_or_fallback = [&](const StringView& property_name, const Length& fallback) { + auto value = styled_node.property(property_name); + if (!value.has_value()) + return fallback; + return value.value()->to_length(); + }; - auto margin_left = styled_node.property("margin-left").value_or(zero_value); - auto margin_right = styled_node.property("margin-right").value_or(zero_value); - auto border_left = styled_node.property("border-left").value_or(zero_value); - auto border_right = styled_node.property("border-right").value_or(zero_value); - auto padding_left = styled_node.property("padding-left").value_or(zero_value); - auto padding_right = styled_node.property("padding-right").value_or(zero_value); + auto width = length_or_fallback("width", auto_value); + auto margin_left = length_or_fallback("margin-left", zero_value); + auto margin_right = length_or_fallback("margin-right", zero_value); + auto border_left = length_or_fallback("border-left", zero_value); + auto border_right = length_or_fallback("border-right", zero_value); + auto padding_left = length_or_fallback("padding-left", zero_value); + auto padding_right = length_or_fallback("padding-right", zero_value); - dbg() << " Left: " << margin_left->to_string() << "+" << border_left->to_string() << "+" << padding_left->to_string(); - dbg() << "Right: " << margin_right->to_string() << "+" << border_right->to_string() << "+" << padding_right->to_string(); + dbg() << " Left: " << margin_left << "+" << border_left << "+" << padding_left; + dbg() << "Right: " << margin_right << "+" << border_right << "+" << padding_right; int total_px = 0; for (auto& value : { margin_left, border_left, padding_left, width, padding_right, border_right, margin_right }) { - total_px += value->to_length().to_px(); + total_px += value.to_px(); } dbg() << "Total: " << total_px; // 10.3.3 Block-level, non-replaced elements in normal flow // If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero. - if (width->to_length().is_auto() && total_px > containing_block()->rect().width()) { - if (margin_left->to_length().is_auto()) + if (width.is_auto() && total_px > containing_block()->rect().width()) { + if (margin_left.is_auto()) margin_left = zero_value; - if (margin_right->to_length().is_auto()) + if (margin_right.is_auto()) margin_right = zero_value; } + + // 10.3.3 cont'd. + auto underflow_px = containing_block()->rect().width() - total_px; + + if (width.is_auto()) { + if (margin_left.is_auto()) + margin_left = zero_value; + if (margin_right.is_auto()) + margin_right = zero_value; + if (underflow_px >= 0) { + width = Length(underflow_px, Length::Type::Absolute); + } else { + width = zero_value; + margin_right = Length(margin_right.to_px() + underflow_px, Length::Type::Absolute); + } + } else { + if (!margin_left.is_auto() && !margin_right.is_auto()) { + margin_right = Length(margin_right.to_px() + underflow_px, Length::Type::Absolute); + } else if (!margin_left.is_auto() && margin_right.is_auto()) { + margin_right = Length(underflow_px, Length::Type::Absolute); + } else if (margin_left.is_auto() && !margin_right.is_auto()) { + margin_left = Length(underflow_px, Length::Type::Absolute); + } else { // margin_left.is_auto() && margin_right.is_auto() + auto half_of_the_underflow = Length(underflow_px / 2, Length::Type::Absolute); + margin_left = half_of_the_underflow; + margin_right = half_of_the_underflow; + } + } + + rect().set_width(width.to_px()); + style().margin().left = margin_left; + style().margin().right = margin_right; + style().border().left = border_left; + style().border().right = border_right; + style().padding().left = padding_left; + style().padding().right = padding_right; } void LayoutBlock::compute_height()