Skip to content

Flexbox: fix container baseline for column-reverse containers #1127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicoburns merged 1 commit into from
Aug 18, 2026
Merged

Flexbox: fix container baseline for column-reverse containers #1127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/compute/flexbox.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,15 +494,23 @@ fn compute_preliminary(tree: &mut impl LayoutFlexboxContainer, node: NodeId, inp

// 8.5. Flex Container Baselines: calculate the flex container's first baseline
// See https://www.w3.org/TR/css-flexbox-1/#flex-baselines
// For wrap-reverse containers the cross-start-most line is the last line rather than the first,
// and it is that line which the container's first baseline is generated from.
// The baselines are generated from the startmost flex line, where "startmost" refers to the
// line's visual position: for wrap-reverse containers the cross axis is flipped, so the
// startmost line is the last line in flex-line order rather than the first.
let first_line = if constants.is_wrap_reverse { flex_lines.last() } else { flex_lines.first() };
let first_vertical_baseline = first_line.and_then(|line| {
line.items
.iter()
.find(|item| constants.is_column || item.participates_in_baseline_alignment(constants.dir))
.or_else(|| line.items.iter().next())
.map(|child| child.baseline)
if constants.is_column {
// For column containers the baseline is generated from the startmost item in the line,
// which for reverse-direction containers is the last item in flex order.
let item = if constants.dir.is_reverse() { line.items.last() } else { line.items.first() };
item.map(|child| child.baseline)
} else {
line.items
.iter()
.find(|item| item.participates_in_baseline_alignment(constants.dir))
.or_else(|| line.items.iter().next())
.map(|child| child.baseline)
}
});

