system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 18:46:18 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Initial offset in reverse flex layout moved to opposite side

Browse source 
This change moves the initial offset for justify-content: center to the
opposite side if the flex layout is in the reverse direction.
This commit is contained in:
Emil Militzer 2023-05-08 17:46:17 +02:00 committed by Andreas Kling
parent 6ae208dbf6
commit 8200d1f68b
3 changed files with 33 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Layout/expected/flex/flex-row-reverse-with-centered-content.txt Normal file
View file

@ -0,0 +1,19 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
Box <div.flex> at (8,8) content-size 784x50 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (425,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [425,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <div> at (375,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [375,8 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <div> at (325,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [325,8 9.09375x17.46875]
"3"
TextNode <#text>

11
Tests/LibWeb/Layout/input/flex/flex-row-reverse-with-centered-content.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html><style>
.flex {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.flex > div {
width: 50px;
height: 50px;
}</style><body><div class="flex"><div style="background-color: red;">1</div><div style="background-color: blue;">2</div><div style="background-color: yellow;">3</div>

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

@ -1268,6 +1268,9 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
break;
case CSS::JustifyContent::Center:
initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0f;
if (is_direction_reverse()) {
initial_offset = inner_main_size(flex_container()) - initial_offset;
}
break;
case CSS::JustifyContent::SpaceBetween:
space_between_items = flex_line.remaining_free_space / (number_of_items - 1);