0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Fix reverse flex layout with justify-content: normal

Browse source 
Before this change, we used the wrong insertion point for flex items
in reverse layouts with `justify-content: normal`. This caused flex
items to overflow the flex containers "backwards" from the start edge.
This commit is contained in:
Andreas Kling 2024-01-08 11:29:53 +01:00
parent 6480ed20b8
commit aa245f9f18
Notes: sideshowbarker 2024-07-17 02:37:08 +09:00
3 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Tests/LibWeb/Layout/expected/flex/reverse-with-justify-content-normal.txt Normal file
View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x416 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x400 children: not-inline
Box <div.flex.row> at (8,8) content-size 200x200 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div.item> at (108,8) content-size 100x100 flex-item [BFC] children: not-inline
Box <div.flex.column> at (8,208) content-size 200x200 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div.item> at (8,308) content-size 100x100 flex-item [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x416]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x400]
PaintableBox (Box<DIV>.flex.row) [8,8 200x200]
PaintableWithLines (BlockContainer<DIV>.item) [108,8 100x100]
PaintableBox (Box<DIV>.flex.column) [8,208 200x200]
PaintableWithLines (BlockContainer<DIV>.item) [8,308 100x100]

23
Tests/LibWeb/Layout/input/flex/reverse-with-justify-content-normal.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html><style type="text/css">
* {
outline: 1px solid black;
}
.row {
flex-direction: row-reverse;
}
.column {
flex-direction: column-reverse;
}
.flex {
display: flex;
width: 200px;
height: 200px;
background: pink;
justify-content: normal;
}
.item {
width: 100px;
height: 100px;
background: orange;
}
</style><body><div class="flex row"><div class="item"></div></div><div class="flex column"><div class="item"></div></div>

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

@ -1319,10 +1319,10 @@ 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:
case CSS::JustifyContent::Stretch:
case CSS::JustifyContent::Normal:
initial_offset = 0;
break;
case CSS::JustifyContent::Stretch:
case CSS::JustifyContent::Normal:
case CSS::JustifyContent::FlexStart:
if (is_direction_reverse()) {
initial_offset = inner_main_size(flex_container());
@ -2225,10 +2225,10 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
CSSPixels main_offset = 0;
switch (flex_container().computed_values().justify_content()) {
case CSS::JustifyContent::Start:
case CSS::JustifyContent::Stretch:
case CSS::JustifyContent::Normal:
pack_from_end = false;
break;
case CSS::JustifyContent::Stretch:
case CSS::JustifyContent::Normal:
case CSS::JustifyContent::FlexStart:
case CSS::JustifyContent::SpaceBetween:
pack_from_end = is_direction_reverse();