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

@@ -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`].

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,

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,
          {}

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

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

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>

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"

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>

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)