mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-22 09:12:13 -05:00
LibWeb: Don't add extra gap when placing flex items in reverse order
This commit is contained in:
aplefull
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
|
|
@ -1394,7 +1394,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
|
|
||||||
CSSPixels cursor_offset = initial_offset;
|
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.
|
// CSS-FLEXBOX-2: Account for gap between items.
|
||||||
auto amount_of_main_size_used = item.main_size.value()
|
auto amount_of_main_size_used = item.main_size.value()
|
||||||
+ item.margins.main_before
|
+ item.margins.main_before
|
||||||
|
|
@ -1403,8 +1403,15 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
+ item.margins.main_after
|
+ item.margins.main_after
|
||||||
+ item.borders.main_after
|
+ item.borders.main_after
|
||||||
+ item.padding.main_after
|
+ item.padding.main_after
|
||||||
+ space_between_items
|
+ space_between_items;
|
||||||
+ main_gap();
|
|
||||||
|
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) {
|
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;
|
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) {
|
if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
|
||||||
for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
|
for (ssize_t i = flex_line.items.size() - 1; i >= 0; --i) {
|
||||||
auto& item = flex_line.items[i];
|
auto& item = flex_line.items[i];
|
||||||
place_item(item);
|
place_item(item, i);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (size_t i = 0; i < flex_line.items.size(); ++i) {
|
for (size_t i = 0; i < flex_line.items.size(); ++i) {
|
||||||
auto& item = flex_line.items[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
46
Tests/LibWeb/Layout/expected/flex-justify-end-gap.txt
Normal 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
37
Tests/LibWeb/Layout/input/flex-justify-end-gap.html
Normal 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>
|
||||||
Loading…
Reference in a new issue