From 21a7c47ad593720b0fed693390884bf8570a8d0c Mon Sep 17 00:00:00 2001
From: Ting-Yu Lin <tlin@mozilla.com>
Date: Fri, 30 Apr 2021 20:53:44 +0000
Subject: [PATCH] Compute transferred size suggestion only if a flex item is a
 replaced element.

If the flex item is a non-replaced element and its min-width/min-height
is 'auto', the spec has changed so that it has no transferred size
suggestion now. https://drafts.csswg.org/css-flexbox-1/#min-size-auto

This patch also updates WPT tests to fix
https://github.com/web-platform-tests/wpt/issues/27878

Differential Revision: https://phabricator.services.mozilla.com/D112830

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1703304
gecko-commit: fb14e6d29a44a79efc296cc727f92aa58ea4dacc
gecko-reviewers: dholbert
---
 .../aspect-ratio/flex-aspect-ratio-002.html   |  9 +--
 .../aspect-ratio/flex-aspect-ratio-004.html   |  9 +--
 .../aspect-ratio/flex-aspect-ratio-025.html   | 42 +++++++++-----
 .../aspect-ratio/flex-aspect-ratio-026.html   | 58 ++++++++++++-------
 4 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html
index d7714f07e774ba..68cb9cf5693984 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html
@@ -2,15 +2,16 @@
 <title>CSS aspect-ratio: Row flexbox min-width</title>
 <link rel="author" title="Google LLC" href="https://www.google.com/">
 <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-minimum">
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
 
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 
 <div style="display: flex;">
-  <!-- transferred size: 100px. content size suggestion: 200px.
-       min-width: min(100, 200). -->
-  <div style="background: green; height: 100px; aspect-ratio: 1/1; flex-basis: 0;">
-    <div style="width: 200px;"></div>
+  <!-- No transferred size suggestion since the flex item is non-replaced.
+       Content size suggestion is 100px. -->
+  <div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;">
+    <div style="width: 100px;"></div>
   </div>
 </div>
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html
index 05b569ac607185..2633f493a87c70 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html
@@ -2,15 +2,16 @@
 <title>CSS aspect-ratio: Column flexbox min-height</title>
 <link rel="author" title="Google LLC" href="https://www.google.com/">
 <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-minimum">
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
 
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 
 <div style="display: flex; flex-direction: column;">
