From e10e989abb884f3c83a5c35d4c1b1be887ec0bb1 Mon Sep 17 00:00:00 2001
From: Oriol Brufau <obrufau@igalia.com>
Date: Tue, 10 Dec 2024 12:12:28 +0100
Subject: [PATCH] Don't transfer indefinite `height: stretch` to inline axis
 (#34557)

Consider this testcase:
```html
<canvas style="aspect-ratio: 1; height: stretch; background: cyan"
        width="200" height="100"></canvas>
```

To compute the intrinsic inline sizes we were treating `height: stretch`
as the natural height (100px) and then transferring that to the inline
axis through the preferred aspect ratio. So the element was 100px wide.

However, an indefinite `stretch` should be treated as an automatic size,
which wouldn't be transferred to the inline axis.

The fix actually makes the code slightly simpler.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---
 components/layout_2020/replaced.rs            |  9 ++----
 tests/wpt/meta/MANIFEST.json                  |  2 +-
 .../keyword-sizes-on-replaced-element.html    | 30 ++++++++++++++-----
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/components/layout_2020/replaced.rs b/components/layout_2020/replaced.rs
index bedfbf54ffe..19ea5f29973 100644
--- a/components/layout_2020/replaced.rs
+++ b/components/layout_2020/replaced.rs
@@ -532,18 +532,15 @@ impl ReplacedContents {
         // Therefore, we tentatively treat intrinsic block sizing properties as their initial value.
         let inline_content_size = LazyCell::new(|| {
             let get_block_size = || {
-                let block_stretch_size = block_stretch_size.unwrap_or_else(get_block_fallback_size);
                 SizeConstraint::new(
-                    box_size
-                        .block
-                        .maybe_resolve_extrinsic(Some(block_stretch_size)),
+                    box_size.block.maybe_resolve_extrinsic(block_stretch_size),
                     min_box_size
                         .block
-                        .maybe_resolve_extrinsic(Some(block_stretch_size))
+                        .maybe_resolve_extrinsic(block_stretch_size)
                         .unwrap_or_default(),
                     max_box_size
                         .block
-                        .maybe_resolve_extrinsic(Some(block_stretch_size)),
+                        .maybe_resolve_extrinsic(block_stretch_size),
                 )
             };
             self.content_size(
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 8ef2d2847b4..015df4ce1a5 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -575775,7 +575775,7 @@
       ]
      ],
      "keyword-sizes-on-replaced-element.html": [
-      "e26c1b7d6ac38858fd7a941a690ea01e6005c38c",
+      "8863ef491570c4d194bbb4b1d03a6e12367d4ff3",
       [
        null,
        {}
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 e26c1b7d6ac..8863ef49157 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
@@ -143,17 +143,17 @@
 <!-- Definite stretch -->
 <div style="width: 200px; height: 100px">
   <canvas width="100" height="100" class="test width stretch"
-          data-expected-width="190" data-expected-height="190">X X</canvas>
+          data-expected-width="190" data-expected-height="190"></canvas>
   <canvas width="100" height="100" class="test min-width stretch"
-          data-expected-width="190" data-expected-height="190">X X</canvas>
+          data-expected-width="190" data-expected-height="190"></canvas>
   <canvas width="100" height="100" class="test max-width stretch"
-          data-expected-width="190" data-expected-height="190">X X</canvas>
+          data-expected-width="190" data-expected-height="190"></canvas>
   <canvas width="100" height="100" class="test height stretch"
-          data-expected-width="90" data-expected-height="90">X X</canvas>
+          data-expected-width="90" data-expected-height="90"></canvas>
   <canvas width="100" height="100" class="test min-height stretch"
-          data-expected-width="90" data-expected-height="90">X X</canvas>
+          data-expected-width="90" data-expected-height="90"></canvas>
   <canvas width="100" height="100" class="test max-height stretch"
-          data-expected-width="90" data-expected-height="90">X X</canvas>
+          data-expected-width="90" data-expected-height="90"></canvas>
 </div>
 
 <!-- Stretch sizes can't result in a negative content size -->
@@ -171,9 +171,23 @@
   <canvas width="100" height="100" class="test height stretch indefinite"
           data-expected-width="110" data-expected-height="110"></canvas>
   <canvas width="100" height="100" class="test min-height stretch indefinite"
-          data-expected-width="110" data-expected-height="110"></canvas>
+          data-expected-width="10" data-expected-height="110"></canvas>
   <canvas width="100" height="100" class="test max-height stretch indefinite"
-          data-expected-width="110" data-expected-height="110"></canvas>
+          data-expected-width="510" data-expected-height="110"></canvas>
+
+  <canvas width="100" height="100" class="test height stretch indefinite" style="max-width: 50px"
+          data-expected-width="60" data-expected-height="60"></canvas>
+  <canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 50px"
+          data-expected-width="60" data-expected-height="110"></canvas>
+  <canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 50px"
+          data-expected-width="60" data-expected-height="60"></canvas>
+
+  <canvas width="100" height="100" class="test height stretch indefinite" style="min-width: 150px"
+          data-expected-width="160" data-expected-height="160"></canvas>
+  <canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 150px"
+          data-expected-width="160" data-expected-height="160"></canvas>
+  <canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 150px"
+          data-expected-width="160" data-expected-height="110"></canvas>
 </div>
 
 <script src="/resources/testharness.js"></script>