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

LibWeb: Make intrinsic heights dependent on available width

Browse source 
After speaking with fantasai at CSSWG about this, it turns out I had
misunderstood intrinsic heights. I originally believed all intrinsic
sizes had to be computed with no influence from the surrounding context.

As it turns out, intrinsic heights *are* influenced by the available
width, since it's needed to determine where lines break.

The APIs for calculating min-content and max-content heights now take
the available width as inputs. This instantly improves layout in many
cases where we'd previously make things way too wide.
This commit is contained in:
Andreas Kling 2022-10-03 23:37:38 +02:00
parent b4f9db84ca
commit b13a8706e1
5 changed files with 48 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

50
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -86,8 +86,7 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace c
m_available_space_for_flex_container = AxisAgnosticAvailableSpace {
.main = is_row_layout() ? available_width : available_height,
.cross = !is_row_layout() ? available_width : available_height,
.width = available_width,
.height = available_height,
.space = { available_width, available_height },
};
// This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
@ -95,6 +94,11 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace c
// 1. Generate anonymous flex items
generate_anonymous_flex_items();
// 2. Determine the available main and cross space for the flex items
float cross_min_size = has_cross_min_size(flex_container()) ? specified_cross_min_size(flex_container()) : 0;
float cross_max_size = has_cross_max_size(flex_container()) ? specified_cross_max_size(flex_container()) : INFINITY;
determine_available_space_for_items(AvailableSpace(available_width, available_height));
{
// https://drafts.csswg.org/css-flexbox-1/#definite-sizes
// 3. If a single-line flex container has a definite cross size,
@ -114,11 +118,6 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace c
}
}
// 2. Determine the available main and cross space for the flex items
float cross_min_size = has_cross_min_size(flex_container()) ? specified_cross_min_size(flex_container()) : 0;
float cross_max_size = has_cross_max_size(flex_container()) ? specified_cross_max_size(flex_container()) : INFINITY;
determine_available_space_for_items(AvailableSpace(available_width, available_height));
// 3. Determine the flex base size and hypothetical main size of each item
for (auto& flex_item : m_flex_items) {
if (flex_item.box.is_replaced_box()) {
@ -209,7 +208,7 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode, AvailableSpace c
copy_dimensions_from_flex_items_to_boxes();
for (auto& flex_item : m_flex_items) {
auto& box_state = m_state.get(flex_item.box);
if (auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(AvailableSpace(m_available_space_for_flex_container->width, m_available_space_for_flex_container->height))))
if (auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Normal, box_state.available_inner_space_or_constraints_from(m_available_space_for_flex_container->space)))
independent_formatting_context->parent_context_did_dimension_child_root_box();
}
@ -535,15 +534,13 @@ void FlexFormattingContext::determine_available_space_for_items(AvailableSpace c
m_available_space_for_items = AxisAgnosticAvailableSpace {
.main = *available_width_for_items,
.cross = *available_height_for_items,
.width = *available_width_for_items,
.height = *available_height_for_items,
.space = { *available_width_for_items, *available_height_for_items },
};
} else {
m_available_space_for_items = AxisAgnosticAvailableSpace {
.main = *available_height_for_items,
.cross = *available_width_for_items,
.width = *available_width_for_items,
.height = *available_height_for_items,
.space = { *available_width_for_items, *available_height_for_items },
};
}
}
@ -582,7 +579,7 @@ float FlexFormattingContext::calculate_indefinite_main_size(FlexItem const& item
VERIFY(independent_formatting_context);
box_state.set_content_width(fit_content_cross_size);
independent_formatting_context->run(item.box, LayoutMode::Normal, AvailableSpace(m_available_space_for_items->width, m_available_space_for_items->height));
independent_formatting_context->run(item.box, LayoutMode::Normal, m_available_space_for_items->space);
return independent_formatting_context->automatic_content_height();
}
@ -780,11 +777,10 @@ void FlexFormattingContext::determine_main_size_of_flex_container()
// FIXME: Once all parent contexts now how to size a given child, we can remove
// `can_determine_size_of_child()`.
if (parent()->can_determine_size_of_child()) {
AvailableSpace available_space(m_available_space_for_flex_container->width, m_available_space_for_flex_container->height);
if (is_row_layout()) {
parent()->determine_width_of_child(flex_container(), available_space);
parent()->determine_width_of_child(flex_container(), m_available_space_for_flex_container->space);
} else {
parent()->determine_height_of_child(flex_container(), available_space);
parent()->determine_height_of_child(flex_container(), m_available_space_for_flex_container->space);
}
return;
}
@ -796,13 +792,13 @@ void FlexFormattingContext::determine_main_size_of_flex_container()
if (is_row_layout()) {
if (!flex_container().is_out_of_flow(*parent()) && m_state.get(*flex_container().containing_block()).has_definite_width()) {
set_main_size(flex_container(), calculate_stretch_fit_width(flex_container(), m_available_space_for_flex_container->main));
set_main_size(flex_container(), calculate_stretch_fit_width(flex_container(), m_available_space_for_flex_container->space.width));
} else {
set_main_size(flex_container(), calculate_max_content_width(flex_container()));
}
} else {
if (!has_definite_main_size(flex_container()))
set_main_size(flex_container(), calculate_max_content_height(flex_container()));
set_main_size(flex_container(), calculate_max_content_height(flex_container(), m_available_space_for_flex_container->space.width));
}
}
@ -1060,7 +1056,7 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
// NOTE: Flex items should always create an independent formatting context!
VERIFY(independent_formatting_context);
independent_formatting_context->run(item.box, LayoutMode::Normal, AvailableSpace(m_available_space_for_items->width, m_available_space_for_items->height));
independent_formatting_context->run(item.box, LayoutMode::Normal, m_available_space_for_items->space);
auto automatic_cross_size = is_row_layout() ? independent_formatting_context->automatic_content_height()
: box_state.content_width();
@ -1660,34 +1656,34 @@ float FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem c
float FlexFormattingContext::calculate_min_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_min_content_width(item.box) : calculate_min_content_height(item.box);
return is_row_layout() ? calculate_min_content_width(item.box) : calculate_min_content_height(item.box, m_available_space_for_items->space.width);
}
float FlexFormattingContext::calculate_fit_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->main)
: calculate_fit_content_height(item.box, m_available_space_for_items->main);
return is_row_layout() ? calculate_fit_content_width(item.box, m_state.get(item.box).available_inner_space_or_constraints_from(m_available_space_for_items->space))
: calculate_fit_content_height(item.box, m_state.get(item.box).available_inner_space_or_constraints_from(m_available_space_for_items->space));
}
float FlexFormattingContext::calculate_fit_content_cross_size(FlexItem const& item) const
{
return !is_row_layout() ? calculate_fit_content_width(item.box, m_available_space_for_items->cross)
: calculate_fit_content_height(item.box, m_available_space_for_items->cross);
return !is_row_layout() ? calculate_fit_content_width(item.box, m_state.get(item.box).available_inner_space_or_constraints_from(m_available_space_for_items->space))
: calculate_fit_content_height(item.box, m_state.get(item.box).available_inner_space_or_constraints_from(m_available_space_for_items->space));
}
float FlexFormattingContext::calculate_max_content_main_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_max_content_width(item.box) : calculate_max_content_height(item.box);
return is_row_layout() ? calculate_max_content_width(item.box) : calculate_max_content_height(item.box, m_available_space_for_items->space.width);
}
float FlexFormattingContext::calculate_min_content_cross_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_min_content_height(item.box) : calculate_min_content_width(item.box);
return is_row_layout() ? calculate_min_content_height(item.box, m_available_space_for_items->space.width) : calculate_min_content_width(item.box);
}
float FlexFormattingContext::calculate_max_content_cross_size(FlexItem const& item) const
{
return is_row_layout() ? calculate_max_content_height(item.box) : calculate_max_content_width(item.box);
return is_row_layout() ? calculate_max_content_height(item.box, m_available_space_for_items->space.width) : calculate_max_content_width(item.box);
}
// https://drafts.csswg.org/css-flexbox-1/#stretched