LayoutOutput::from_sizes_and_baselines(
Expand Down
22 changes: 22 additions & 0 deletions test_fixtures/flex/flex_container_baseline_column_reverse.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
The first baseline of a column-reverse flex container is generated from the startmost
(visually topmost) item, which is the last item in flex order.
</title>
</head>
<body>

<div id="test-root" style="width: 200px; height: 200px; align-items: baseline;">
<div style="width: 50px; height: 100px;"></div>
<div style="width: 60px; height: 90px; flex-direction: column-reverse;">
<div style="width: 60px; height: 20px;"></div>
<div style="width: 60px; height: 30px;"></div>
</div>
</div>

</body>
</html>
25 changes: 25 additions & 0 deletions test_fixtures/flex/flex_container_baseline_column_reverse_wrap_reverse.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
The first baseline of a multi-line column-reverse wrap-reverse flex container is generated
from the startmost item (last in flex order) of the startmost (visually leftmost) flex line,
which is the last line in flex-line order.
</title>
</head>
<body>

<div id="test-root" style="width: 300px; height: 200px; align-items: baseline;">
<div style="width: 50px; height: 150px;"></div>
<div style="width: 120px; height: 130px; flex-direction: column-reverse; flex-wrap: wrap-reverse; align-content: flex-start;">
<div style="width: 40px; height: 60px;"></div>
<div style="width: 40px; height: 60px;"></div>
<div style="width: 40px; height: 50px;"></div>
<div style="width: 40px; height: 40px;"></div>
</div>
</div>

</body>
</html>
24 changes: 24 additions & 0 deletions test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
The first baseline of a multi-line wrap-reverse flex container is generated from the first
flex line (in flex-line order), even though wrap-reverse places that line at the cross end.
</title>
</head>
<body>

<div id="test-root" style="width: 200px; height: 200px; align-items: baseline;">
<div style="width: 50px; height: 100px;"></div>
<div style="width: 100px; height: 120px; flex-wrap: wrap-reverse; align-items: baseline; align-content: flex-start;">
<div style="width: 60px; height: 20px;"></div>
<div style="width: 40px; height: 40px;"></div>
<div style="width: 60px; height: 30px;"></div>
<div style="width: 40px; height: 10px;"></div>
</div>
</div>

</body>
</html>
23 changes: 23 additions & 0 deletions test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_column.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
The first baseline of a multi-line wrap-reverse column flex container is generated from the
first flex line (in flex-line order), even though wrap-reverse places that line at the cross end.
</title>
</head>
<body>

<div id="test-root" style="width: 200px; height: 200px; align-items: baseline;">
<div style="width: 50px; height: 100px;"></div>
<div style="width: 120px; height: 100px; flex-direction: column; flex-wrap: wrap-reverse; align-content: flex-start;">
<div style="width: 40px; height: 60px;"></div>
<div style="width: 40px; height: 60px;"></div>
<div style="width: 40px; height: 60px;"></div>
</div>
</div>

</body>
</html>
24 changes: 24 additions & 0 deletions test_fixtures/flex/flex_container_baseline_wrap_reverse_multiline_text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
The first baseline of a multi-line wrap-reverse flex container with baseline-aligned items
containing text is generated from the first flex line (in flex-line order).
</title>
</head>
<body>

<div id="test-root" style="width: 300px; height: 200px; align-items: baseline;">
<div style="width: 50px; height: 100px;"></div>
<div style="width: 100px; height: 120px; flex-wrap: wrap-reverse; align-content: flex-start;">
<div style="width: 60px; align-self: baseline;">HH</div>
<div style="width: 40px; height: 40px;"></div>
<div style="width: 60px; height: 30px;"></div>
<div style="width: 40px; height: 10px;"></div>
</div>
</div>

</body>
</html>
21 changes: 21 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<test name="flex_container_baseline_column_reverse__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="ltr" align-items="baseline" width="200px" height="200px">
<div direction="ltr" width="50px" height="100px"/>
<div direction="ltr" flex-direction="column-reverse" width="60px" height="90px">
<div direction="ltr" width="60px" height="20px"/>
<div direction="ltr" width="60px" height="30px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="0" y="0" width="50" height="100"/>
<node x="50" y="30" width="60" height="90">
<node x="0" y="70" width="60" height="20"/>
<node x="0" y="40" width="60" height="30"/>
</node>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<test name="flex_container_baseline_column_reverse__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="rtl" align-items="baseline" width="200px" height="200px">
<div direction="rtl" width="50px" height="100px"/>
<div direction="rtl" flex-direction="column-reverse" width="60px" height="90px">
<div direction="rtl" width="60px" height="20px"/>
<div direction="rtl" width="60px" height="30px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="150" y="0" width="50" height="100"/>
<node x="90" y="30" width="60" height="90">
<node x="0" y="70" width="60" height="20"/>
<node x="0" y="40" width="60" height="30"/>
</node>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<test name="flex_container_baseline_column_reverse__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div box-sizing="content-box" direction="ltr" align-items="baseline" width="200px" height="200px">
<div box-sizing="content-box" direction="ltr" width="50px" height="100px"/>
<div box-sizing="content-box" direction="ltr" flex-direction="column-reverse" width="60px" height="90px">
<div box-sizing="content-box" direction="ltr" width="60px" height="20px"/>
<div box-sizing="content-box" direction="ltr" width="60px" height="30px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="0" y="0" width="50" height="100"/>
<node x="50" y="30" width="60" height="90">
<node x="0" y="70" width="60" height="20"/>
<node x="0" y="40" width="60" height="30"/>
</node>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<test name="flex_container_baseline_column_reverse__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div box-sizing="content-box" direction="rtl" align-items="baseline" width="200px" height="200px">
<div box-sizing="content-box" direction="rtl" width="50px" height="100px"/>
<div box-sizing="content-box" direction="rtl" flex-direction="column-reverse" width="60px" height="90px">
<div box-sizing="content-box" direction="rtl" width="60px" height="20px"/>
<div box-sizing="content-box" direction="rtl" width="60px" height="30px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="150" y="0" width="50" height="100"/>
<node x="90" y="30" width="60" height="90">
<node x="0" y="70" width="60" height="20"/>
<node x="0" y="40" width="60" height="30"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_column_reverse_wrap_reverse__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="ltr" align-items="baseline" width="300px" height="200px">
<div direction="ltr" width="50px" height="150px"/>
<div direction="ltr" flex-direction="column-reverse" flex-wrap="wrap-reverse" align-content="flex-start" width="120px" height="130px">
<div direction="ltr" width="40px" height="60px"/>
<div direction="ltr" width="40px" height="60px"/>
<div direction="ltr" width="40px" height="50px"/>
<div direction="ltr" width="40px" height="40px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="300" height="200">
<node x="0" y="0" width="50" height="150"/>
<node x="50" y="70" width="120" height="130">
<node x="80" y="70" width="40" height="60"/>
<node x="80" y="10" width="40" height="60"/>
<node x="40" y="80" width="40" height="50"/>
<node x="40" y="40" width="40" height="40"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_column_reverse_wrap_reverse__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="rtl" align-items="baseline" width="300px" height="200px">
<div direction="rtl" width="50px" height="150px"/>
<div direction="rtl" flex-direction="column-reverse" flex-wrap="wrap-reverse" align-content="flex-start" width="120px" height="130px">
<div direction="rtl" width="40px" height="60px"/>
<div direction="rtl" width="40px" height="60px"/>
<div direction="rtl" width="40px" height="50px"/>
<div direction="rtl" width="40px" height="40px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="300" height="200">
<node x="250" y="0" width="50" height="150"/>
<node x="130" y="70" width="120" height="130">
<node x="0" y="70" width="40" height="60"/>
<node x="0" y="10" width="40" height="60"/>
<node x="40" y="80" width="40" height="50"/>
<node x="40" y="40" width="40" height="40"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_column_reverse_wrap_reverse__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div box-sizing="content-box" direction="ltr" align-items="baseline" width="300px" height="200px">
<div box-sizing="content-box" direction="ltr" width="50px" height="150px"/>
<div box-sizing="content-box" direction="ltr" flex-direction="column-reverse" flex-wrap="wrap-reverse" align-content="flex-start" width="120px" height="130px">
<div box-sizing="content-box" direction="ltr" width="40px" height="60px"/>
<div box-sizing="content-box" direction="ltr" width="40px" height="60px"/>
<div box-sizing="content-box" direction="ltr" width="40px" height="50px"/>
<div box-sizing="content-box" direction="ltr" width="40px" height="40px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="300" height="200">
<node x="0" y="0" width="50" height="150"/>
<node x="50" y="70" width="120" height="130">
<node x="80" y="70" width="40" height="60"/>
<node x="80" y="10" width="40" height="60"/>
<node x="40" y="80" width="40" height="50"/>
<node x="40" y="40" width="40" height="40"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_column_reverse_wrap_reverse__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div box-sizing="content-box" direction="rtl" align-items="baseline" width="300px" height="200px">
<div box-sizing="content-box" direction="rtl" width="50px" height="150px"/>
<div box-sizing="content-box" direction="rtl" flex-direction="column-reverse" flex-wrap="wrap-reverse" align-content="flex-start" width="120px" height="130px">
<div box-sizing="content-box" direction="rtl" width="40px" height="60px"/>
<div box-sizing="content-box" direction="rtl" width="40px" height="60px"/>
<div box-sizing="content-box" direction="rtl" width="40px" height="50px"/>
<div box-sizing="content-box" direction="rtl" width="40px" height="40px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="300" height="200">
<node x="250" y="0" width="50" height="150"/>
<node x="130" y="70" width="120" height="130">
<node x="0" y="70" width="40" height="60"/>
<node x="0" y="10" width="40" height="60"/>
<node x="40" y="80" width="40" height="50"/>
<node x="40" y="40" width="40" height="40"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_wrap_reverse_multiline__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="ltr" align-items="baseline" width="200px" height="200px">
<div direction="ltr" width="50px" height="100px"/>
<div direction="ltr" flex-wrap="wrap-reverse" align-items="baseline" align-content="flex-start" width="100px" height="120px">
<div direction="ltr" width="60px" height="20px"/>
<div direction="ltr" width="40px" height="40px"/>
<div direction="ltr" width="60px" height="30px"/>
<div direction="ltr" width="40px" height="10px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="0" y="0" width="50" height="100"/>
<node x="50" y="20" width="100" height="120">
<node x="0" y="100" width="60" height="20"/>
<node x="60" y="80" width="40" height="40"/>
<node x="0" y="50" width="60" height="30"/>
<node x="60" y="70" width="40" height="10"/>
</node>
</node>
</expectations>
</test>
25 changes: 25 additions & 0 deletions tests/xml/flex/flex_container_baseline_wrap_reverse_multiline__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<test name="flex_container_baseline_wrap_reverse_multiline__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div direction="rtl" align-items="baseline" width="200px" height="200px">
<div direction="rtl" width="50px" height="100px"/>
<div direction="rtl" flex-wrap="wrap-reverse" align-items="baseline" align-content="flex-start" width="100px" height="120px">
<div direction="rtl" width="60px" height="20px"/>
<div direction="rtl" width="40px" height="40px"/>
<div direction="rtl" width="60px" height="30px"/>
<div direction="rtl" width="40px" height="10px"/>
</div>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="150" y="0" width="50" height="100"/>
<node x="50" y="20" width="100" height="120">
<node x="40" y="100" width="60" height="20"/>
<node x="0" y="80" width="40" height="40"/>
<node x="40" y="50" width="60" height="30"/>
<node x="0" y="70" width="40" height="10"/>
</node>
</node>
</expectations>
</test>
Loading