From f4cc20f7ef1e8b59fe6e088c43982a9cc9d1d935 Mon Sep 17 00:00:00 2001
From: Martin Robinson <mrobinson@igalia.com>
Date: Fri, 8 Nov 2024 17:59:23 +0100
Subject: [PATCH] layout: Fix caching of streching flex items in row flex
 (#34162)

When a flex item stretches in the cross axis in a row flex, the flex
container layout should depend on block constraints. In this case the
cross axis is the block axis (assuming horizontal writing modes --
vertical are not yet supported). This changes fixes an issue where the
cached layout was used in this case when stretching should trigger a new
layout.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
---
 components/layout_2020/flexbox/layout.rs       | 17 ++++++++++++-----
 tests/wpt/meta/MANIFEST.json                   | 13 +++++++++++++
 .../stretched-child-in-nested-flexbox.html     | 18 ++++++++++++++++++
 3 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html

diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index c23518bd8c3..90b179b7f15 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -1864,8 +1864,11 @@ impl FlexItem<'_> {
             }),
         };
 
-        let ifc = &mut self.box_.independent_formatting_context;
-        let item_writing_mode = ifc.style().writing_mode;
+        let item_writing_mode = self
+            .box_
+            .independent_formatting_context
+            .style()
+            .writing_mode;
         let item_is_horizontal = item_writing_mode.is_horizontal();
         let flex_axis = flex_context.config.flex_axis;
         let cross_axis_is_item_block_axis = cross_axis_is_item_block_axis(
@@ -1884,7 +1887,9 @@ impl FlexItem<'_> {
                             item_writing_mode,
                             AuOrAuto::LengthPercentage(used_main_size),
                         );
-                    let content_contributions = ifc
+                    let content_contributions = self
+                        .box_
+                        .independent_formatting_context
                         .inline_content_sizes(
                             flex_context.layout_context,
                             &containing_block_for_children,
@@ -1914,7 +1919,7 @@ impl FlexItem<'_> {
         };
 
         let container_writing_mode = containing_block.style.writing_mode;
-        match ifc {
+        match &self.box_.independent_formatting_context {
             IndependentFormattingContext::Replaced(replaced) => {
                 let size = replaced
                     .contents
@@ -2016,6 +2021,8 @@ impl FlexItem<'_> {
                     &item_as_containing_block,
                     containing_block,
                 );
+                let depends_on_block_constraints = depends_on_block_constraints ||
+                    (flex_axis == FlexAxis::Row && self.stretches());
 
                 let has_child_which_depends_on_block_constraints = fragments.iter().any(|fragment| {
                         fragment.base().map_or(false,|base|
@@ -2026,7 +2033,7 @@ impl FlexItem<'_> {
                 let item_writing_mode_is_orthogonal_to_container_writing_mode =
                     flex_context.config.writing_mode.is_horizontal() !=
                         non_replaced.style.writing_mode.is_horizontal();
-                let has_compatible_baseline = match flex_context.config.flex_axis {
+                let has_compatible_baseline = match flex_axis {
                     FlexAxis::Row => !item_writing_mode_is_orthogonal_to_container_writing_mode,
                     FlexAxis::Column => item_writing_mode_is_orthogonal_to_container_writing_mode,
                 };
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index e1d6ccfac99..2953cb09af3 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -177861,6 +177861,19 @@
        {}
       ]
      ],
+     "stretched-child-in-nested-flexbox.html": [
+      "325d79e7c63f3e301c21f53f8bc97b48ae15c6b5",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square.xht",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "stretching-orthogonal-flows.html": [
       "acaa787faf657b76a5b213fb9203088d5d28f4c4",
       [
diff --git a/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html b/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html
new file mode 100644
index 00000000000..325d79e7c63
--- /dev/null
+++ b/tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests nested flex item with `align-items: stretch`</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This checks that a stretched flex item in a nested flexbox streches to the size of the parent flex container's line.">
+<body>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+    <div style="display: flex;">
+        <div style="width: 50px; height: 100px; background: green;"></div>
+        <div style="display: flex;">
+            <div style="background: green; width: 50px;"></div>
+      </div>
+    </div>
+</body>
+</html>