mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-06 16:19:23 +00:00
LibWeb: Only reverse each line of a reverse flex-direction
When a flex container with a reverse `flex-direction` is wrapped. Only each line should be reversed, not all items.
This commit is contained in:
BenJilks
Andreas Kling
parent
0f9444fa06
commit
e2c1fe7255
Notes:
github-actions[bot]
2024-09-02 15:43:09 +00:00
Author: https://github.com/BenJilks
Commit: e2c1fe7255
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1255
5 changed files with 139 additions and 10 deletions
|
|
@ -0,0 +1,38 @@
|
|||
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 784x252 children: not-inline
|
||||
Box <div.container.column> at (9,9) content-size 250x250 flex-container(column-reverse) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,158) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,158 6.34375x17] baseline: 13.296875
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,56) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,56 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (135,158) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [135,158 9.09375x17] baseline: 13.296875
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,260) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x252]
|
||||
PaintableBox (Box<DIV>.container.column) [8,8 252x252]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,157 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,55 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [134,157 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,260 784x0]
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
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 784x206 children: not-inline
|
||||
Box <div.container> at (9,9) content-size 250x204 flex-container(row-reverse) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (158,10) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [158,10 6.34375x17] baseline: 13.296875
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (56,10) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [56,10 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (158,112) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [158,112 9.09375x17] baseline: 13.296875
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,214) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x206]
|
||||
PaintableBox (Box<DIV>.container) [8,8 252x206]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [157,9 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [55,9 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [157,111 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,214 784x0]
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
flex-direction: column-reverse;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
|
@ -295,18 +295,12 @@ void FlexFormattingContext::generate_anonymous_flex_items()
|
|||
auto order_bucket = order_item_bucket.get(key);
|
||||
if (order_bucket.has_value()) {
|
||||
auto& items = order_bucket.value();
|
||||
if (is_direction_reverse()) {
|
||||
for (auto item : items.in_reverse()) {
|
||||
m_flex_items.append(move(item));
|
||||
}
|
||||
} else {
|
||||
for (auto item : items) {
|
||||
m_flex_items.append(move(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bool FlexFormattingContext::has_definite_main_size(LayoutState::UsedValues const& used_values) const
|
||||
{
|
||||
|
|
@ -776,8 +770,12 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
|||
if (is_single_line()) {
|
||||
FlexLine line;
|
||||
for (auto& item : m_flex_items) {
|
||||
if (is_direction_reverse()) {
|
||||
line.items.prepend(item);
|
||||
} else {
|
||||
line.items.append(item);
|
||||
}
|
||||
}
|
||||
m_flex_lines.append(move(line));
|
||||
return;
|
||||
}
|
||||
|
|
@ -800,7 +798,13 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
|||
line = {};
|
||||
line_main_size = 0;
|
||||
}
|
||||
|
||||
if (is_direction_reverse()) {
|
||||
line.items.prepend(item);
|
||||
} else {
|
||||
line.items.append(item);
|
||||
}
|
||||
|
||||
line_main_size += outer_hypothetical_main_size;
|
||||
// CSS-FLEXBOX-2: Account for gap between flex items.
|
||||
line_main_size += main_gap();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue