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

LibWeb: Account for box-sizing:border-box in layout-less definite sizes

Browse source 
When we determine that a size is definite because it can be resolved now
without performing layout, we also need to account for the box-sizing
property.

This lets us remove a hack from flex layout where box-sizing:border-box
was manually undone at one point in the layout algorithm.
This commit is contained in:
Andreas Kling 2023-05-02 06:51:32 +02:00
parent deea7cbc11
commit 00e3e82bbd
4 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

31
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -229,6 +229,29 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
auto const& computed_values = node.computed_values();
auto adjust_for_box_sizing = [&](CSSPixels unadjusted_pixels, CSS::Size const& computed_size, bool width) -> CSSPixels {
// box-sizing: content-box and/or automatic size don't require any adjustment.
if (computed_values.box_sizing() == CSS::BoxSizing::ContentBox || computed_size.is_auto())
return unadjusted_pixels;
// box-sizing: border-box requires us to subtract the relevant border and padding from the size.
CSSPixels border_and_padding;
if (width) {
border_and_padding = CSSPixels(computed_values.border_left().width)
+ computed_values.padding().left().resolved(*m_node, CSS::Length::make_px(containing_block_used_values->content_width())).resolved(*m_node).to_px(*m_node)
+ CSSPixels(computed_values.border_right().width)
+ computed_values.padding().right().resolved(*m_node, CSS::Length::make_px(containing_block_used_values->content_width())).resolved(*m_node).to_px(*m_node);
} else {
border_and_padding = CSSPixels(computed_values.border_top().width)
+ computed_values.padding().top().resolved(*m_node, CSS::Length::make_px(containing_block_used_values->content_width())).resolved(*m_node).to_px(*m_node)
+ CSSPixels(computed_values.border_bottom().width)
+ computed_values.padding().bottom().resolved(*m_node, CSS::Length::make_px(containing_block_used_values->content_width())).resolved(*m_node).to_px(*m_node);
}
return unadjusted_pixels - border_and_padding;
};
auto is_definite_size = [&](CSS::Size const& size, CSSPixels& resolved_definite_size, bool width) {
// A size that can be determined without performing layout; that is,
// a <length>,
@ -270,22 +293,22 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
auto containing_block_size_as_length = width
? CSS::Length::make_px(containing_block_used_values->content_width())
: CSS::Length::make_px(containing_block_used_values->content_height());
resolved_definite_size = size.calculated().resolve_length_percentage(node, containing_block_size_as_length).value_or(CSS::Length::make_auto()).to_px(node);
resolved_definite_size = adjust_for_box_sizing(size.calculated().resolve_length_percentage(node, containing_block_size_as_length).value_or(CSS::Length::make_auto()).to_px(node), size, width);
return true;
}
resolved_definite_size = size.calculated().resolve_length(node)->to_px(node);
resolved_definite_size = adjust_for_box_sizing(size.calculated().resolve_length(node)->to_px(node), size, width);
return true;
}
if (size.is_length()) {
VERIFY(!size.is_auto()); // This should have been covered by the Size::is_auto() branch above.
resolved_definite_size = size.length().to_px(node);
resolved_definite_size = adjust_for_box_sizing(size.length().to_px(node), size, width);
return true;
}
if (size.is_percentage()) {
if (containing_block_has_definite_size) {
auto containing_block_size = width ? containing_block_used_values->content_width() : containing_block_used_values->content_height();
resolved_definite_size = containing_block_size * size.percentage().as_fraction();
resolved_definite_size = adjust_for_box_sizing(containing_block_size * size.percentage().as_fraction(), size, width);
return true;
}
return false;