RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:07:45 +00:00
Code Issues Activity Actions

LibWeb: Fix height calculation for absolutely positioned boxes

Browse source 
This commit fixes algorithm for computing auto height (CSS 2.2 10.6.7)
by including floating boxes into computation and implements one of the cases
for computing the height of absolutely positioned, non-replaced elements (10.6.4 rule 3)
This commit is contained in:
Egor Ananyin 2021-04-17 09:09:57 +03:00 • committed by Andreas Kling
parent 602f98fe67
commit 1d343116a9
4 changed files with 68 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

43
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -267,49 +267,6 @@ void BlockFormattingContext::compute_width_for_block_level_replaced_element_in_n
box.set_width(compute_width_for_replaced_element(box));
}
float BlockFormattingContext::compute_auto_height_for_block_level_element(const Box& box)
{
Optional<float> top;
Optional<float> bottom;
if (box.children_are_inline()) {
// If it only has inline-level children, the height is the distance between
// the top of the topmost line box and the bottom of the bottommost line box.
if (!box.line_boxes().is_empty()) {
for (auto& fragment : box.line_boxes().first().fragments()) {
if (!top.has_value() || fragment.offset().y() < top.value())
top = fragment.offset().y();
}
for (auto& fragment : box.line_boxes().last().fragments()) {
if (!bottom.has_value() || (fragment.offset().y() + fragment.height()) > bottom.value())
bottom = fragment.offset().y() + fragment.height();
}
}
} else {
// If it has block-level children, the height is the distance between
// the top margin-edge of the topmost block-level child box
// and the bottom margin-edge of the bottommost block-level child box.
box.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
if (child_box.is_absolutely_positioned())
return IterationDecision::Continue;
if ((box.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
return IterationDecision::Continue;
float child_box_top = child_box.effective_offset().y() - child_box.box_model().margin_box().top;
float child_box_bottom = child_box.effective_offset().y() + child_box.height() + child_box.box_model().margin_box().bottom;
if (!top.has_value() || child_box_top < top.value())
top = child_box_top;
if (!bottom.has_value() || child_box_bottom > bottom.value())
bottom = child_box_bottom;
return IterationDecision::Continue;
});
}
return bottom.value_or(0) - top.value_or(0);
}
void BlockFormattingContext::compute_height(Box& box)
{
auto& computed_values = box.computed_values();

2
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.h
View file

@ -56,8 +56,6 @@ private:
void compute_width_for_block_level_replaced_element_in_normal_flow(ReplacedBox&);
[[nodiscard]] static float compute_auto_height_for_block_level_element(const Box&);
void layout_initial_containing_block(LayoutMode);
void layout_block_level_children(Box&, LayoutMode);

68
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -180,6 +180,63 @@ static Gfx::FloatSize solve_replaced_size_constraint(float w, float h, const Rep
return { w, h };
}
float FormattingContext::compute_auto_height_for_block_level_element(const Box& box)
{
Optional<float> top;
Optional<float> bottom;
if (box.children_are_inline()) {
// If it only has inline-level children, the height is the distance between
// the top of the topmost line box and the bottom of the bottommost line box.
if (!box.line_boxes().is_empty()) {
for (auto& fragment : box.line_boxes().first().fragments()) {
if (!top.has_value() || fragment.offset().y() < top.value())
top = fragment.offset().y();
}
for (auto& fragment : box.line_boxes().last().fragments()) {
if (!bottom.has_value() || (fragment.offset().y() + fragment.height()) > bottom.value())
bottom = fragment.offset().y() + fragment.height();
}
}
} else {
// If it has block-level children, the height is the distance between
// the top margin-edge of the topmost block-level child box
// and the bottom margin-edge of the bottommost block-level child box.
box.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
if (child_box.is_absolutely_positioned())
return IterationDecision::Continue;
if ((box.computed_values().overflow_y() == CSS::Overflow::Visible) && child_box.is_floating())
return IterationDecision::Continue;
float child_box_top = child_box.effective_offset().y() - child_box.box_model().margin_box().top;
float child_box_bottom = child_box.effective_offset().y() + child_box.height() + child_box.box_model().margin_box().bottom;
if (!top.has_value() || child_box_top < top.value())
top = child_box_top;
if (!bottom.has_value() || child_box_bottom > bottom.value())
bottom = child_box_bottom;
return IterationDecision::Continue;
});
// In addition, if the element has any floating descendants
// whose bottom margin edge is below the element's bottom content edge,
// then the height is increased to include those edges.
box.for_each_child_of_type<Box>([&](Layout::Box& child_box) {
if (!child_box.is_floating())
return IterationDecision::Continue;
float child_box_bottom = child_box.effective_offset().y() + child_box.height();
if (!bottom.has_value() || child_box_bottom > bottom.value())
bottom = child_box_bottom;
return IterationDecision::Continue;
});
}
return bottom.value_or(0) - top.value_or(0);
}
float FormattingContext::tentative_width_for_replaced_element(const ReplacedBox& box, const CSS::Length& width)
{
auto& containing_block = *box.containing_block();
@ -487,7 +544,16 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
box.box_model().padding.top = computed_values.padding().top.resolved_or_zero(box, containing_block.width()).to_px(box);
box.box_model().padding.bottom = computed_values.padding().bottom.resolved_or_zero(box, containing_block.width()).to_px(box);
if (specified_height.is_auto() && !specified_top.is_auto() && !specified_bottom.is_auto()) {
if (specified_height.is_auto() && !specified_top.is_auto() && specified_bottom.is_auto()) {
const auto& margin = box.box_model().margin;
const auto& padding = box.box_model().padding;
const auto& border = box.box_model().border;
specified_height = CSS::Length(compute_auto_height_for_block_level_element(box), CSS::Length::Type::Px);
box.box_model().offset.bottom = containing_block.height() - specified_height.to_px(box) - specified_top.to_px(box) - margin.top - padding.top - border.top - margin.bottom - padding.bottom - border.bottom;
}
else if (specified_height.is_auto() && !specified_top.is_auto() && !specified_bottom.is_auto()) {
const auto& margin = box.box_model().margin;
const auto& padding = box.box_model().padding;
const auto& border = box.box_model().border;

1
Userland/Libraries/LibWeb/Layout/FormattingContext.h
View file

@ -58,6 +58,7 @@ protected:
float preferred_minimum_width { 0 };
};
static float compute_auto_height_for_block_level_element(const Box& box);
static float tentative_width_for_replaced_element(const ReplacedBox&, const CSS::Length& width);
static float tentative_height_for_replaced_element(const ReplacedBox&, const CSS::Length& width);