RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 19:37:36 +00:00
Code Issues Activity Actions

LibWeb: Fix flex line alignment in single-line flex containers

Browse source 
For single-line flex containers, center the only flex line along the
cross axis. Alignment of multi-line flex containers are left as a FIXME.

This patch also moves out the assignment of final metrics to the
FormattingState from align_all_flex_lines() to a separate function.
This commit is contained in:
Andreas Kling 2022-02-27 23:58:54 +01:00
parent 1dfb3d555c
commit a3a10b2379
2 changed files with 20 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -148,16 +148,17 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode)
align_all_flex_lines(); align_all_flex_lines();
// AD-HOC: Layout the inside of all flex items. // AD-HOC: Layout the inside of all flex items.
copy_dimensions_from_flex_items_to_boxes();
for (auto& flex_item : m_flex_items) { for (auto& flex_item : m_flex_items) {
auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Default); auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Default);
independent_formatting_context->parent_context_did_dimension_child_root_box(); independent_formatting_context->parent_context_did_dimension_child_root_box();
} }
// FIXME: We run the "align all flex lines" step *again* here, in order to override any sizes // FIXME: We run the "copy dimensions" step *again* here, in order to override any sizes
// assigned to the flex item by the "layout inside" step above. This is definitely not // assigned to the flex item by the "layout inside" step above. This is definitely not
// part of the spec, and simply covering up the fact that our inside layout currently // part of the spec, and simply covering up the fact that our inside layout currently
// mutates the height of BFC roots. // mutates the height of BFC roots.
align_all_flex_lines(); copy_dimensions_from_flex_items_to_boxes();
} }
void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
@ -1004,15 +1005,24 @@ void FlexFormattingContext::determine_flex_container_used_cross_size(float const
// https://www.w3.org/TR/css-flexbox-1/#algo-line-align // https://www.w3.org/TR/css-flexbox-1/#algo-line-align
void FlexFormattingContext::align_all_flex_lines() void FlexFormattingContext::align_all_flex_lines()
{ {
// FIXME: Support align-content
// FIXME: Support reverse // FIXME: Support reverse
for (auto& flex_line : m_flex_lines) { if (is_single_line()) {
for (auto* flex_item : flex_line.items) { // For single-line flex containers, we only need to center the line along the cross axis.
set_main_size(flex_item->box, flex_item->main_size); auto& flex_line = m_flex_lines[0];
set_cross_size(flex_item->box, flex_item->cross_size); float cross_size_of_flex_container = specified_cross_size(flex_container());
set_offset(flex_item->box, flex_item->main_offset, flex_item->cross_offset); for (auto* flex_item : flex_line.items)
} flex_item->cross_offset += (cross_size_of_flex_container / 2.0f) - (flex_line.cross_size / 2.0f);
} else {
// FIXME: Support align-content
} }
} }
void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes()
{
for (auto& flex_item : m_flex_items) {
set_main_size(flex_item.box, flex_item.main_size);
set_cross_size(flex_item.box, flex_item.cross_size);
set_offset(flex_item.box, flex_item.main_offset, flex_item.cross_offset);
}
}
} }

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

@ -81,6 +81,7 @@ private:
void set_main_axis_second_margin(Box const&, float margin); void set_main_axis_second_margin(Box const&, float margin);
void setup_initial_width_and_height(); void setup_initial_width_and_height();
void copy_dimensions_from_flex_items_to_boxes();
void generate_anonymous_flex_items(); void generate_anonymous_flex_items();