LibWeb: Fix floating box position calculation
Now we set margins, borders and paddings for floating boxes and include them into calculating floating box positions by using margin_box() and margin_box_as_relative_rect().
This commit is contained in:
parent
3c0355a398
commit
5ae2774018
Notes:
sideshowbarker
2024-07-18 18:52:38 +09:00
Author: https://github.com/Cleverking2003 Commit: https://github.com/SerenityOS/serenity/commit/5ae2774018f Pull-request: https://github.com/SerenityOS/serenity/pull/6736 Reviewed-by: https://github.com/awesomekling
1 changed files with 15 additions and 9 deletions
|
@ -209,8 +209,8 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box)
|
|||
float width_of_containing_block = box.width_of_logical_containing_block();
|
||||
auto zero_value = CSS::Length::make_px(0);
|
||||
|
||||
auto margin_left = CSS::Length::make_auto();
|
||||
auto margin_right = CSS::Length::make_auto();
|
||||
auto margin_left = computed_values.margin().left.resolved_or_zero(box, width_of_containing_block);
|
||||
auto margin_right = computed_values.margin().right.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_left = computed_values.padding().left.resolved_or_zero(box, width_of_containing_block);
|
||||
const auto padding_right = computed_values.padding().right.resolved_or_zero(box, width_of_containing_block);
|
||||
|
||||
|
@ -240,6 +240,12 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box)
|
|||
|
||||
float final_width = width.resolved_or_zero(box, width_of_containing_block).to_px(box);
|
||||
box.set_width(final_width);
|
||||
box.box_model().margin.left = margin_left.to_px(box);
|
||||
box.box_model().margin.right = margin_right.to_px(box);
|
||||
box.box_model().border.left = computed_values.border_left().width;
|
||||
box.box_model().border.right = computed_values.border_right().width;
|
||||
box.box_model().padding.left = padding_left.to_px(box);
|
||||
box.box_model().padding.right = padding_right.to_px(box);
|
||||
}
|
||||
|
||||
void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_normal_flow(ReplacedBox& box)
|
||||
|
@ -543,7 +549,7 @@ void BlockFormattingContext::layout_initial_containing_block(LayoutMode layout_m
|
|||
|
||||
static Gfx::FloatRect rect_in_coordinate_space(const Box& box, const Box& context_box)
|
||||
{
|
||||
Gfx::FloatRect rect { box.effective_offset(), box.size() };
|
||||
Gfx::FloatRect rect = box.margin_box_as_relative_rect();
|
||||
for (auto* ancestor = box.parent(); ancestor; ancestor = ancestor->parent()) {
|
||||
if (is<Box>(*ancestor)) {
|
||||
auto offset = downcast<Box>(*ancestor).effective_offset();
|
||||
|
@ -579,16 +585,16 @@ void BlockFormattingContext::layout_floating_child(Box& box, Box& containing_blo
|
|||
auto previous_rect = rect_in_coordinate_space(previous_floating_box, context_box());
|
||||
if (previous_rect.contains_vertically(y_in_context_box)) {
|
||||
// This box touches another already floating box. Stack to the right.
|
||||
x = previous_floating_box.effective_offset().x() + previous_floating_box.width();
|
||||
x = previous_floating_box.margin_box_as_relative_rect().x() + previous_floating_box.margin_box_as_relative_rect().width() + box.box_model().margin_box().left;
|
||||
} else {
|
||||
// This box does not touch another floating box, go all the way to the left.
|
||||
x = 0;
|
||||
x = box.box_model().margin_box().left;
|
||||
// Also, forget all previous left-floating boxes while we're here since they're no longer relevant.
|
||||
m_left_floating_boxes.clear();
|
||||
}
|
||||
} else {
|
||||
// This is the first left-floating box. Go all the way to the left.
|
||||
x = 0;
|
||||
x = box.box_model().margin_box().left;
|
||||
}
|
||||
m_left_floating_boxes.append(&box);
|
||||
} else if (box.computed_values().float_() == CSS::Float::Right) {
|
||||
|
@ -597,16 +603,16 @@ void BlockFormattingContext::layout_floating_child(Box& box, Box& containing_blo
|
|||
auto previous_rect = rect_in_coordinate_space(previous_floating_box, context_box());
|
||||
if (previous_rect.contains_vertically(y_in_context_box)) {
|
||||
// This box touches another already floating box. Stack to the left.
|
||||
x = previous_floating_box.effective_offset().x() - box.width();
|
||||
x = previous_floating_box.margin_box_as_relative_rect().x() - box.box_model().margin_box().right - box.width();
|
||||
} else {
|
||||
// This box does not touch another floating box, go all the way to the right.
|
||||
x = containing_block.width() - box.width();
|
||||
x = containing_block.width() - box.box_model().margin_box().right - box.width();
|
||||
// Also, forget all previous right-floating boxes while we're here since they're no longer relevant.
|
||||
m_right_floating_boxes.clear();
|
||||
}
|
||||
} else {
|
||||
// This is the first right-floating box. Go all the way to the right.
|
||||
x = containing_block.width() - box.width();
|
||||
x = containing_block.width() - box.box_model().margin_box().right - box.width();
|
||||
}
|
||||
m_right_floating_boxes.append(&box);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue