mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
LibWeb: Add support for flex-wrap: wrap-reverse
Reverse the order of flex lines, when the `flex-wrap` property is set to `wrap-reverse`. This will also swap the cross-start and cross-end directions.
This commit is contained in:
BenJilks
Andreas Kling
parent
e2c1fe7255
commit
46649fbe1b
Notes:
github-actions[bot]
2024-09-02 15:43:01 +00:00
Author: https://github.com/BenJilks Commit: https://github.com/LadybirdBrowser/ladybird/commit/46649fbe1b0 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1255
|
|
@ -0,0 +1,131 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x1024 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x1008 children: not-inline
|
||||
Box <div.row> at (9,9) content-size 250x250 flex-container(row) [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 (112,158) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [112,158 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,33) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,33 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>
|
||||
Box <div.column> at (9,261) content-size 250x250 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (158,262) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [158,262 6.34375x17] baseline: 13.296875
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (158,364) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [158,364 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (33,262) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [33,262 9.09375x17] baseline: 13.296875
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,512) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.row.start> at (9,513) content-size 250x250 flex-container(row) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,639) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,639 6.34375x17] baseline: 13.296875
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (112,639) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [112,639 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,514) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,514 9.09375x17] baseline: 13.296875
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,764) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
Box <div.column.start> at (9,765) content-size 250x250 flex-container(column) [FFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (135,766) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [135,766 6.34375x17] baseline: 13.296875
|
||||
"1"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (135,868) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [135,868 8.8125x17] baseline: 13.296875
|
||||
"2"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.box> at (10,766) content-size 100x100 flex-item [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 1, rect: [10,766 9.09375x17] baseline: 13.296875
|
||||
"3"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,1016) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1024]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x1024]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x1008]
|
||||
PaintableBox (Box<DIV>.row) [8,8 252x252]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,157 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [111,157 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,32 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,260 784x0]
|
||||
PaintableBox (Box<DIV>.column) [8,260 252x252]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [157,261 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [157,363 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [32,261 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,512 784x0]
|
||||
PaintableBox (Box<DIV>.row.start) [8,512 252x252]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,638 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [111,638 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,513 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,764 784x0]
|
||||
PaintableBox (Box<DIV>.column.start) [8,764 252x252]
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [134,765 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [134,867 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>.box) [9,765 102x102]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,1016 784x0]
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<style>
|
||||
.row, .column {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.start {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="row">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<div class="row start">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<div class="column start">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
|
@ -764,8 +764,6 @@ CSSPixels FlexFormattingContext::content_based_minimum_size(FlexItem const& item
|
|||
// https://www.w3.org/TR/css-flexbox-1/#algo-line-break
|
||||
void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
||||
{
|
||||
// FIXME: Also support wrap-reverse
|
||||
|
||||
// If the flex container is single-line, collect all the flex items into a single flex line.
|
||||
if (is_single_line()) {
|
||||
FlexLine line;
|
||||
|
|
@ -810,6 +808,9 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
|||
line_main_size += main_gap();
|
||||
}
|
||||
m_flex_lines.append(move(line));
|
||||
|
||||
if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse)
|
||||
m_flex_lines.reverse();
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
|
||||
|
|
@ -1446,13 +1447,21 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
|
|||
for (auto& item : flex_line.items) {
|
||||
CSSPixels half_line_size = flex_line.cross_size / 2;
|
||||
switch (alignment_for_item(item.box)) {
|
||||
case CSS::AlignItems::Normal:
|
||||
// https://drafts.csswg.org/css-flexbox/#flex-wrap-property
|
||||
// When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.
|
||||
if (flex_container().computed_values().flex_wrap() == CSS::FlexWrap::WrapReverse) {
|
||||
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
|
||||
} else {
|
||||
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
|
||||
}
|
||||
break;
|
||||
case CSS::AlignItems::Baseline:
|
||||
// FIXME: Implement this
|
||||
// Fallthrough
|
||||
case CSS::AlignItems::Start:
|
||||
case CSS::AlignItems::FlexStart:
|
||||
case CSS::AlignItems::Stretch:
|
||||
case CSS::AlignItems::Normal:
|
||||
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
|
||||
break;
|
||||
case CSS::AlignItems::End:
|
||||
|
|
|
|||
Loading…
Reference in a new issue