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: Handle flex reverse togther with justify-content

Browse source 
Containers with both flex reverse and justify content would
sometimes place children outside the container. This happened
because it assumed any reversed container would have items
aligned to the right, which isn't true when using eg. `flex-end`.

Both `justify-content: start` and `justify-content: end` are now
also independent of the reverseness.
This commit is contained in:
PaddiM8 2023-07-25 23:51:29 +02:00 • committed by Andreas Kling
parent 6266976e7a
commit a26f2f0aab
2 changed files with 48 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1303,6 +1303,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
if (auto_margins == 0 && number_of_items > 0) {
switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start:
initial_offset = 0;
break;
case CSS::JustifyContent::FlexStart:
if (is_direction_reverse()) {
initial_offset = inner_main_size(flex_container());
@ -1311,6 +1313,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
}
break;
case CSS::JustifyContent::End:
initial_offset = inner_main_size(flex_container());
break;
case CSS::JustifyContent::FlexEnd:
if (is_direction_reverse()) {
initial_offset = 0;
@ -1364,13 +1368,18 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start:
case CSS::JustifyContent::FlexStart:
case CSS::JustifyContent::Center:
case CSS::JustifyContent::SpaceAround:
case CSS::JustifyContent::SpaceBetween:
case CSS::JustifyContent::SpaceEvenly:
if (is_direction_reverse()) {
flex_region_render_cursor = FlexRegionRenderCursor::Right;
}
break;
case CSS::JustifyContent::End:
flex_region_render_cursor = FlexRegionRenderCursor::Right;
break;
case CSS::JustifyContent::FlexEnd:
if (!is_direction_reverse()) {
flex_region_render_cursor = FlexRegionRenderCursor::Right;
@ -1392,7 +1401,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
+ item.padding.main_after
+ space_between_items;
if (is_direction_reverse()) {
if (is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) {
item.main_offset = cursor_offset - item.main_size.value() - item.margins.main_after - item.borders.main_after - item.padding.main_after;
cursor_offset -= amount_of_main_size_used;
} else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
@ -1404,7 +1413,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
}
};
if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) {
if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
auto& item = flex_line.items[i];
place_item(item);