mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-09 09:39:39 +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: 46649fbe1b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1255
3 changed files with 190 additions and 3 deletions
|
|
@ -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
|
// https://www.w3.org/TR/css-flexbox-1/#algo-line-break
|
||||||
void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
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 the flex container is single-line, collect all the flex items into a single flex line.
|
||||||
if (is_single_line()) {
|
if (is_single_line()) {
|
||||||
FlexLine line;
|
FlexLine line;
|
||||||
|
|
@ -810,6 +808,9 @@ void FlexFormattingContext::collect_flex_items_into_flex_lines()
|
||||||
line_main_size += main_gap();
|
line_main_size += main_gap();
|
||||||
}
|
}
|
||||||
m_flex_lines.append(move(line));
|
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
|
// 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) {
|
for (auto& item : flex_line.items) {
|
||||||
CSSPixels half_line_size = flex_line.cross_size / 2;
|
CSSPixels half_line_size = flex_line.cross_size / 2;
|
||||||
switch (alignment_for_item(item.box)) {
|
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:
|
case CSS::AlignItems::Baseline:
|
||||||
// FIXME: Implement this
|
// FIXME: Implement this
|
||||||
// Fallthrough
|
// Fallthrough
|
||||||
case CSS::AlignItems::Start:
|
case CSS::AlignItems::Start:
|
||||||
case CSS::AlignItems::FlexStart:
|
case CSS::AlignItems::FlexStart:
|
||||||
case CSS::AlignItems::Stretch:
|
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;
|
item.cross_offset = -half_line_size + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before;
|
||||||
break;
|
break;
|
||||||
case CSS::AlignItems::End:
|
case CSS::AlignItems::End:
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue