Use natural ratio for object-fit (#34413)

We were using the preferred aspect ratio provided by the `aspect-ratio`
property instead of the natural aspect ratio. However, the preferred
aspect ratio should only be used to size the replaced element. To paint
the replaced contents into that element we need the natural ratio.

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

components/layout_2020/flexbox/layout.rs

@@ -1986,7 +1986,6 @@ impl FlexItem<'_> {
 
                 let fragments = replaced.contents.make_fragments(
                     &replaced.style,
-                    containing_block,
                     size.to_physical_size(container_writing_mode),
                 );
 

components/layout_2020/flow/mod.rs

@@ -1377,7 +1377,7 @@ fn layout_in_flow_replaced_block_level(
 
     let containing_block_writing_mode = containing_block.style.writing_mode;
     let physical_content_size = content_size.to_physical_size(containing_block_writing_mode);
-    let fragments = replaced.make_fragments(style, containing_block, physical_content_size);
+    let fragments = replaced.make_fragments(style, physical_content_size);
 
     let clearance;
     if let Some(ref mut sequential_layout_state) = sequential_layout_state {
@@ -2022,11 +2022,9 @@ impl IndependentFormattingContext {
                         &content_box_sizes_and_pbm,
                     )
                     .to_physical_size(container_writing_mode);
-                let fragments = replaced.contents.make_fragments(
-                    &replaced.style,
-                    containing_block,
-                    content_size,
-                );
+                let fragments = replaced
+                    .contents
+                    .make_fragments(&replaced.style, content_size);
 
                 let content_rect = PhysicalRect::new(PhysicalPoint::zero(), content_size);
                 (fragments, content_rect, None)

components/layout_2020/positioned.rs

@@ -567,7 +567,6 @@ impl HoistedAbsolutelyPositionedBox {
                     content_size = computed_size.map(|size| size.to_numeric().unwrap());
                     fragments = replaced.contents.make_fragments(
                         &style,
-                        containing_block,
                         content_size.to_physical_size(containing_block_writing_mode),
                     );
                 },

components/layout_2020/replaced.rs

@@ -305,32 +305,22 @@ impl ReplacedContent {
     pub fn make_fragments(
         &self,
         style: &ServoArc<ComputedValues>,
-        containing_block: &ContainingBlock,
         size: PhysicalSize<Au>,
     ) -> Vec<Fragment> {
-        let aspect_ratio = self.preferred_aspect_ratio(&containing_block.into(), style);
         let natural_size = PhysicalSize::new(
             self.natural_size.width.unwrap_or(size.width),
             self.natural_size.height.unwrap_or(size.height),
         );
 
-        let object_fit_size = aspect_ratio.map_or(size, |aspect_ratio| {
+        let object_fit_size = self.natural_size.ratio.map_or(size, |width_over_height| {
             let preserve_aspect_ratio_with_comparison =
                 |size: PhysicalSize<Au>, comparison: fn(&Au, &Au) -> bool| {
-                    let (width_axis, height_axis) = if style.writing_mode.is_horizontal() {
-                        (Direction::Inline, Direction::Block)
-                    } else {
-                        (Direction::Block, Direction::Inline)
-                    };
-
-                    let candidate_width =
-                        aspect_ratio.compute_dependent_size(width_axis, size.height);
+                    let candidate_width = size.height.scale_by(width_over_height);
                     if comparison(&candidate_width, &size.width) {
                         return PhysicalSize::new(candidate_width, size.height);
                     }
 
-                    let candidate_height =
-                        aspect_ratio.compute_dependent_size(height_axis, size.width);
+                    let candidate_height = size.width.scale_by(1. / width_over_height);
                     debug_assert!(comparison(&candidate_height, &size.height));
                     PhysicalSize::new(size.width, candidate_height)
                 };

components/layout_2020/taffy/layout.rs

@@ -175,11 +175,9 @@ impl taffy::LayoutPartialTree for TaffyContainerContext<'_> {
                         // Create fragments if the RunMode if PerformLayout
                         // If the RunMode is ComputeSize then only the returned size will be used
                         if inputs.run_mode == RunMode::PerformLayout {
-                            child.child_fragments = replaced.contents.make_fragments(
-                                &replaced.style,
-                                containing_block,
-                                content_box_size,
-                            );
+                            child.child_fragments = replaced
+                                .contents
+                                .make_fragments(&replaced.style, content_box_size);
                         }
 
                         let computed_size = taffy::Size {

tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-022.html.ini

@@ -1,2 +0,0 @@
-[replaced-element-022.html]
-  expected: FAIL

tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-024.html.ini

@@ -1,2 +0,0 @@
-[replaced-element-024.html]
-  expected: FAIL

tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-026.html.ini

@@ -1,2 +0,0 @@
-[replaced-element-026.html]
-  expected: FAIL