From 98816b753c501aab99ac11549c447076cb1e15eb Mon Sep 17 00:00:00 2001
From: Oriol Brufau <obrufau@igalia.com>
Date: Thu, 13 Mar 2025 01:57:26 +0100
Subject: [PATCH] layout: Remove special height logic of replaced element with
 auto width (#35275)

When computing the intrinsic block size of a replaced element with a
computed preferred inline size of `auto`, instead of transferring the
final inline size through the aspect ratio, we were only transferring
the min and max constraints.

We did this to match other browsers, but Ian Kilpatrick agreed that this
is a bug and plans to change Blink.

CSSWG issue: https://github.com/w3c/csswg-drafts/issues/11236

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---
 components/layout_2020/geom.rs                |  26 +---
 components/layout_2020/replaced.rs            |  13 +-
 tests/wpt/meta/MANIFEST.json                  |  10 +-
 .../stretch-intrinsic-size-htb-htb.html.ini   |   3 -
 .../stretch-intrinsic-size-htb-vrl.html.ini   |   3 -
 .../aspect-ratio/replaced-element-043.html    | 123 +++++++++---------
 ...ntative.html => replaced-element-044.html} |   4 +-
 .../keyword-sizes-on-replaced-element.html    |   8 +-
 .../video-intrinsic-width-height.html         |   4 +
 9 files changed, 80 insertions(+), 114 deletions(-)
 rename tests/wpt/tests/css/css-sizing/aspect-ratio/{replaced-element-044.tentative.html => replaced-element-044.html} (88%)

diff --git a/components/layout_2020/geom.rs b/components/layout_2020/geom.rs
index 6dd87b5e087..a385a1d1085 100644
--- a/components/layout_2020/geom.rs
+++ b/components/layout_2020/geom.rs
@@ -979,28 +979,6 @@ impl Sizes {
         get_content_size: impl FnOnce() -> ContentSizes,
         is_table: bool,
     ) -> Au {
-        let (preferred, min, max) = self.resolve_each(
-            axis,
-            automatic_size,
-            automatic_minimum_size,
-            stretch_size,
-            get_content_size,
-            is_table,
-        );
-        preferred.clamp_between_extremums(min, max)
-    }
-
-    /// Resolves each of the three sizes into a numerical value, separately.
-    #[inline]
-    pub(crate) fn resolve_each(
-        &self,
-        axis: Direction,
-        automatic_size: Size<Au>,
-        automatic_minimum_size: Au,
-        stretch_size: Option<Au>,
-        get_content_size: impl FnOnce() -> ContentSizes,
-        is_table: bool,
-    ) -> (Au, Au, Option<Au>) {
         // The provided `get_content_size` is a FnOnce but we may need its result multiple times.
         // A LazyCell will only invoke it once if needed, and then reuse the result.
         let content_size = LazyCell::new(get_content_size);
@@ -1010,7 +988,7 @@ impl Sizes {
             // but it can be a smaller amount if there are collapsed rows.
             // Therefore, disregard sizing properties and just defer to the intrinsic size.
             // This is being discussed in https://github.com/w3c/csswg-drafts/issues/11408
-            return (content_size.max_content, content_size.min_content, None);
+            return content_size.max_content;
         }
 
         let preferred =
@@ -1028,7 +1006,7 @@ impl Sizes {
             min.max_assign(content_size.min_content);
         }
         let max = self.max.resolve_for_max(stretch_size, &content_size);
-        (preferred, min, max)
+        preferred.clamp_between_extremums(min, max)
     }
 
     /// Tries to extrinsically resolve the three sizes into a single [`SizeConstraint`].
diff --git a/components/layout_2020/replaced.rs b/components/layout_2020/replaced.rs
index 5039b8cb91a..a14240e52b0 100644
--- a/components/layout_2020/replaced.rs
+++ b/components/layout_2020/replaced.rs
@@ -535,7 +535,7 @@ impl ReplacedContents {
             )
             .into()
         };
-        let (preferred_inline, min_inline, max_inline) = sizes.inline.resolve_each(
+        let inline_size = sizes.inline.resolve(
             Direction::Inline,
             automatic_size.inline,
             Au::zero(),
@@ -543,19 +543,10 @@ impl ReplacedContents {
             get_inline_content_size,
             false, /* is_table */
         );
-        let inline_size = preferred_inline.clamp_between_extremums(min_inline, max_inline);
 
         // Now we can compute the block size, using the inline size from above.
         let block_content_size = LazyCell::new(|| -> ContentSizes {
-            let get_inline_size = || {
-                if sizes.inline.preferred.is_initial() {
-                    // TODO: do we really need to special-case `auto`?
-                    // https://github.com/w3c/csswg-drafts/issues/11236
-                    SizeConstraint::MinMax(min_inline, max_inline)
-                } else {
-                    SizeConstraint::Definite(inline_size)
-                }
-            };
+            let get_inline_size = || SizeConstraint::Definite(inline_size);
             self.content_size(
                 Direction::Block,
                 preferred_aspect_ratio,
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 28ef2f13014..79668fb0ad6 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -594924,14 +594924,14 @@
        ]
       ],
       "replaced-element-043.html": [
-       "9ad35c1a316dfdd5163e63f671f58f3c85892100",
+       "01b23ffbf20afacddd12825b0c655b5fabf3e2be",
        [
         null,
         {}
        ]
       ],
-      "replaced-element-044.tentative.html": [
-       "58a4b9b76ff32010a82c49d1e5d42090d794a081",
+      "replaced-element-044.html": [
+       "10bbf297d47028f1660c3b2345a32895e92b6cb7",
        [
         null,
         {}
@@ -595281,7 +595281,7 @@
       ]
      ],
      "keyword-sizes-on-replaced-element.html": [
-      "497f87ca5fca68e6423c6aba94a34d3de938c1b1",
+      "39b2e591d5396587377dbdcd3ff78529157e0de0",
       [
        null,
        {}
@@ -716308,7 +716308,7 @@
         ]
        ],
        "video-intrinsic-width-height.html": [
-        "c66a79344cd9deafe42772b05ee2e6c6cc3392d2",
+        "047c832da35246278ce58a255037c64bb1d8b723",
         [
          null,
          {}
diff --git a/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html.ini b/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html.ini
index 9a95e86df94..3eace3ac760 100644
--- a/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html.ini
+++ b/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-htb.html.ini
@@ -10,6 +10,3 @@
 
   [.item 7]
     expected: FAIL
-
-  [.item 10]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html.ini b/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html.ini
index eb589946ec3..ef794c639fa 100644
--- a/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html.ini
+++ b/tests/wpt/meta/css/css-align/abspos/stretch-intrinsic-size-htb-vrl.html.ini
@@ -10,6 +10,3 @@
 
   [.item 7]
     expected: FAIL
-
-  [.item 10]
-    expected: FAIL
diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html
index 9ad35c1a316..01b23ffbf20 100644
--- a/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html
+++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11236">
 <meta name="assert" content="
   Min, max and preferred sizing constraints are transferred to the other axis via the preferred aspect ratio.
   In case of conflict,
@@ -62,11 +63,11 @@ canvas {
     <td><code>min-width</code></td>
     <td>
       <canvas width="15" height="15" style="min-width: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 20px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 30px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="min-width: 40px"
@@ -79,11 +80,11 @@ canvas {
     <td><code>min-height</code></td>
     <td>
       <canvas width="15" height="15" style="min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="min-height: 20px"
@@ -100,13 +101,13 @@ canvas {
       <canvas width="15" height="15" style="max-width: 10px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-width: 20px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
     </td>
   </tr>
   <tr>
@@ -117,24 +118,24 @@ canvas {
       <canvas width="15" height="15" style="max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
     </td>
   </tr>
   <tr>
     <td><code>min-width</code>, <code>min-height</code></td>
     <td>
       <canvas width="15" height="15" style="min-width: 0px; min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; min-height: 20px"
@@ -143,11 +144,11 @@ canvas {
               data-expected-width="50" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="min-width: 10px; min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; min-height: 20px"
@@ -156,11 +157,11 @@ canvas {
               data-expected-width="50" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="min-width: 20px; min-height: 0px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; min-height: 5px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; min-height: 20px"
@@ -216,26 +217,26 @@ canvas {
       <canvas width="15" height="15" style="min-width: 0px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 0px; max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <br>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 0px"
               data-expected-width="10" data-expected-height="0"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="min-width: 10px; max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <br>
       <canvas width="15" height="15" style="min-width: 20px; max-height: 0px"
               data-expected-width="20" data-expected-height="0"></canvas>
@@ -244,11 +245,11 @@ canvas {
       <canvas width="15" height="15" style="min-width: 20px; max-height: 10px"
               data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; max-height: 15px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; max-height: 20px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="min-width: 20px; max-height: 25px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <br>
       <canvas width="15" height="15" style="min-width: 30px; max-height: 0px"
               data-expected-width="30" data-expected-height="0"></canvas>
@@ -320,9 +321,9 @@ canvas {
               data-expected-width="10" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 20px; min-height: 0px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; min-height: 5px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; min-height: 10px"
               data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; min-height: 15px"
@@ -333,11 +334,11 @@ canvas {
               data-expected-width="20" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 30px; min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; min-height: 20px"
@@ -346,11 +347,11 @@ canvas {
               data-expected-width="30" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 40px; min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; min-height: 20px"
@@ -359,11 +360,11 @@ canvas {
               data-expected-width="40" data-expected-height="25"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 50px; min-height: 0px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; min-height: 5px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; min-height: 10px"
-              data-expected-width="20" data-expected-height="15"></canvas>
+              data-expected-width="20" data-expected-height="10"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; min-height: 15px"
               data-expected-width="30" data-expected-height="15"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; min-height: 20px"
@@ -406,52 +407,52 @@ canvas {
       <canvas width="15" height="15" style="max-width: 20px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; max-height: 15px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; max-height: 20px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 20px; max-height: 25px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 0px"
               data-expected-width="0" data-expected-height="0"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 30px; max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 0px"
               data-expected-width="0" data-expected-height="0"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 40px; max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <br>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 0px"
               data-expected-width="0" data-expected-height="0"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 5px"
               data-expected-width="10" data-expected-height="5"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 10px"
-              data-expected-width="15" data-expected-height="10"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 15px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 20px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
       <canvas width="15" height="15" style="max-width: 50px; max-height: 25px"
-              data-expected-width="15" data-expected-height="15"></canvas>
+              data-expected-width="15" data-expected-height="8"></canvas>
     </td>
   </tr>
 </table>
diff --git a/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html b/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.html
similarity index 88%
rename from tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html
rename to tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.html
index 58a4b9b76ff..10bbf297d47 100644
--- a/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.tentative.html
+++ b/tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-044.html
@@ -8,8 +8,6 @@
 <meta name="assert" content="
   The inline size resulting from an intrinsic keyword is transferred
   to the block axis through aspect ratio.
-  Except if the inline size is `auto`, then we ignore the ratio and
-  just use the natural block size instead.
 ">
 
 <style>
@@ -17,7 +15,7 @@ canvas { aspect-ratio: 1; height: auto; background: cyan; }
 </style>
 
 <canvas width="50" height="25" style="width: auto"
-        data-expected-width="50" data-expected-height="25"></canvas>
+        data-expected-width="50" data-expected-height="50"></canvas>
 <canvas width="50" height="25" style="width: min-content"
         data-expected-width="50" data-expected-height="50"></canvas>
 <canvas width="50" height="25" style="width: fit-content"
diff --git a/tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html b/tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html
index 497f87ca5fc..39b2e591d53 100644
--- a/tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html
+++ b/tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html
@@ -201,14 +201,14 @@
   <canvas width="100" height="100" class="test height" style="height: fit-content"
           data-expected-width="110" data-expected-height="110"></canvas>
   <canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
-          data-expected-width="10" data-expected-height="110"></canvas>
+          data-expected-width="10" data-expected-height="10"></canvas>
   <canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
-          data-expected-width="510" data-expected-height="110"></canvas>
+          data-expected-width="510" data-expected-height="510"></canvas>
 
   <canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
           data-expected-width="60" data-expected-height="60"></canvas>
   <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
-          data-expected-width="60" data-expected-height="110"></canvas>
+          data-expected-width="60" data-expected-height="60"></canvas>
   <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
           data-expected-width="60" data-expected-height="60"></canvas>
 
@@ -217,7 +217,7 @@
   <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
           data-expected-width="160" data-expected-height="160"></canvas>
   <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
-          data-expected-width="160" data-expected-height="110"></canvas>
+          data-expected-width="160" data-expected-height="160"></canvas>
 </div>
 
 <script src="/resources/testharness.js"></script>
diff --git a/tests/wpt/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-intrinsic-width-height.html b/tests/wpt/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-intrinsic-width-height.html
index c66a79344cd..047c832da35 100644
--- a/tests/wpt/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-intrinsic-width-height.html
+++ b/tests/wpt/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-intrinsic-width-height.html
@@ -26,6 +26,10 @@
              verify that width/height does not influence intrinsic ratio -->
         <video title="both width/height attributes and style"
                data-expected-width="300" data-expected-height="150"
+               width="100" height="100" style="width: auto; height: auto; aspect-ratio: auto"></video>
+        <!-- Same, but now keeping the `aspect-ratio` presentational hint -->
+        <video title="both width/height attributes and style keeping aspect-ratio"
+               data-expected-width="300" data-expected-height="300"
                width="100" height="100" style="width: auto; height: auto"></video>
         <script>
             Array.prototype.forEach.call(document.querySelectorAll('video'), function(video)