Skip to content

Flexbox: resolve cross-axis stretch against a definite container when sizing flex lines #1290

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

Open
nicoburns wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Flexbox: resolve cross-axis stretch against a definite container when sizing flex lines #1290

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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@
- Grid: a percentage min track sizing function (e.g. `minmax(20%, 100px)`) is now treated as `auto` rather than `min-content` while the size of the grid container is indefinite, so the automatic minimum size of the items in the track is clamped by a fixed max track sizing function.
- Block: `Layout::margin` of an in-flow block child now holds the child's own top and bottom margins. Previously it held the result of collapsing them with the margins of descendants that collapse through the child's edges (e.g. `margin-top: 8px` with a first child with `margin-top: 13px` reported `13px`). Positions are unchanged.
- Block: when resolving `height: stretch` on an in-flow child of a block container, each of the child's vertical margins is now treated as zero if it could collapse through the corresponding edge of the container, i.e. the container has neither border nor padding on that side and does not establish a new block formatting context (csswg-drafts [#11044](https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601), [#13260](https://github.com/w3c/csswg-drafts/issues/13260)). Previously both margins were always subtracted, so e.g. a `height: stretch; margin: 10px` child of a border-less `height: 200px` block was 180px tall rather than 200px (WPT `css/css-sizing/stretch/block-height-002`, `-004`, `-005`, `-007`).
- Flexbox: a cross size of `stretch` now resolves against the container's cross size when sizing the flex lines if that size is definite, rather than contributing the item's content size (csswg-drafts [#11784](https://github.com/w3c/csswg-drafts/issues/11784)). The item is still stretched to its flex line afterwards (WPT `css/css-sizing/stretch/flex-line-003`).

## 0.14.0

Expand Down
16 changes: 11 additions & 5 deletions src/compute/flexbox.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1923,22 +1923,28 @@ fn determine_hypothetical_cross_size(

// A cross size that is a sizing keyword (min-content, max-content, fit-content,
// fit-content(...)) determines the available space constraint the item is measured under.
// The `stretch` keyword is not resolved here: it stretches to the flex line, which is
// handled in `determine_used_cross_size`
// If the container has a definite cross size then the `stretch` keyword resolves against
// it for the purpose of sizing the flex lines (https://github.com/w3c/csswg-drafts/issues/11784).
// Otherwise it is not resolved here. In both cases the item is then stretched to its
// flex line in `determine_used_cross_size`.
let cross_stretch_size = constants
.node_inner_size
.cross(constants.dir)
.map(|val| constants.divided_cross_space(val))
.maybe_sub(child.margin.cross_axis_sum(constants.dir))
.maybe_max(0.0);
let child_available_cross = match resolve_sizing_keyword(
let (child_cross, child_available_cross) = match resolve_sizing_keyword(
child.size_style.cross(constants.dir),
cross_stretch_size,
constants.node_inner_size.cross(constants.dir),
|val, basis| tree.calc(val, basis),
) {
Some(SizingKeywordResolution::Measure(available)) => available,
_ => child_available_cross,
Some(SizingKeywordResolution::Measure(available)) => (child_cross, available),
Some(SizingKeywordResolution::Exact(size)) if constants.has_definite_cross_size => (
Some(size.maybe_clamp(transferred_min_cross, transferred_max_cross).max(padding_border_sum)),
child_available_cross,
),
_ => (child_cross, child_available_cross),
};

let child_inner_cross = child_cross.unwrap_or_else(|| {
Expand Down
18 changes: 18 additions & 0 deletions test_fixtures/flex/flex_row_item_height_stretch_definite_container_align_start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!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>
Test description
</title>
</head>
<body>

<div id="test-root" style="display: flex; align-items: start; width: 100px; height: 100px;">
<div style="height: stretch; width: 30px; margin: 5px;">HH</div>
<div style="height: 150px; width: 10px;"></div>
</div>

</body>
</html>
18 changes: 18 additions & 0 deletions test_fixtures/flex/flex_wrap_column_item_width_stretch_definite_container.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!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>
Test description
</title>
</head>
<body>

<div id="test-root" style="display: flex; flex-direction: column; flex-wrap: wrap; align-content: start; width: 100px; height: 100px;">
<div style="width: stretch; height: 75px;">HH</div>
<div style="width: stretch; height: 75px;">HH</div>
</div>

</body>
</html>
19 changes: 19 additions & 0 deletions test_fixtures/flex/flex_wrap_column_item_width_stretch_definite_container_wide_sibling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!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>
Test description
</title>
</head>
<body>

<div id="test-root" style="display: flex; flex-direction: column; flex-wrap: wrap; align-content: start; width: 100px; height: 100px;">
<div style="width: stretch; height: 75px; margin: 0px 5px;">HH</div>
<div style="width: 150px; height: 5px;"></div>
<div style="width: stretch; height: 75px; margin: 0px 5px;">HH</div>
</div>

</body>
</html>
18 changes: 18 additions & 0 deletions test_fixtures/flex/flex_wrap_row_item_height_stretch_definite_container.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!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>
Test description
</title>
</head>
<body>

<div id="test-root" style="display: flex; flex-wrap: wrap; align-content: start; width: 100px; height: 100px;">
<div style="height: stretch; width: 75px;">HH</div>
<div style="height: stretch; width: 75px;">HH</div>
</div>

</body>
</html>
19 changes: 19 additions & 0 deletions test_fixtures/flex/flex_wrap_row_item_height_stretch_indefinite_container.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!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>
Test description
</title>
</head>
<body>

<div id="test-root" style="display: flex; flex-wrap: wrap; align-content: start; width: 100px;">
<div style="height: stretch; width: 75px;">HH</div>
<div style="height: 50px; width: 10px;"></div>
<div style="height: stretch; width: 75px;">HH</div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions .../xml/flex/flex_row_item_height_stretch_definite_container_align_start__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<test name="flex_row_item_height_stretch_definite_container_align_start__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="ltr" position="absolute" align-items="start" width="100px" height="100px">
<text direction="ltr" position="relative" width="30px" height="stretch" margin-top="5px" margin-left="5px" margin-bottom="5px" margin-right="5px">
HH
</text>
<div direction="ltr" position="relative" width="10px" height="150px"/>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="5" y="5" width="30" height="90"/>
<node x="40" y="0" width="10" height="150"/>
</node>
</expectations>
</test>
17 changes: 17 additions & 0 deletions .../xml/flex/flex_row_item_height_stretch_definite_container_align_start__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<test name="flex_row_item_height_stretch_definite_container_align_start__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="rtl" position="absolute" align-items="start" width="100px" height="100px">
<text direction="rtl" position="relative" width="30px" height="stretch" margin-top="5px" margin-left="5px" margin-bottom="5px" margin-right="5px">
HH
</text>
<div direction="rtl" position="relative" width="10px" height="150px"/>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="65" y="5" width="30" height="90"/>
<node x="50" y="0" width="10" height="150"/>
</node>
</expectations>
</test>
17 changes: 17 additions & 0 deletions ...xml/flex/flex_row_item_height_stretch_definite_container_align_start__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<test name="flex_row_item_height_stretch_definite_container_align_start__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="ltr" position="absolute" align-items="start" width="100px" height="100px">
<text box-sizing="content-box" direction="ltr" position="relative" width="30px" height="stretch" margin-top="5px" margin-left="5px" margin-bottom="5px" margin-right="5px">
HH
</text>
<div box-sizing="content-box" direction="ltr" position="relative" width="10px" height="150px"/>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="5" y="5" width="30" height="90"/>
<node x="40" y="0" width="10" height="150"/>
</node>
</expectations>
</test>
17 changes: 17 additions & 0 deletions ...xml/flex/flex_row_item_height_stretch_definite_container_align_start__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<test name="flex_row_item_height_stretch_definite_container_align_start__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="rtl" position="absolute" align-items="start" width="100px" height="100px">
<text box-sizing="content-box" direction="rtl" position="relative" width="30px" height="stretch" margin-top="5px" margin-left="5px" margin-bottom="5px" margin-right="5px">
HH
</text>
<div box-sizing="content-box" direction="rtl" position="relative" width="10px" height="150px"/>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="65" y="5" width="30" height="90"/>
<node x="50" y="0" width="10" height="150"/>
</node>
</expectations>
</test>
19 changes: 19 additions & 0 deletions tests/xml/flex/flex_wrap_column_item_width_stretch_definite_container__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<test name="flex_wrap_column_item_width_stretch_definite_container__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="ltr" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text direction="ltr" position="relative" width="stretch" height="75px">
HH
</text>
<text direction="ltr" position="relative" width="stretch" height="75px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="0" y="0" width="100" height="75"/>
<node x="100" y="0" width="100" height="75"/>
</node>
</expectations>
</test>
19 changes: 19 additions & 0 deletions tests/xml/flex/flex_wrap_column_item_width_stretch_definite_container__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<test name="flex_wrap_column_item_width_stretch_definite_container__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="rtl" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text direction="rtl" position="relative" width="stretch" height="75px">
HH
</text>
<text direction="rtl" position="relative" width="stretch" height="75px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="0" y="0" width="100" height="75"/>
<node x="-100" y="0" width="100" height="75"/>
</node>
</expectations>
</test>
19 changes: 19 additions & 0 deletions tests/xml/flex/flex_wrap_column_item_width_stretch_definite_container__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<test name="flex_wrap_column_item_width_stretch_definite_container__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="ltr" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text box-sizing="content-box" direction="ltr" position="relative" width="stretch" height="75px">
HH
</text>
<text box-sizing="content-box" direction="ltr" position="relative" width="stretch" height="75px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="0" y="0" width="100" height="75"/>
<node x="100" y="0" width="100" height="75"/>
</node>
</expectations>
</test>
19 changes: 19 additions & 0 deletions tests/xml/flex/flex_wrap_column_item_width_stretch_definite_container__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<test name="flex_wrap_column_item_width_stretch_definite_container__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="rtl" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text box-sizing="content-box" direction="rtl" position="relative" width="stretch" height="75px">
HH
</text>
<text box-sizing="content-box" direction="rtl" position="relative" width="stretch" height="75px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="0" y="0" width="100" height="75"/>
<node x="-100" y="0" width="100" height="75"/>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions ...x/flex_wrap_column_item_width_stretch_definite_container_wide_sibling__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_wrap_column_item_width_stretch_definite_container_wide_sibling__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="ltr" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text direction="ltr" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
<div direction="ltr" position="relative" width="150px" height="5px"/>
<text direction="ltr" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="5" y="0" width="140" height="75"/>
<node x="0" y="75" width="150" height="5"/>
<node x="155" y="0" width="90" height="75"/>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions ...x/flex_wrap_column_item_width_stretch_definite_container_wide_sibling__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_wrap_column_item_width_stretch_definite_container_wide_sibling__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="rtl" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text direction="rtl" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
<div direction="rtl" position="relative" width="150px" height="5px"/>
<text direction="rtl" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="-45" y="0" width="140" height="75"/>
<node x="-50" y="75" width="150" height="5"/>
<node x="-145" y="0" width="90" height="75"/>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions .../flex_wrap_column_item_width_stretch_definite_container_wide_sibling__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_wrap_column_item_width_stretch_definite_container_wide_sibling__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="ltr" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text box-sizing="content-box" direction="ltr" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
<div box-sizing="content-box" direction="ltr" position="relative" width="150px" height="5px"/>
<text box-sizing="content-box" direction="ltr" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="5" y="0" width="140" height="75"/>
<node x="0" y="75" width="150" height="5"/>
<node x="155" y="0" width="90" height="75"/>
</node>
</expectations>
</test>
21 changes: 21 additions & 0 deletions .../flex_wrap_column_item_width_stretch_definite_container_wide_sibling__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_wrap_column_item_width_stretch_definite_container_wide_sibling__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" box-sizing="content-box" direction="rtl" position="absolute" flex-direction="column" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text box-sizing="content-box" direction="rtl" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
<div box-sizing="content-box" direction="rtl" position="relative" width="150px" height="5px"/>
<text box-sizing="content-box" direction="rtl" position="relative" width="stretch" height="75px" margin-top="0px" margin-left="5px" margin-bottom="0px" margin-right="5px">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="-45" y="0" width="140" height="75"/>
<node x="-50" y="75" width="150" height="5"/>
<node x="-145" y="0" width="90" height="75"/>
</node>
</expectations>
</test>
19 changes: 19 additions & 0 deletions tests/xml/flex/flex_wrap_row_item_height_stretch_definite_container__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<test name="flex_wrap_row_item_height_stretch_definite_container__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="flex" direction="ltr" position="absolute" flex-wrap="wrap" align-content="start" width="100px" height="100px">
<text direction="ltr" position="relative" width="75px" height="stretch">
HH
</text>
<text direction="ltr" position="relative" width="75px" height="stretch">
HH
</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="100" height="100">
<node x="0" y="0" width="75" height="100"/>
<node x="0" y="100" width="75" height="100"/>
</node>
</expectations>
</test>
Loading
Loading