Repository: servo/servo (language: python)

Issue:
Incorrect alignment of servo brand image on servo.org
This issue is a follow-up on https://github.com/servo/servo/issues/34079, because the servo brand image remains misaligned.

![image](https://github.com/user-attachments/assets/8425095f-1f05-45e2-a9c9-d04c6866c67d)


This bug can be reproduced with
```html
<html>
<head>
  <style>
    #foo {
      outline: 1px solid goldenrod;
      width: 100px;
      height: 100px;
    }

    #bar {
      outline: 1px solid rebeccapurple;
      width: 100px;
    }

    .navbar-menu {
      display: flex;
      min-height: 50px;
    }

    body {
      display: flex;
    }
  </style>
</head>
<body>
  <div id="foo">
  </div>
  <div class="navbar-menu">
    <div id="bar">
    </div>
  </div>
</body>
</html>
```
| Servo 3289e7d84dd6d905099d99751781a66da55fe04e | Firefox |
| --- | --- |
| ![image](https://github.com/user-attachments/assets/9f1e4d9f-b68e-4adc-b791-f0f3172fedb6) | ![image](https://github.com/user-attachments/assets/3fc7b44e-54a5-4009-b0e3-c163336f44fc) | 
Incorrect alignment of servo brand image on servo.org
This issue is a follow-up on https://github.com/servo/servo/issues/34079, because the servo brand image remains misaligned.

![image](https://github.com/user-attachments/assets/8425095f-1f05-45e2-a9c9-d04c6866c67d)


This bug can be reproduced with
```html
<html>
<head>
  <style>
    #foo {
      outline: 1px solid goldenrod;
      width: 100px;
      height: 100px;
    }

    #bar {
      outline: 1px solid rebeccapurple;
      width: 100px;
    }

    .navbar-menu {
      display: flex;
      min-height: 50px;
    }

    body {
      display: flex;
    }
  </style>
</head>
<body>
  <div id="foo">
  </div>
  <div class="navbar-menu">
    <div id="bar">
    </div>
  </div>
</body>
</html>
```
| Servo 3289e7d84dd6d905099d99751781a66da55fe04e | Firefox |
| --- | --- |
| ![image](https://github.com/user-attachments/assets/9f1e4d9f-b68e-4adc-b791-f0f3172fedb6) | ![image](https://github.com/user-attachments/assets/3fc7b44e-54a5-4009-b0e3-c163336f44fc) | 


Discussion / hints:

Fix patch:
diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index 1e78f8c6a7ef8..7985e47ba0808 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -1815,8 +1815,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(
@@ -1835,7 +1838,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,
@@ -1865,7 +1870,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
@@ -1967,6 +1972,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|
@@ -1977,7 +1984,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,
                 };


Test patch:
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index e1d6ccfac99b2..2953cb09af38b 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 0000000000000..325d79e7c63f3
--- /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>