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>

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)