Handle aspect ratios in ReplacedContent::inline_content_sizes (#33240)

We were only handling the aspect ratio of a replaced element when
computing its min/max-content contribution, but not when computing
the min/max-content size. Now both cases will take it into account.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>

components/layout_2020/flexbox/layout.rs

@@ -346,6 +346,7 @@ impl FlexContainer {
                             &ifc.style().clone(),
                             &LogicalVec2::zero(),
                         ),
+                        containing_block_for_children,
                     ));
                 },
                 FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(_) => {},
@@ -955,6 +956,7 @@ impl<'a> FlexItem<'a> {
             main: flex_relative_content_min_size.main.auto_is(|| {
                 box_.automatic_min_size(
                     flex_context.layout_context,
+                    &containing_block.into(),
                     cross_axis_is_item_block_axis,
                     flex_relative_content_box_size,
                     flex_relative_content_min_size,
@@ -989,6 +991,7 @@ impl<'a> FlexItem<'a> {
 
         let (flex_base_size, flex_base_size_is_definite) = box_.flex_base_size(
             flex_context.layout_context,
+            &containing_block.into(),
             flex_context.container_definite_inner_size,
             cross_axis_is_item_block_axis,
             flex_relative_content_box_size,
@@ -1913,6 +1916,7 @@ impl FlexItemBox {
             style.content_box_sizes_and_padding_border_margin(containing_block);
         let automatic_min_size = self.automatic_min_size(
             layout_context,
+            containing_block,
             cross_axis_is_item_block_axis,
             flex_axis.vec2_to_flex_relative(content_box_size),
             flex_axis.vec2_to_flex_relative(content_min_size),
@@ -1984,6 +1988,7 @@ impl FlexItemBox {
         // we compute the base sizes of the items twice. We should consider caching.
         let (flex_base_size, _) = self.flex_base_size(
             layout_context,
+            containing_block,
             FlexRelativeVec2 {
                 main: None,
                 cross: None,
@@ -2091,6 +2096,7 @@ impl FlexItemBox {
     fn automatic_min_size(
         &mut self,
         layout_context: &LayoutContext,
+        containing_block: &IndefiniteContainingBlock,
         cross_axis_is_item_block_axis: bool,
         content_box_size: FlexRelativeVec2<AuOrAuto>,
         min_size: FlexRelativeVec2<GenericLengthPercentageOrAuto<Au>>,
@@ -2159,7 +2165,11 @@ impl FlexItemBox {
             let containing_block_for_children =
                 IndefiniteContainingBlock::new_for_style_and_block_size(&style, block_size);
             self.independent_formatting_context
-                .inline_content_sizes(layout_context, &containing_block_for_children)
+                .inline_content_sizes(
+                    layout_context,
+                    &containing_block_for_children,
+                    containing_block,
+                )
                 .min_content
         } else {
             block_content_size_callback(self)
@@ -2191,6 +2201,7 @@ impl FlexItemBox {
     fn flex_base_size(
         &mut self,
         layout_context: &LayoutContext,
+        containing_block: &IndefiniteContainingBlock,
         container_definite_inner_size: FlexRelativeVec2<Option<Au>>,
         cross_axis_is_item_block_axis: bool,
         content_box_size: FlexRelativeVec2<AuOrAuto>,
@@ -2276,7 +2287,11 @@ impl FlexItemBox {
                     let containing_block_for_children =
                         IndefiniteContainingBlock::new_for_style_and_block_size(&style, block_size);
                     flex_item
-                        .inline_content_sizes(layout_context, &containing_block_for_children)
+                        .inline_content_sizes(
+                            layout_context,
+                            &containing_block_for_children,
+                            containing_block,
+                        )
                         .max_content
                 } else {
                     block_content_size_callback(self)

components/layout_2020/formatting_contexts.rs

@@ -5,7 +5,6 @@
 use app_units::Au;
 use serde::Serialize;
 use servo_arc::Arc;
-use style::logical_geometry::Direction;
 use style::properties::ComputedValues;
 use style::selector_parser::PseudoElement;
 use style::values::specified::text::TextDecorationLine;
@@ -180,14 +179,17 @@ impl IndependentFormattingContext {
         &mut self,
         layout_context: &LayoutContext,
         containing_block_for_children: &IndefiniteContainingBlock,
+        containing_block: &IndefiniteContainingBlock,
     ) -> ContentSizes {
         match self {
             Self::NonReplaced(inner) => {
                 inner.inline_content_sizes(layout_context, containing_block_for_children)
             },
-            Self::Replaced(inner) => inner
+            Self::Replaced(inner) => inner.contents.inline_content_sizes(
-                .contents
+                layout_context,
-                .inline_content_sizes(layout_context, containing_block_for_children),
+                containing_block_for_children,
+                inner.preferred_aspect_ratio(containing_block),
+            ),
         }
     }
 
@@ -211,20 +213,11 @@ impl IndependentFormattingContext {
                 containing_block,
                 auto_minimum,
                 |containing_block_for_children| {
-                    match (
+                    replaced.contents.inline_content_sizes(
-                        containing_block_for_children.size.block,
+                        layout_context,
+                        containing_block_for_children,
                         replaced.preferred_aspect_ratio(containing_block),
-                    ) {
+                    )
-                        (AuOrAuto::LengthPercentage(block_size), Some(ratio)) => {
-                            return ratio
-                                .compute_dependent_size(Direction::Inline, block_size)
-                                .into();
-                        },
-                        _ => {},
-                    }
-                    replaced
-                        .contents
-                        .inline_content_sizes(layout_context, containing_block_for_children)
                 },
             ),
         }

components/layout_2020/replaced.rs

@@ -255,15 +255,22 @@ impl ReplacedContent {
         &self,
         _: &LayoutContext,
         containing_block_for_children: &IndefiniteContainingBlock,
+        preferred_aspect_ratio: Option<AspectRatio>,
     ) -> ContentSizes {
         // FIXME: min/max-content of replaced elements is not defined in
         // https://dbaron.org/css/intrinsic/
         // This seems sensible?
-
+        let block_size = containing_block_for_children.size.block;
-        self.flow_relative_intrinsic_size(containing_block_for_children.style)
+        let inline_size = match (block_size, preferred_aspect_ratio) {
-            .inline
+            (AuOrAuto::LengthPercentage(block_size), Some(ratio)) => {
-            .unwrap_or(Au::zero())
+                ratio.compute_dependent_size(Direction::Inline, block_size)
-            .into()
+            },
+            _ => self
+                .flow_relative_intrinsic_size(containing_block_for_children.style)
+                .inline
+                .unwrap_or_else(Au::zero),
+        };
+        inline_size.into()
     }
 
     pub fn make_fragments(

tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-column-011.html.ini

@@ -1,7 +1,4 @@
 [flex-aspect-ratio-img-column-011.html]
-  [.flexbox 5]
-    expected: FAIL
-
   [.flexbox 7]
     expected: FAIL
 

tests/wpt/meta/css/css-flexbox/flex-aspect-ratio-img-row-005.html.ini

@@ -1,9 +1,3 @@
 [flex-aspect-ratio-img-row-005.html]
-  [img 1]
-    expected: FAIL
-
-  [img 2]
-    expected: FAIL
-
   [img 3]
     expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-001.html.ini

@@ -1,7 +1,4 @@
 [image-as-flexitem-size-001.html]
-  [.flexbox > img 3]
-    expected: FAIL
-
   [.flexbox > img 4]
     expected: FAIL
 

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-001v.html.ini

@@ -13,6 +13,3 @@
 
   [.flexbox > img 6]
     expected: FAIL
-
-  [.flexbox > img 3]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-003.html.ini

@@ -19,6 +19,3 @@
 
   [.flexbox > img 10]
     expected: FAIL
-
-  [.flexbox > img 3]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-003v.html.ini

@@ -19,6 +19,3 @@
 
   [.flexbox > img 10]
     expected: FAIL
-
-  [.flexbox > img 3]
-    expected: FAIL

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-007.html.ini

@@ -1,7 +1,4 @@
 [image-as-flexitem-size-007.html]
-  [.flexbox > img 3]
-    expected: FAIL
-
   [.flexbox > img 4]
     expected: FAIL
 

tests/wpt/meta/css/css-flexbox/image-as-flexitem-size-007v.html.ini

@@ -13,6 +13,3 @@
 
   [.flexbox > img 6]
     expected: FAIL
-
-  [.flexbox > img 3]
-    expected: FAIL

tests/wpt/meta/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html.ini

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

tests/wpt/meta/css/css-sizing/percentage-height-in-flexbox.html.ini

@@ -1,6 +0,0 @@
-[percentage-height-in-flexbox.html]
-  [#target offsetSize matches #container offsetSize]
-    expected: FAIL
-
-  [#target offsetSize matches #container offsetSize after resize]
-    expected: FAIL