RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 05:08:13 +00:00
Code Issues Activity Actions

LibWeb: Store layout box model metrics as floats

Browse source 
Instead of storing them as CSS::Lengths, we now store the resolved
values for margin/padding/border/offset top/right/bottom/left with
each Layout::NodeWithStyleAndBoxModelMetrics.

This simplifies a lot of code since it's no longer necessary to
resolve values before using them.
This commit is contained in:
Andreas Kling 2020-12-12 21:02:06 +01:00
parent 1042762deb
commit 9d442ba606
7 changed files with 132 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Libraries/LibWeb/Dump.cpp
View file

@ -183,23 +183,23 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho
if (show_box_model) { if (show_box_model) {
// Dump the horizontal box properties // Dump the horizontal box properties
builder.appendf(" [%g+%g+%g %g %g+%g+%g]", builder.appendf(" [%g+%g+%g %g %g+%g+%g]",
box.box_model().margin.left.to_px(box), box.box_model().margin.left,
box.box_model().border.left.to_px(box), box.box_model().border.left,
box.box_model().padding.left.to_px(box), box.box_model().padding.left,
box.width(), box.width(),
box.box_model().padding.right.to_px(box), box.box_model().padding.right,
box.box_model().border.right.to_px(box), box.box_model().border.right,
box.box_model().margin.right.to_px(box)); box.box_model().margin.right);
// And the vertical box properties // And the vertical box properties
builder.appendf(" [%g+%g+%g %g %g+%g+%g]", builder.appendf(" [%g+%g+%g %g %g+%g+%g]",
box.box_model().margin.top.to_px(box), box.box_model().margin.top,
box.box_model().border.top.to_px(box), box.box_model().border.top,
box.box_model().padding.top.to_px(box), box.box_model().padding.top,
box.height(), box.height(),
box.box_model().padding.bottom.to_px(box), box.box_model().padding.bottom,
box.box_model().border.bottom.to_px(box), box.box_model().border.bottom,
box.box_model().margin.bottom.to_px(box)); box.box_model().margin.bottom);
} }
builder.append("\n"); builder.append("\n");

