Bug 1692290 [wpt PR 27596] - New tests for min-width:auto and items with aspect ratio, a=testonly

Automatic update from web-platform-tests
New tests for min-width:auto and items with aspect ratio (#27596)

A couple of new tests verifying that we do not incorrectly stretch flex items with aspect ratio due to min-width:auto resolution.

--

wpt-commits: e7ddb54f72ef3db8d6a9d787660d0aeb4c72e4f5
wpt-pr: 27596

testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-005.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:[email protected]" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" />
+<link rel="match" href="reference/flexbox-min-width-auto-005-ref.html" />
+<meta name="assert" content="Test that min-width:auto does not incorrectly stretch items with aspect ratio" />
+
+<style>
+.reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 50px;
+    z-index: -1;
+}
+.constrained-flex {
+    display: flex;
+    height: 50px;
+}
+br { margin: 50px; }
+</style>
+
+<p>Test passes if there is <strong>no red</strong> visible on the page.</p>
+
+<div class="reference-overlapped-red"></div>
+<div class="constrained-flex">
+    <img src="support/40x20-green.png" />
+</div>
+
+<br>
+
+<div class="reference-overlapped-red" style="width: 40px;"></div>
+<div style="display: flex">
+    <div class="constrained-flex">
+        <img src="support/40x20-green.png" />
+    </div>
+</div>

testing/web-platform/tests/css/css-flexbox/flexbox-min-width-auto-006.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:[email protected]" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto" />
+<link rel="match" href="reference/flexbox-min-width-auto-006-ref.html" />
+<meta name="assert" content="Test that min-width:auto does not incorrectly stretch items with aspect ratio" />
+
+<style>
+#reference-overlapped-red {
+    position: relative;
+    background-color: red;
+    width: 10px;
+    height: 10px;
+    top: 40px;
+    z-index: -1;
+}
+.constrained-width-flex {
+    width: 100px;
+    display: flex;
+    border: 1px solid black;
+}
+.constrained-height-flex {
+    display: flex;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.</p>
+
+<div class="constrained-width-flex">
+    <div class="constrained-height-flex">
+        <img  src="data:image/svg+xml,
+                <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+                    <rect width='100%' height='100%' fill='green'/>
+                </svg>"/>
+    </div>
+</div>
+
+<br>
+
+<div class="constrained-width-flex">
+    <div class="constrained-height-flex">
+        <img  src="support/60x60-green.png"/>
+    </div>
+</div>

testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-005-ref.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:[email protected]" />
+<style>
+div {
+  background-color: green;
+  height: 50px;
+  width: 100px;
+}
+span {
+  display: inline-block;
+  background-color: green;
+  height: 50px;
+  width: 40px;
+}
+br { margin: 50px; }
+</style>
+
+<p>Test passes if there is <strong>no red</strong> visible on the page.</p>
+<div></div>
+
+<br>
+
+<span></span>

testing/web-platform/tests/css/css-flexbox/reference/flexbox-min-width-auto-006-ref.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:[email protected]" />
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+#green-square {
+    background: green;
+    margin-top: 40px;
+    width: 20px;
+    height: 20px;
+}
+#green-rectange {
+    background: green;
+    width: 60px;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.</p>
+<div class="box">
+    <div id="green-square"></div>
+</div>
+
+<br>
+
+<div class="box">
+    <div id="green-rectange"></div>
+</div>