LibWeb: Change flex remaining space distribution to include gap
The remaining space is in addition to, not of in place of the main gap.
This commit is contained in:
BenJilks
Andreas Kling
parent
80cd3712c2
commit
47aee289d8
Notes:
sideshowbarker
2024-07-17 04:32:07 +09:00
Author: https://github.com/BenJilks Commit: https://github.com/LadybirdBrowser/ladybird/commit/47aee289d8 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/437
3 changed files with 98 additions and 3 deletions
|
|
@ -0,0 +1,64 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x120 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 160x40 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (8,8) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (68,8) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (128,8) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,48) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (8,48) content-size 160x40 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (8,48) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (68,48) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (128,48) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,88) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (8,88) content-size 160x40 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (8,88) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (68,88) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (128,88) content-size 40x40 flex-item [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,128) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x120]
|
||||
PaintableBox (Box<DIV>.container) [8,8 160x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [8,8 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [68,8 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [128,8 40x40]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,48 784x0]
|
||||
PaintableBox (Box<DIV>.container) [8,48 160x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [8,48 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [68,48 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [128,48 40x40]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,88 784x0]
|
||||
PaintableBox (Box<DIV>.container) [8,88 160x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [8,88 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [68,88 40x40]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [128,88 40x40]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,128 784x0]
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: crimson;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" style="justify-content: space-between">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: space-around">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: space-evenly">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
|
|
@ -1231,8 +1231,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
|||
}
|
||||
|
||||
// 12.2.
|
||||
// CSS-FLEXBOX-2: Account for gap between items.
|
||||
CSSPixels space_between_items = main_gap();
|
||||
CSSPixels space_between_items = 0;
|
||||
CSSPixels initial_offset = 0;
|
||||
auto number_of_items = flex_line.items.size();
|
||||
|
||||
|
|
@ -1334,6 +1333,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
|||
CSSPixels cursor_offset = initial_offset;
|
||||
|
||||
auto place_item = [&](FlexItem& item) {
|
||||
// CSS-FLEXBOX-2: Account for gap between items.
|
||||
auto amount_of_main_size_used = item.main_size.value()
|
||||
+ item.margins.main_before
|
||||
+ item.borders.main_before
|
||||
|
|
@ -1341,7 +1341,8 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
|||
+ item.margins.main_after
|
||||
+ item.borders.main_after
|
||||
+ item.padding.main_after
|
||||
+ space_between_items;
|
||||
+ space_between_items
|
||||
+ 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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue