[AspectRatio] Handle min-inline-size: auto for aspect ratio
For the default min-height/width, aspect-ratio should only be the minimum
size, and the resulting inline size should grow to fit all the content:
https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum
This is the inline version of https://crrev.com/c/2186076
Bug: 1045668
Change-Id: I55eb523ef53df09a64f55ea2883abeb75e1d778c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2197341
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Auto-Submit: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#768474}
diff --git a/css/css-sizing/aspect-ratio/block-aspect-ratio-015.tentative.html b/css/css-sizing/aspect-ratio/block-aspect-ratio-015.tentative.html
new file mode 100644
index 0000000..3f9e833
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/block-aspect-ratio-015.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div inline size + min-width: auto</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="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="background: green; height: 100px; aspect-ratio: 1/2;">
+ <div style="width: 100px;"></div>
+</div>
diff --git a/css/css-sizing/aspect-ratio/block-aspect-ratio-016.tentative.html b/css/css-sizing/aspect-ratio/block-aspect-ratio-016.tentative.html
new file mode 100644
index 0000000..7bd21e9
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/block-aspect-ratio-016.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div inline size + min-width: auto</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="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="With min-width: auto and content smaller than the aspect ratio size, we should still size per aspect-ratio">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; height: 100px; aspect-ratio: 1/1;">
+ <div style="width: 50px"></div>
+</div>
diff --git a/css/css-sizing/aspect-ratio/block-aspect-ratio-017.tentative.html b/css/css-sizing/aspect-ratio/block-aspect-ratio-017.tentative.html
new file mode 100644
index 0000000..4ea0d69
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/block-aspect-ratio-017.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div inline size + min-width: auto</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="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="writing-mode: vertical-lr; background: green; width: 100px; aspect-ratio: 2/1;">
+ <div style="height: 100px"></div>
+</div>
diff --git a/css/css-sizing/aspect-ratio/block-aspect-ratio-018.tentative.html b/css/css-sizing/aspect-ratio/block-aspect-ratio-018.tentative.html
new file mode 100644
index 0000000..6c92b32
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/block-aspect-ratio-018.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div inline size + min-width: auto</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="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-width: auto">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; height: 100px; aspect-ratio: 1/1; overflow: hidden;">
+ <div style="width: 100px; display: inline-block;"></div>
+ <div style="width: 500px; display: inline-block; background: red;"></div>
+</div>