-  <!-- transferred size: 100px. content size suggestion: 200px.
-       min-height: min(100, 200). -->
-  <div style="background: green; width: 100px; aspect-ratio: 1/1; flex-basis: 0;">
-    <div style="height: 200px;"></div>
+  <!-- No transferred size suggestion since the flex item is non-replaced.
+       Content size suggestion is 100px. -->
+  <div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;">
+    <div style="height: 100px;"></div>
   </div>
 </div>
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
index c4ff8110d7bed7..bf8daaa35f08a4 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
@@ -4,6 +4,8 @@
   <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
   <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
   <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-minimum">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
   <link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
   <style>
   .flexContainer {
@@ -21,28 +23,38 @@
 
   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 
+  <!-- In all of the subtests here, each flex item's automatic minimum width is
+       resolved directly from its content size suggestion. Notably, these items
+       *do not* get a "transferred size suggestion", because they are all
+       *non-replaced* elements; and "transferred size suggestion" is only used
+       for resolving automatic minimum sizes on *replaced* elements. However,
+       note that we do "transfer" sizes through the aspect ratio, as part of
+       computing the content size suggestion and/or flex base size. -->
+
   <!-- In the following four flex containers, the aspect-ratio works with border-box. -->
   <div class="flexContainer" style="width: auto;">
     <!-- The border-box height 25px is transferred to the main axis,
-         yielding a resolved flex base size of 200px. -->
+         yielding a resolved flex base size (border-box) of 200px. -->
     <div class="item" style="min-width:0; height: 25px; aspect-ratio: 8/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box height 25px is transferred to the main axis,
-         yielding a resolved min-width:auto of 200px. -->
+    <!-- The content size suggestion (border-box) is 200px because the
+         border-box height 25px is transferred to the main axis. -->
     <div class="item" style="height: 25px; aspect-ratio: 8/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box min-height 25px is transferred to the main axis,
-         yielding a resolved min-width:auto of 200px. -->
+    <!-- The content size suggestion (border-box) is 200px because the
+         border-box height 25px (enforced by min-height) is transferred to the
+         main axis. -->
     <div class="item" style="min-height: 25px; aspect-ratio: 8/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box height 25px (clamped by max-height) is transferred to the main axis,
-         yielding a resolved min-width:auto of 200px. -->
+    <!-- The content size suggestion (border-box) is 200px because the
+         border-box height 25px (clamped by max-height) is transferred to the
+         main axis. -->
     <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: 8/1;"></div>
   </div>
 
@@ -50,25 +62,27 @@
        because its value contains 'auto'. -->
   <div class="flexContainer" style="width: auto;">
     <!-- The content-box height 10px is transferred to the main axis,
-         yielding a resolved flex base size of 190px. -->
+         yielding a resolved flex base size (content-box) of 190px. -->
     <div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 19/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box height 10px is transferred to the main axis,
-         yielding a resolved min-width:auto of 190px. -->
+    <!-- The content size suggestion (content-box) is 190px because the
+         content-box height 10px is transferred to the main axis. -->
     <div class="item" style="height: 25px; aspect-ratio: auto 19/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box min-height 10px is transferred to the main axis,
-         yielding a resolved min-width:auto of 190px. -->
+    <!-- The content size suggestion (content-box) is 190px because the
+         content-box height 10px (enforced by min-height) is transferred to the
+         main axis. -->
     <div class="item" style="min-height: 25px; aspect-ratio: auto 19/1;"></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box height 10px (clamped by max-height) is transferred
-         to the main axis, yielding a resolved min-width:auto of 190px. -->
+    <!-- The content size suggestion (content-box) is 190px because the
+         content-box height 10px (clamped by max-height) is transferred to the
+         main axis. -->
     <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 19/1;"></div>
   </div>
 </html>
diff --git a/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html b/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
index c4a250818bb778..ff6bf2aa569055 100644
--- a/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
+++ b/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
@@ -4,6 +4,8 @@
   <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
   <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
   <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-minimum">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
   <link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
   <style>
   .flexContainer {
@@ -19,60 +21,74 @@
     box-sizing: border-box;
   }
   .item > div {
-    height: 500px; /* Set a large content size suggestion for flex item. */
+    height: 190px; /* Set the content size suggestion for flex item. */
   }
   </style>
 
   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 
+  <!-- In all of the subtests here, each flex item's automatic minimum height is
+       resolved directly from its content size suggestion. Notably, these items
+       *do not* get a "transferred size suggestion", because they are all
+       *non-replaced* elements; and "transferred size suggestion" is only used
+       for resolving automatic minimum sizes on *replaced* elements. However,
+       note that we do "transfer" sizes through the aspect ratio, as part of
+       computing the content size suggestion and/or flex base size. -->
+
   <!-- In the following four flex containers, the aspect-ratio works with border-box. -->
   <div class="flexContainer" style="height: auto;">
     <!-- The border-box width 25px is transferred to the main axis,
-         yielding a resolved flex base size of 200px. -->
+         yielding a resolved flex base size (border-box) of 200px. -->
     <div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box width 25px is transferred to the main axis,
-         yielding a resolved min-height:auto of 200px. -->
-    <div class="item" style="width: 25px; aspect-ratio: 1/8;"><div></div></div>
+    <!-- The content size suggestion is 190px, i.e. the height of the item's
+         child div. -->
+    <div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box min-width 25px is transferred to the main axis,
-         yielding a resolved min-height:auto of 200px. -->
-    <div class="item" style="min-width: 25px; aspect-ratio: 1/8;"><div></div></div>
+    <!-- The content size suggestion is 190px, i.e. the height of the item's
+         child div. -->
+    <div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The border-box width 25px (clamped by max-width) is transferred to the main axis,
-         yielding a resolved min-height:auto of 200px. -->
-    <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"><div></div></div>
+    <!-- The content size suggestion is 200px because the border-box max-width
+         25px is transferred to the main axis as the upper bound of its
+         border-box height. -->
+    <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;">
+      <div style="height: 500px"></div>
+    </div>
   </div>
 
   <!-- In the following four flex containers, the aspect-ratio works with content-box
        because its value contains 'auto'. -->
   <div class="flexContainer" style="height: auto;">
     <!-- The content-box width 10px is transferred to the main axis,
-         yielding a resolved flex base size of 190px. -->
+         yielding a resolved flex base size (content-box) of 190px. -->
     <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box width 10px is transferred to the main axis,
-         yielding a resolved min-height:auto of 190px. -->
-    <div class="item" style="width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
+    <!-- The content size suggestion is 190px, i.e. the height of the item's
+         child div. -->
+    <div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box min-width 10px is transferred to the main axis,
-         yielding a resolved min-height:auto of 190px. -->
-    <div class="item" style="min-width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
+    <!-- The content size suggestion is 190px, i.e. the height of the item's
+         child div. -->
+    <div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div>
   </div>
 
   <div class="flexContainer">
-    <!-- The content-box width 10px (clamped by max-width) is transferred to the main axis,
-         yielding a resolved min-height:auto of 190px. -->
-    <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"><div></div></div>
+    <!-- The content size suggestion is 190px because the content-box max-width
+         10px is transferred to the main axis as the upper bound of its
+         content-box height.-->
+    <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;">
+      <div style="height: 500px"></div>
+    </div>
   </div>
 </html>