mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-01-22 09:12:13 -05:00
Code Issues Projects Releases Packages Wiki Activity

LibWeb: Don't add extra gap when placing flex items in reverse order

Browse source
This commit is contained in:
aplefull 2025-01-16 12:51:06 +01:00 committed by Andreas Kling
parent ac9670fb55
commit 50445dc9ef
Notes: github-actions[bot] 2025-01-17 09:11:34 +00:00 
Author: https://github.com/aplefull 🔰
Commit: https://github.com/LadybirdBrowser/ladybird/commit/50445dc9efc
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3273
3 changed files with 95 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -1394,7 +1394,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
CSSPixels cursor_offset = initial_offset;
auto place_item = [&](FlexItem& item) {
auto place_item = [&](FlexItem& item, size_t index) {
// CSS-FLEXBOX-2: Account for gap between items.
auto amount_of_main_size_used = item.main_size.value()
+ item.margins.main_before
@ -1403,8 +1403,15 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
+ item.margins.main_after
+ item.borders.main_after
+ item.padding.main_after
+ space_between_items
+ main_gap();
+ space_between_items;
if (!is_direction_reverse() && flex_region_render_cursor == FlexRegionRenderCursor::Right) {
if (index < flex_line.items.size() - 1) {
amount_of_main_size_used += main_gap();
}
} else {
amount_of_main_size_used += main_gap();
}
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;
@ -1421,12 +1428,12 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
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);
place_item(item, i);
}
} else {
for (size_t i = 0; i < flex_line.items.size(); ++i) {
auto& item = flex_line.items[i];
place_item(item);
place_item(item, i);
}
}
}

46
Tests/LibWeb/Layout/expected/flex-justify-end-gap.txt Normal file
View file

@ -0,0 +1,46 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x474 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x458 children: not-inline
Box <div.container.col> at (10,10) content-size 50x400 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (10,160) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (10,260) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (10,360) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,412) content-size 784x0 children: inline
TextNode <#text>
Box <div.container.row> at (10,414) content-size 400x50 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (160,414) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (260,414) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (360,414) content-size 50x50 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,466) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x474]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x458]
PaintableBox (Box<DIV>.container.col) [8,8 54x404]
PaintableWithLines (BlockContainer<DIV>.item) [10,160 50x50]
PaintableWithLines (BlockContainer<DIV>.item) [10,260 50x50]
PaintableWithLines (BlockContainer<DIV>.item) [10,360 50x50]
PaintableWithLines (BlockContainer(anonymous)) [8,412 784x0]
PaintableBox (Box<DIV>.container.row) [8,412 404x54]
PaintableWithLines (BlockContainer<DIV>.item) [160,414 50x50]
PaintableWithLines (BlockContainer<DIV>.item) [260,414 50x50]
PaintableWithLines (BlockContainer<DIV>.item) [360,414 50x50]
PaintableWithLines (BlockContainer(anonymous)) [8,466 784x0]

37
Tests/LibWeb/Layout/input/flex-justify-end-gap.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<div class="container col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.container {
display: flex;
gap: 50px;
border: 2px solid black;
}
.item {
width: 50px;
height: 50px;
background: crimson;
}
.col {
flex-direction: column;
justify-content: flex-end;
height: 400px;
width: fit-content;
}
.row {
flex-direction: row;
justify-content: flex-end;
width: 400px;
}
</style>