165
Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -206,12 +206,12 @@ void BlockFormattingContext::compute_width(Box& box)
} }
box.set_width(used_width.to_px(box)); box.set_width(used_width.to_px(box));
box.box_model().margin.left = margin_left; box.box_model().margin.left = margin_left.to_px(box);
box.box_model().margin.right = margin_right; box.box_model().margin.right = margin_right.to_px(box);
box.box_model().border.left = CSS::Length::make_px(style.border_left().width); box.box_model().border.left = style.border_left().width;
box.box_model().border.right = CSS::Length::make_px(style.border_right().width); box.box_model().border.right = style.border_right().width;
box.box_model().padding.left = padding_left; box.box_model().padding.left = padding_left.to_px(box);
box.box_model().padding.right = padding_right; box.box_model().padding.right = padding_right.to_px(box);
} }
void BlockFormattingContext::compute_width_for_floating_box(Box& box) void BlockFormattingContext::compute_width_for_floating_box(Box& box)
@ -396,12 +396,12 @@ void BlockFormattingContext::compute_width_for_absolutely_positioned_block(Box&
box.set_width(used_width.to_px(box)); box.set_width(used_width.to_px(box));
box.box_model().margin.left = margin_left; box.box_model().margin.left = margin_left.to_px(box);
box.box_model().margin.right = margin_right; box.box_model().margin.right = margin_right.to_px(box);
box.box_model().border.left = CSS::Length::make_px(border_left); box.box_model().border.left = border_left;
box.box_model().border.right = CSS::Length::make_px(border_right); box.box_model().border.right = border_right;
box.box_model().padding.left = padding_left; box.box_model().padding.left = padding_left.to_px(box);
box.box_model().padding.right = padding_right; box.box_model().padding.right = padding_right.to_px(box);
} }
void BlockFormattingContext::compute_height(Box& box) void BlockFormattingContext::compute_height(Box& box)
@ -424,12 +424,12 @@ void BlockFormattingContext::compute_height(Box& box)
auto specified_max_height = style.max_height().resolved_or_auto(box, containing_block.height()); auto specified_max_height = style.max_height().resolved_or_auto(box, containing_block.height());
box.box_model().margin.top = style.margin().top.resolved_or_zero(box, containing_block.width()); box.box_model().margin.top = style.margin().top.resolved_or_zero(box, containing_block.width()).to_px(box);
box.box_model().margin.bottom = style.margin().bottom.resolved_or_zero(box, containing_block.width()); box.box_model().margin.bottom = style.margin().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
box.box_model().border.top = CSS::Length::make_px(style.border_top().width); box.box_model().border.top = style.border_top().width;
box.box_model().border.bottom = CSS::Length::make_px(style.border_bottom().width); box.box_model().border.bottom = style.border_bottom().width;
box.box_model().padding.top = style.padding().top.resolved_or_zero(box, containing_block.width()); box.box_model().padding.top = style.padding().top.resolved_or_zero(box, containing_block.width()).to_px(box);
box.box_model().padding.bottom = style.padding().bottom.resolved_or_zero(box, containing_block.width()); box.box_model().padding.bottom = style.padding().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
if (!specified_height.is_auto()) { if (!specified_height.is_auto()) {
float used_height = specified_height.to_px(box); float used_height = specified_height.to_px(box);
@ -477,7 +477,7 @@ void BlockFormattingContext::layout_block_level_children(Box& box, LayoutMode la
if (is<ListItemBox>(child_box)) if (is<ListItemBox>(child_box))
downcast<ListItemBox>(child_box).layout_marker(); downcast<ListItemBox>(child_box).layout_marker();
content_height = max(content_height, child_box.effective_offset().y() + child_box.height() + child_box.box_model().margin_box(child_box).bottom); content_height = max(content_height, child_box.effective_offset().y() + child_box.height() + child_box.box_model().margin_box().bottom);
content_width = max(content_width, downcast<Box>(child_box).width()); content_width = max(content_width, downcast<Box>(child_box).width());
return IterationDecision::Continue; return IterationDecision::Continue;
}); });
@ -496,19 +496,19 @@ void BlockFormattingContext::place_block_level_replaced_element_in_normal_flow(B
ASSERT(!containing_block.is_absolutely_positioned()); ASSERT(!containing_block.is_absolutely_positioned());
auto& replaced_element_box_model = child_box.box_model(); auto& replaced_element_box_model = child_box.box_model();
replaced_element_box_model.margin.top = child_box.style().margin().top.resolved_or_zero(containing_block, containing_block.width()); replaced_element_box_model.margin.top = child_box.style().margin().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
replaced_element_box_model.margin.bottom = child_box.style().margin().bottom.resolved_or_zero(containing_block, containing_block.width()); replaced_element_box_model.margin.bottom = child_box.style().margin().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
replaced_element_box_model.border.top = CSS::Length::make_px(child_box.style().border_top().width); replaced_element_box_model.border.top = child_box.style().border_top().width;
replaced_element_box_model.border.bottom = CSS::Length::make_px(child_box.style().border_bottom().width); replaced_element_box_model.border.bottom = child_box.style().border_bottom().width;
replaced_element_box_model.padding.top = child_box.style().padding().top.resolved_or_zero(containing_block, containing_block.width()); replaced_element_box_model.padding.top = child_box.style().padding().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
replaced_element_box_model.padding.bottom = child_box.style().padding().bottom.resolved_or_zero(containing_block, containing_block.width()); replaced_element_box_model.padding.bottom = child_box.style().padding().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
float x = replaced_element_box_model.margin.left.to_px(child_box) float x = replaced_element_box_model.margin.left
+ replaced_element_box_model.border.left.to_px(child_box) + replaced_element_box_model.border.left
+ replaced_element_box_model.padding.left.to_px(child_box) + replaced_element_box_model.padding.left
+ replaced_element_box_model.offset.left.to_px(child_box); + replaced_element_box_model.offset.left;
float y = replaced_element_box_model.margin_box(child_box).top + containing_block.box_model().offset.top.to_px(child_box); float y = replaced_element_box_model.margin_box().top + containing_block.box_model().offset.top;
child_box.set_offset(x, y); child_box.set_offset(x, y);
} }
@ -518,24 +518,24 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
auto& box_model = child_box.box_model(); auto& box_model = child_box.box_model();
auto& style = child_box.style(); auto& style = child_box.style();
box_model.margin.top = style.margin().top.resolved_or_zero(containing_block, containing_block.width()); box_model.margin.top = style.margin().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
box_model.margin.bottom = style.margin().bottom.resolved_or_zero(containing_block, containing_block.width()); box_model.margin.bottom = style.margin().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
box_model.border.top = CSS::Length::make_px(style.border_top().width); box_model.border.top = style.border_top().width;
box_model.border.bottom = CSS::Length::make_px(style.border_bottom().width); box_model.border.bottom = style.border_bottom().width;
box_model.padding.top = style.padding().top.resolved_or_zero(containing_block, containing_block.width()); box_model.padding.top = style.padding().top.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
box_model.padding.bottom = style.padding().bottom.resolved_or_zero(containing_block, containing_block.width()); box_model.padding.bottom = style.padding().bottom.resolved_or_zero(containing_block, containing_block.width()).to_px(child_box);
float x = box_model.margin.left.to_px(child_box) float x = box_model.margin.left
+ box_model.border.left.to_px(child_box) + box_model.border.left
+ box_model.padding.left.to_px(child_box) + box_model.padding.left
+ box_model.offset.left.to_px(child_box); + box_model.offset.left;
if (containing_block.style().text_align() == CSS::TextAlign::VendorSpecificCenter) { if (containing_block.style().text_align() == CSS::TextAlign::VendorSpecificCenter) {
x = (containing_block.width() / 2) - child_box.width() / 2; x = (containing_block.width() / 2) - child_box.width() / 2;
} }
float y = box_model.margin_box(child_box).top float y = box_model.margin_box().top
+ box_model.offset.top.to_px(child_box); + box_model.offset.top;
// NOTE: Empty (0-height) preceding siblings have their margins collapsed with *their* preceding sibling, etc. // NOTE: Empty (0-height) preceding siblings have their margins collapsed with *their* preceding sibling, etc.
float collapsed_bottom_margin_of_preceding_siblings = 0; float collapsed_bottom_margin_of_preceding_siblings = 0;
@ -543,7 +543,7 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
auto* relevant_sibling = child_box.previous_sibling_of_type<Layout::BlockBox>(); auto* relevant_sibling = child_box.previous_sibling_of_type<Layout::BlockBox>();
while (relevant_sibling != nullptr) { while (relevant_sibling != nullptr) {
if (!relevant_sibling->is_absolutely_positioned() && !relevant_sibling->is_floating()) { if (!relevant_sibling->is_absolutely_positioned() && !relevant_sibling->is_floating()) {
collapsed_bottom_margin_of_preceding_siblings = max(collapsed_bottom_margin_of_preceding_siblings, relevant_sibling->box_model().margin.bottom.to_px(*relevant_sibling)); collapsed_bottom_margin_of_preceding_siblings = max(collapsed_bottom_margin_of_preceding_siblings, relevant_sibling->box_model().margin.bottom);
if (relevant_sibling->height() > 0) if (relevant_sibling->height() > 0)
break; break;
} }
@ -553,10 +553,10 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
if (relevant_sibling) { if (relevant_sibling) {
y += relevant_sibling->effective_offset().y() y += relevant_sibling->effective_offset().y()
+ relevant_sibling->height() + relevant_sibling->height()
+ relevant_sibling->box_model().border_box(*relevant_sibling).bottom; + relevant_sibling->box_model().border_box().bottom;
// Collapse top margin with bottom margin of preceding siblings if needed // Collapse top margin with bottom margin of preceding siblings if needed
float my_margin_top = box_model.margin.top.to_px(child_box); float my_margin_top = box_model.margin.top;
if (my_margin_top < 0 || collapsed_bottom_margin_of_preceding_siblings < 0) { if (my_margin_top < 0 || collapsed_bottom_margin_of_preceding_siblings < 0) {
// Negative margins present. // Negative margins present.
@ -574,7 +574,7 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
if (!m_left_floating_boxes.is_empty()) { if (!m_left_floating_boxes.is_empty()) {
float clearance_y = 0; float clearance_y = 0;
for (auto* floating_box : m_left_floating_boxes) { for (auto* floating_box : m_left_floating_boxes) {
clearance_y = max(clearance_y, floating_box->effective_offset().y() + floating_box->box_model().margin_box(*floating_box).bottom); clearance_y = max(clearance_y, floating_box->effective_offset().y() + floating_box->box_model().margin_box().bottom);
} }
y = max(y, clearance_y); y = max(y, clearance_y);
m_left_floating_boxes.clear(); m_left_floating_boxes.clear();
@ -585,7 +585,7 @@ void BlockFormattingContext::place_block_level_non_replaced_element_in_normal_fl
if (!m_right_floating_boxes.is_empty()) { if (!m_right_floating_boxes.is_empty()) {
float clearance_y = 0; float clearance_y = 0;
for (auto* floating_box : m_right_floating_boxes) { for (auto* floating_box : m_right_floating_boxes) {
clearance_y = max(clearance_y, floating_box->effective_offset().y() + floating_box->box_model().margin_box(*floating_box).bottom); clearance_y = max(clearance_y, floating_box->effective_offset().y() + floating_box->box_model().margin_box().bottom);
} }
y = max(y, clearance_y); y = max(y, clearance_y);
m_right_floating_boxes.clear(); m_right_floating_boxes.clear();
@ -701,7 +701,6 @@ void BlockFormattingContext::layout_absolutely_positioned_child(Box& box)
{ {
auto& containing_block = context_box(); auto& containing_block = context_box();
auto& box_model = box.box_model(); auto& box_model = box.box_model();
auto zero_value = CSS::Length::make_px(0);
auto specified_width = box.style().width().resolved_or_auto(box, containing_block.width()); auto specified_width = box.style().width().resolved_or_auto(box, containing_block.width());
@ -709,55 +708,55 @@ void BlockFormattingContext::layout_absolutely_positioned_child(Box& box)
layout_inside(box, LayoutMode::Default); layout_inside(box, LayoutMode::Default);
compute_height(box); compute_height(box);
box_model.margin.left = box.style().margin().left.resolved_or_auto(box, containing_block.width()); box_model.margin.left = box.style().margin().left.resolved_or_auto(box, containing_block.width()).to_px(box);
box_model.margin.top = box.style().margin().top.resolved_or_auto(box, containing_block.height()); box_model.margin.top = box.style().margin().top.resolved_or_auto(box, containing_block.height()).to_px(box);
box_model.margin.right = box.style().margin().right.resolved_or_auto(box, containing_block.width()); box_model.margin.right = box.style().margin().right.resolved_or_auto(box, containing_block.width()).to_px(box);
box_model.margin.bottom = box.style().margin().bottom.resolved_or_auto(box, containing_block.height()); box_model.margin.bottom = box.style().margin().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
box_model.border.left = CSS::Length::make_px(box.style().border_left().width); box_model.border.left = box.style().border_left().width;
box_model.border.right = CSS::Length::make_px(box.style().border_right().width); box_model.border.right = box.style().border_right().width;
box_model.border.top = CSS::Length::make_px(box.style().border_top().width); box_model.border.top = box.style().border_top().width;
box_model.border.bottom = CSS::Length::make_px(box.style().border_bottom().width); box_model.border.bottom = box.style().border_bottom().width;
box_model.offset.left = box.style().offset().left.resolved_or_auto(box, containing_block.width()); box_model.offset.left = box.style().offset().left.resolved_or_auto(box, containing_block.width()).to_px(box);
box_model.offset.top = box.style().offset().top.resolved_or_auto(box, containing_block.height()); box_model.offset.top = box.style().offset().top.resolved_or_auto(box, containing_block.height()).to_px(box);
box_model.offset.right = box.style().offset().right.resolved_or_auto(box, containing_block.width()); box_model.offset.right = box.style().offset().right.resolved_or_auto(box, containing_block.width()).to_px(box);
box_model.offset.bottom = box.style().offset().bottom.resolved_or_auto(box, containing_block.height()); box_model.offset.bottom = box.style().offset().bottom.resolved_or_auto(box, containing_block.height()).to_px(box);
if (box_model.offset.left.is_auto() && specified_width.is_auto() && box_model.offset.right.is_auto()) { if (box.style().offset().left.is_auto() && specified_width.is_auto() && box.style().offset().right.is_auto()) {
if (box_model.margin.left.is_auto()) if (box.style().margin().left.is_auto())
box_model.margin.left = zero_value; box_model.margin.left = 0;
if (box_model.margin.right.is_auto()) if (box.style().margin().right.is_auto())
box_model.margin.right = zero_value; box_model.margin.right = 0;
} }
Gfx::FloatPoint used_offset; Gfx::FloatPoint used_offset;
if (!box_model.offset.left.is_auto()) { if (!box.style().offset().left.is_auto()) {
float x_offset = box_model.offset.left.to_px(box) float x_offset = box_model.offset.left
+ box_model.border_box(box).left; + box_model.border_box().left;
used_offset.set_x(x_offset + box_model.margin.left.to_px(box)); used_offset.set_x(x_offset + box_model.margin.left);
} else if (!box_model.offset.right.is_auto()) { } else if (!box.style().offset().right.is_auto()) {
float x_offset = 0 float x_offset = 0
- box_model.offset.right.to_px(box) - box.style().offset().right.to_px(box)
- box_model.border_box(box).right; - box_model.border_box().right;
used_offset.set_x(containing_block.width() + x_offset - box.width() - box_model.margin.right.to_px(box)); used_offset.set_x(containing_block.width() + x_offset - box.width() - box_model.margin.right);
} else { } else {
float x_offset = box_model.margin_box(box).left; float x_offset = box_model.margin_box().left;
used_offset.set_x(x_offset); used_offset.set_x(x_offset);
} }
if (!box_model.offset.top.is_auto()) { if (!box.style().offset().top.is_auto()) {
float y_offset = box_model.offset.top.to_px(box) float y_offset = box_model.offset.top
+ box_model.border_box(box).top; + box_model.border_box().top;
used_offset.set_y(y_offset + box_model.margin.top.to_px(box)); used_offset.set_y(y_offset + box_model.margin.top);
} else if (!box_model.offset.bottom.is_auto()) { } else if (!box.style().offset().bottom.is_auto()) {
float y_offset = 0 float y_offset = 0
- box_model.offset.bottom.to_px(box) - box.style().offset().bottom.to_px(box)
- box_model.border_box(box).bottom; - box_model.border_box().bottom;
used_offset.set_y(containing_block.height() + y_offset - box.height() - box_model.margin.bottom.to_px(box)); used_offset.set_y(containing_block.height() + y_offset - box.height() - box_model.margin.bottom);
} else { } else {
float y_offset = box_model.margin_box(box).top; float y_offset = box_model.margin_box().top;
used_offset.set_y(y_offset); used_offset.set_y(y_offset);
} }

18
Libraries/LibWeb/Layout/Box.cpp
View file

@ -44,10 +44,10 @@ void Box::paint(PaintContext& context, PaintPhase phase)
context.painter().translate(context.scroll_offset()); context.painter().translate(context.scroll_offset());
Gfx::FloatRect padded_rect; Gfx::FloatRect padded_rect;
padded_rect.set_x(absolute_x() - box_model().padding.left.to_px(*this)); padded_rect.set_x(absolute_x() - box_model().padding.left);
padded_rect.set_width(width() + box_model().padding.left.to_px(*this) + box_model().padding.right.to_px(*this)); padded_rect.set_width(width() + box_model().padding.left + box_model().padding.right);
padded_rect.set_y(absolute_y() - box_model().padding.top.to_px(*this)); padded_rect.set_y(absolute_y() - box_model().padding.top);
padded_rect.set_height(height() + box_model().padding.top.to_px(*this) + box_model().padding.bottom.to_px(*this)); padded_rect.set_height(height() + box_model().padding.top + box_model().padding.bottom);
if (phase == PaintPhase::Background && !is_body()) { if (phase == PaintPhase::Background && !is_body()) {
// FIXME: We should paint the body here too, but that currently happens at the view layer. // FIXME: We should paint the body here too, but that currently happens at the view layer.
@ -67,10 +67,10 @@ void Box::paint(PaintContext& context, PaintPhase phase)
if (phase == PaintPhase::Border) { if (phase == PaintPhase::Border) {
Gfx::FloatRect bordered_rect; Gfx::FloatRect bordered_rect;
bordered_rect.set_x(padded_rect.x() - box_model().border.left.to_px(*this)); bordered_rect.set_x(padded_rect.x() - box_model().border.left);
bordered_rect.set_width(padded_rect.width() + box_model().border.left.to_px(*this) + box_model().border.right.to_px(*this)); bordered_rect.set_width(padded_rect.width() + box_model().border.left + box_model().border.right);
bordered_rect.set_y(padded_rect.y() - box_model().border.top.to_px(*this)); bordered_rect.set_y(padded_rect.y() - box_model().border.top);
bordered_rect.set_height(padded_rect.height() + box_model().border.top.to_px(*this) + box_model().border.bottom.to_px(*this)); bordered_rect.set_height(padded_rect.height() + box_model().border.top + box_model().border.bottom);
Painting::paint_border(context, Painting::BorderEdge::Left, bordered_rect, style()); Painting::paint_border(context, Painting::BorderEdge::Left, bordered_rect, style());
Painting::paint_border(context, Painting::BorderEdge::Right, bordered_rect, style()); Painting::paint_border(context, Painting::BorderEdge::Right, bordered_rect, style());
@ -83,7 +83,7 @@ void Box::paint(PaintContext& context, PaintPhase phase)
if (phase == PaintPhase::Overlay && dom_node() && document().inspected_node() == dom_node()) { if (phase == PaintPhase::Overlay && dom_node() && document().inspected_node() == dom_node()) {
auto content_rect = absolute_rect(); auto content_rect = absolute_rect();
auto margin_box = box_model().margin_box(*this); auto margin_box = box_model().margin_box();
Gfx::FloatRect margin_rect; Gfx::FloatRect margin_rect;
margin_rect.set_x(absolute_x() - margin_box.left); margin_rect.set_x(absolute_x() - margin_box.left);
margin_rect.set_width(width() + margin_box.left + margin_box.right); margin_rect.set_width(width() + margin_box.left + margin_box.right);

4
Libraries/LibWeb/Layout/Box.h
View file

@ -54,7 +54,7 @@ public:
float border_box_width() const float border_box_width() const
{ {
auto border_box = box_model().border_box(*this); auto border_box = box_model().border_box();
return width() + border_box.left + border_box.right; return width() + border_box.left + border_box.right;
} }
@ -66,7 +66,7 @@ public:
Gfx::FloatRect margin_box_as_relative_rect() const Gfx::FloatRect margin_box_as_relative_rect() const
{ {
auto rect = content_box_as_relative_rect(); auto rect = content_box_as_relative_rect();
auto margin_box = box_model().margin_box(*this); auto margin_box = box_model().margin_box();
rect.set_x(rect.x() - margin_box.left); rect.set_x(rect.x() - margin_box.left);
rect.set_width(rect.width() + margin_box.left + margin_box.right); rect.set_width(rect.width() + margin_box.left + margin_box.right);
rect.set_y(rect.y() - margin_box.top); rect.set_y(rect.y() - margin_box.top);

30
Libraries/LibWeb/Layout/BoxModelMetrics.cpp
View file

@ -28,33 +28,33 @@
namespace Web::Layout { namespace Web::Layout {
PixelBox BoxModelMetrics::margin_box(const Node& layout_node) const PixelBox BoxModelMetrics::margin_box() const
{ {
return { return {
margin.top.to_px(layout_node) + border.top.to_px(layout_node) + padding.top.to_px(layout_node), margin.top + border.top + padding.top,
margin.right.to_px(layout_node) + border.right.to_px(layout_node) + padding.right.to_px(layout_node), margin.right + border.right + padding.right,
margin.bottom.to_px(layout_node) + border.bottom.to_px(layout_node) + padding.bottom.to_px(layout_node), margin.bottom + border.bottom + padding.bottom,
margin.left.to_px(layout_node) + border.left.to_px(layout_node) + padding.left.to_px(layout_node), margin.left + border.left + padding.left,
}; };
} }
PixelBox BoxModelMetrics::padding_box(const Node& layout_node) const PixelBox BoxModelMetrics::padding_box() const
{ {
return { return {
padding.top.to_px(layout_node), padding.top,
padding.right.to_px(layout_node), padding.right,
padding.bottom.to_px(layout_node), padding.bottom,
padding.left.to_px(layout_node), padding.left,
}; };
} }
PixelBox BoxModelMetrics::border_box(const Node& layout_node) const PixelBox BoxModelMetrics::border_box() const
{ {
return { return {
border.top.to_px(layout_node) + padding.top.to_px(layout_node), border.top + padding.top,
border.right.to_px(layout_node) + padding.right.to_px(layout_node), border.right + padding.right,
border.bottom.to_px(layout_node) + padding.bottom.to_px(layout_node), border.bottom + padding.bottom,
border.left.to_px(layout_node) + padding.left.to_px(layout_node), border.left + padding.left,
}; };
} }

23
Libraries/LibWeb/Layout/BoxModelMetrics.h
View file

@ -27,27 +27,26 @@
#pragma once #pragma once
#include <LibGfx/Size.h> #include <LibGfx/Size.h>
#include <LibWeb/CSS/LengthBox.h>
namespace Web::Layout { namespace Web::Layout {
struct PixelBox { struct PixelBox {
float top; float top { 0 };
float right; float right { 0 };
float bottom; float bottom { 0 };
float left; float left { 0 };
}; };
struct BoxModelMetrics { struct BoxModelMetrics {
public: public:
CSS::LengthBox margin; PixelBox margin;
CSS::LengthBox padding; PixelBox padding;
CSS::LengthBox border; PixelBox border;
CSS::LengthBox offset; PixelBox offset;
PixelBox margin_box(const Node&) const; PixelBox margin_box() const;
PixelBox padding_box(const Node&) const; PixelBox padding_box() const;
PixelBox border_box(const Node&) const; PixelBox border_box() const;
}; };
} }

2
Libraries/LibWeb/Page/Frame.cpp
View file

@ -167,7 +167,7 @@ void Frame::scroll_to_anchor(const String& fragment)
Gfx::FloatRect float_rect { layout_node.box_type_agnostic_position(), { (float)viewport_rect().width(), (float)viewport_rect().height() } }; Gfx::FloatRect float_rect { layout_node.box_type_agnostic_position(), { (float)viewport_rect().width(), (float)viewport_rect().height() } };
if (is<Layout::Box>(layout_node)) { if (is<Layout::Box>(layout_node)) {
auto& layout_box = downcast<Layout::Box>(layout_node); auto& layout_box = downcast<Layout::Box>(layout_node);
auto padding_box = layout_box.box_model().padding_box(layout_box); auto padding_box = layout_box.box_model().padding_box();
float_rect.move_by(-padding_box.left, -padding_box.top); float_rect.move_by(-padding_box.left, -padding_box.top);
} }