[AspectRatio] Make intrinsic sizes respect aspect-ratio

cbiesinger · chromium-wpt-export-bot · commit 1b79dcabb3c9 · 2020-06-22T13:23:32.000-07:00
As discussed in w3c/csswg-drafts#5032 R=ikilpatrick@chromium.org Bug: 1093094, 1045668 Change-Id: Ic73428aef3a6cf426064e4b3824cfc5649e7c0c1
diff --git a/css/css-sizing/aspect-ratio/intrinsic-size-005.tentative.html b/css/css-sizing/aspect-ratio/intrinsic-size-005.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: min-content size contribution in an orthogonal flow</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="width: min-content; height: 100px; background: green;">
+  <div style="height: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div>
+</div>
+
+
diff --git a/css/css-sizing/aspect-ratio/intrinsic-size-006.tentative.html b/css/css-sizing/aspect-ratio/intrinsic-size-006.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: min-content size contribution with percentage block size</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="width: min-content; height: 100px; background: green;">
+  <div style="height: 100%;">
+    <div style="height: 100%; aspect-ratio: 1/1;"></div>
+  </div>
+</div>
diff --git a/css/css-sizing/aspect-ratio/intrinsic-size-007.tentative.html b/css/css-sizing/aspect-ratio/intrinsic-size-007.tentative.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: min-content size contribution with indefinite percentage block size</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="width: min-content; background: green;">
+  <!-- Indefinite height here - we should "fall through" to the
+       inner div and calculate 100px, instead of treating 100% as 0. -->
+  <div style="height: 100%; aspect-ratio: 1/1;">
+    <div style="width: 100px; height: 100px;"></div>
+  </div>
+</div>
+
diff --git a/css/css-sizing/aspect-ratio/intrinsic-size-008.tentative.html b/css/css-sizing/aspect-ratio/intrinsic-size-008.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: min-content size contribution with percentage block size</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 id="target" style="width: min-content; height: 200px; background: green;">
+  <div style="height: 100%;">
+    <div style="height: 100%; aspect-ratio: 1/1;"></div>
+  </div>
+</div>
+
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,13 @@ @@
 +>
 +<title>CSS aspect-ratio: min-content size contribution in an orthogonal flowtitle>
 +<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 redstrong>.p>
++
 +<div style="width: min-content; height: 100px; background: green;">
 +  <div style="height: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;">div>
 +div>
++
++