diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index ed88bcca120..d36a230ca56 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -2687,15 +2687,17 @@ impl FlexItemBox {
// > If a single-line flex container has a definite cross size, the automatic preferred
// > outer cross size of any stretched flex items is the flex container’s inner cross size
// > (clamped to the flex item’s min and max cross size) and is considered definite.
+ let cross_stretch_size = container_definite_inner_size
+ .cross
+ .map(|v| v - pbm_auto_is_zero.cross);
let cross_size = if content_box_size.cross.is_initial() &&
item_with_auto_cross_size_stretches_to_container_size
{
- container_definite_inner_size
- .cross
- .map(|v| v - pbm_auto_is_zero.cross)
+ cross_stretch_size
} else {
- // TODO(#32853): handle size keywords.
- content_box_size.cross.to_numeric()
+ content_box_size
+ .cross
+ .maybe_resolve_extrinsic(cross_stretch_size)
};
if let (Some(ratio), Some(cross_size)) = (preferred_aspect_ratio, cross_size) {
let cross_size = cross_size.clamp_between_extremums(
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 696426f649d..db9659582a4 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -246713,6 +246713,32 @@
{}
]
],
+ "flexbox-flex-base-size-001.html": [
+ "a7a1aef192d8e95a93ecffb9bbe9834eb7ecbca7",
+ [
+ null,
+ [
+ [
+ "/css/reference/ref-filled-green-200px-square.html",
+ "=="
+ ]
+ ],
+ {}
+ ]
+ ],
+ "flexbox-flex-base-size-002.html": [
+ "66a1874f933add4ce0e9d0bd5939d46812934ee0",
+ [
+ null,
+ [
+ [
+ "/css/reference/ref-filled-green-200px-square.html",
+ "=="
+ ]
+ ],
+ {}
+ ]
+ ],
"min-width-1.html": [
"a1a39073e88d4626be7c469611e3593415849e7a",
[
diff --git a/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-001.html b/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-001.html
new file mode 100644
index 00000000000..a7a1aef192d
--- /dev/null
+++ b/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-001.html
@@ -0,0 +1,30 @@
+
+
+Flex base size of flex item with stretch cross size
+
+
+
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+
+
+
diff --git a/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-002.html b/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-002.html
new file mode 100644
index 00000000000..66a1874f933
--- /dev/null
+++ b/tests/wpt/tests/css/css-sizing/stretch/flexbox-flex-base-size-002.html
@@ -0,0 +1,30 @@
+
+
+Flex base size of flex item with stretch cross size
+
+
+
+
+
+
+
+
+Test passes if there is a filled green square and no red.
+
+
+