Auto merge of #29799 - stshine:align-self-stretch, r=Loirooriol

layout_2020: Specify the used cross size when replaced item is stretched

According to spec, if the flex item has [align-self: stretch](https://drafts.csswg.org/css-flexbox/#propdef-align-self), redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #29788  (GitHub issue number if applicable)

<!-- Either: -->
- [x] There are tests for these changes OR

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

components/layout_2020/flexbox/layout.rs

@@ -1003,9 +1003,17 @@ impl<'a> FlexItem<'a> {
                         let pbm = replaced
                             .style
                             .padding_border_margin(flex_context.containing_block);
+                        let box_size = used_cross_size_override.map(|size| Vec2 {
+                            inline: replaced
+                                .style
+                                .content_box_size(flex_context.containing_block, &pbm)
+                                .inline,
+                            block: LengthOrAuto::LengthPercentage(size),
+                        });
                         let size = replaced.contents.used_size_as_if_inline_element(
                             flex_context.containing_block,
                             &replaced.style,
+                            box_size,
                             &pbm,
                         );
                         let cross_size = flex_context.vec2_to_flex_relative(size.clone()).cross;

components/layout_2020/flow/inline.rs

@@ -573,6 +573,7 @@ fn layout_atomic(
             let size = replaced.contents.used_size_as_if_inline_element(
                 ifc.containing_block,
                 &replaced.style,
+                None,
                 &pbm,
             );
             let fragments = replaced

components/layout_2020/flow/mod.rs

@@ -581,7 +581,7 @@ fn layout_in_flow_replaced_block_level<'a>(
     replaced: &ReplacedContent,
 ) -> BoxFragment {
     let pbm = style.padding_border_margin(containing_block);
-    let size = replaced.used_size_as_if_inline_element(containing_block, style, &pbm);
+    let size = replaced.used_size_as_if_inline_element(containing_block, style, None, &pbm);
 
     let (margin_inline_start, margin_inline_end) =
         solve_inline_margins_for_in_flow_block_level(containing_block, &pbm, size.inline);

components/layout_2020/positioned.rs

@@ -439,6 +439,7 @@ impl HoistedAbsolutelyPositionedBox {
                 let used_size = replaced.contents.used_size_as_if_inline_element(
                     &containing_block.into(),
                     &replaced.style,
+                    None,
                     &pbm,
                 );
                 Vec2 {

components/layout_2020/replaced.rs

@@ -309,13 +309,14 @@ impl ReplacedContent {
         &self,
         containing_block: &ContainingBlock,
         style: &ComputedValues,
+        box_size: Option<Vec2<LengthOrAuto>>,
         pbm: &PaddingBorderMargin,
     ) -> Vec2<Length> {
         let mode = style.writing_mode;
         let intrinsic_size = self.flow_relative_intrinsic_size(style);
         let intrinsic_ratio = self.inline_size_over_block_size_intrinsic_ratio(style);
 
-        let box_size = style.content_box_size(containing_block, &pbm);
+        let box_size = box_size.unwrap_or(style.content_box_size(containing_block, &pbm));
         let max_box_size = style.content_max_box_size(containing_block, &pbm);
         let min_box_size = style
             .content_min_box_size(containing_block, &pbm)

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-aspect-ratio-img-column-001.html.ini

@@ -0,0 +1,2 @@
+[flex-aspect-ratio-img-column-001.html]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-aspect-ratio-img-row-006.html.ini

@@ -1,2 +0,0 @@
-[flex-aspect-ratio-img-row-006.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-minimum-height-flex-items-004.xht.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-004.xht]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-minimum-height-flex-items-007.xht.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-007.xht]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-minimum-height-flex-items-008.xht.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-008.xht]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-minimum-height-flex-items-020.html.ini

@@ -0,0 +1,2 @@
+[flex-minimum-height-flex-items-020.html]
+  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flex-minimum-width-flex-items-012.html.ini

@@ -1,2 +0,0 @@
-[flex-minimum-width-flex-items-012.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-definite-cross-size-constrained-percentage.html.ini

@@ -1,2 +0,0 @@
-[flexbox-definite-cross-size-constrained-percentage.html]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-whitespace-handling-001a.xhtml.ini

@@ -1,2 +0,0 @@
-[flexbox-whitespace-handling-001a.xhtml]
-  expected: FAIL

tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-whitespace-handling-001b.xhtml.ini

@@ -1,2 +0,0 @@
-[flexbox-whitespace-handling-001b.xhtml]
-  expected: FAIL