diff --git a/Libraries/LibHTML/CSS/StyledNode.h b/Libraries/LibHTML/CSS/StyledNode.h
index 3f5e74a295..035cfd5be4 100644
--- a/Libraries/LibHTML/CSS/StyledNode.h
+++ b/Libraries/LibHTML/CSS/StyledNode.h
@@ -61,6 +61,14 @@ public:
Display display() const;
+ Length length_or_fallback(const StringView& property_name, const Length& fallback)
+ {
+ auto value = property(property_name);
+ if (!value.has_value())
+ return fallback;
+ return value.value()->to_length();
+ }
+
protected:
explicit StyledNode(const Node*);
diff --git a/Libraries/LibHTML/Dump.cpp b/Libraries/LibHTML/Dump.cpp
index 834d360761..9f14f7fde5 100644
--- a/Libraries/LibHTML/Dump.cpp
+++ b/Libraries/LibHTML/Dump.cpp
@@ -65,9 +65,19 @@ void dump_tree(const LayoutNode& layout_node)
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().padding().right.to_px(),
layout_node.style().border().right.to_px(),
- layout_node.style().padding().right.to_px());
+ layout_node.style().margin().right.to_px());
+
+ // And the vertical box properties
+ printf(" [%d+%d+%d %d %d+%d+%d]",
+ layout_node.style().margin().top.to_px(),
+ layout_node.style().border().top.to_px(),
+ layout_node.style().padding().top.to_px(),
+ layout_node.rect().height(),
+ layout_node.style().padding().bottom.to_px(),
+ layout_node.style().border().bottom.to_px(),
+ layout_node.style().margin().bottom.to_px());
if (layout_node.is_text())
printf(" \"%s\"", static_cast(layout_node).text().characters());
diff --git a/Libraries/LibHTML/Layout/LayoutBlock.cpp b/Libraries/LibHTML/Layout/LayoutBlock.cpp
index 894a8aeb6b..72c6a36834 100644
--- a/Libraries/LibHTML/Layout/LayoutBlock.cpp
+++ b/Libraries/LibHTML/Layout/LayoutBlock.cpp
@@ -22,8 +22,20 @@ LayoutNode& LayoutBlock::inline_wrapper()
void LayoutBlock::layout()
{
compute_width();
+ compute_position();
- LayoutNode::layout();
+ int content_height = 0;
+ for_each_child([&](auto& child) {
+ child.layout();
+ content_height += child.rect().height()
+ + child.style().margin().top.to_px()
+ + child.style().border().top.to_px()
+ + child.style().padding().top.to_px()
+ + child.style().margin().bottom.to_px()
+ + child.style().border().bottom.to_px()
+ + child.style().padding().bottom.to_px();
+ });
+ rect().set_height(content_height);
compute_height();
}
@@ -38,21 +50,13 @@ void LayoutBlock::compute_width()
auto& styled_node = *this->styled_node();
auto auto_value = Length();
auto zero_value = 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 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);
+ auto width = styled_node.length_or_fallback("width", auto_value);
+ auto margin_left = styled_node.length_or_fallback("margin-left", zero_value);
+ auto margin_right = styled_node.length_or_fallback("margin-right", zero_value);
+ auto border_left = styled_node.length_or_fallback("border-left", zero_value);
+ auto border_right = styled_node.length_or_fallback("border-right", zero_value);
+ auto padding_left = styled_node.length_or_fallback("padding-left", zero_value);
+ auto padding_right = styled_node.length_or_fallback("padding-right", zero_value);
dbg() << " Left: " << margin_left << "+" << border_left << "+" << padding_left;
dbg() << "Right: " << margin_right << "+" << border_right << "+" << padding_right;
@@ -110,6 +114,37 @@ void LayoutBlock::compute_width()
style().padding().right = padding_right;
}
+void LayoutBlock::compute_position()
+{
+ if (!styled_node()) {
+ // I guess the size is "auto" in this case.
+ return;
+ }
+
+ auto& styled_node = *this->styled_node();
+ auto auto_value = Length();
+ auto zero_value = Length(0, Length::Type::Absolute);
+
+ auto width = styled_node.length_or_fallback("width", auto_value);
+ style().margin().top = styled_node.length_or_fallback("margin-top", zero_value);
+ style().margin().bottom = styled_node.length_or_fallback("margin-bottom", zero_value);
+ style().border().top = styled_node.length_or_fallback("border-top", zero_value);
+ style().border().bottom = styled_node.length_or_fallback("border-bottom", zero_value);
+ style().padding().top = styled_node.length_or_fallback("padding-top", zero_value);
+ style().padding().bottom = styled_node.length_or_fallback("padding-bottom", zero_value);
+ rect().set_x(containing_block()->rect().x() + style().margin().left.to_px() + style().border().left.to_px() + style().padding().left.to_px());
+ rect().set_y(containing_block()->rect().y() + style().margin().top.to_px() + style().border().top.to_px() + style().padding().top.to_px());
+}
+
void LayoutBlock::compute_height()
{
+ if (!styled_node())
+ return;
+ auto& styled_node = *this->styled_node();
+ auto height_property = styled_node.property("height");
+ if (!height_property.has_value())
+ return;
+ auto height_length = height_property.value()->to_length();
+ if (height_length.is_absolute())
+ rect().set_height(height_length.to_px());
}
diff --git a/Libraries/LibHTML/Layout/LayoutBlock.h b/Libraries/LibHTML/Layout/LayoutBlock.h
index bf3f23c98b..7c75cb40e1 100644
--- a/Libraries/LibHTML/Layout/LayoutBlock.h
+++ b/Libraries/LibHTML/Layout/LayoutBlock.h
@@ -19,5 +19,6 @@ private:
virtual bool is_block() const override { return true; }
void compute_width();
+ void compute_position();
void compute_height();
};