Bug 1636310 [wpt PR 23469] - [AspectRatio] Handle min-block-size: auto for aspect ratio, a=testonly
authorChristian Biesinger <cbiesinger@chromium.org>
Wed, 13 May 2020 09:48:54 +0000
changeset 531164 5744cac34dd5c55fbd89e9b2f7f1bb4bcbf2d0e6
parent 531163 65e18ed8d76fd4b35f9fdf357507125797a5d4fd
child 531165 2b05123fd17f98cf88058a2afafe22593493457e
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1636310, 23469, 1045668, 2186076, 767012
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1636310 [wpt PR 23469] - [AspectRatio] Handle min-block-size: auto for aspect ratio, a=testonly Automatic update from web-platform-tests [AspectRatio] Handle min-block-size: auto for aspect ratio For the default min-height/width, aspect-ratio should only be the minimum size, and the resulting block size should grow to fit all the content: https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum Bug: 1045668 Change-Id: I06385087d778e7f05e7097dc25d6858397d0c0e1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2186076 Auto-Submit: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Cr-Commit-Position: refs/heads/master@{#767012} -- wpt-commits: 0e87b71ad6e6951b22586dce491f7ee1cf698e46 wpt-pr: 23469
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.tentative.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html
testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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; width: 100px; aspect-ratio: 2/1;">
+  <div style="height: 100px"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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-height: auto">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: hidden;">
+  <div style="height: 100px"></div>
+  <div style="height: 500px; background: red;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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-square-with-vertical-scrollbar.html" />
+<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-height: auto">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: auto;">
+  <div style="height: 100px"></div>
+  <div style="height: 500px; background: red;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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-square-with-scrollbar.html" />
+<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-height: auto">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: scroll;">
+  <div style="height: 100px"></div>
+  <div style="height: 500px; background: red;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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-height: 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; width: 100px; aspect-ratio: 1/1;">
+  <div style="height: 50px"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + min-height: 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; height: 100px; aspect-ratio: 1/2;">
+  <div style="width: 100px"></div>
+</div>
--- a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.tentative.html
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.tentative.html
@@ -2,12 +2,12 @@
 <title>CSS aspect-ratio: Wrapping column flexbox line length</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-flexbox/#line-sizing" title="9.2.3.B">
 <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; flex-wrap: wrap; width: 100px; aspect-ratio: 1/1;">
+<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; aspect-ratio: 1/1; min-height: 0;">
   <div style="background: green; width: 50px; height: 100px;"></div>
   <div style="background: green; width: 50px; height: 100px;"></div>
 </div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: Wrapping column flexbox line length</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-flexbox/#line-sizing" title="9.2.3.B">
+<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; flex-wrap: wrap; width: 200px; aspect-ratio: 4/1;">
+  <div style="background: green; width: 100px; height: 50px;"></div>
+  <div style="background: green; width: 100px; height: 50px;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + percentage resolution</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: 100px; aspect-ratio: 1/1;">
+  <div style="background: green; height: 100%;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + percentage resolution</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: 100px; aspect-ratio: 1/1;">
+  <div style="background: green; height: 100%; width: 100%; writing-mode: vertical-lr;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + percentage resolution</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: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;">
+  <div style="background: green; height: 100%; width: 100%;"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.tentative.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: div block size + percentage resolution</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: 100px; aspect-ratio: 2/1;"> <!-- height = 100px due to min-height: auto -->
+  <div style="background: green; height: 50px;"></div>
+  <div style="background: green; height: 100%;"></div> <!-- should be 50px -->
+</div>
--- a/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.tentative.html
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.tentative.html
@@ -7,9 +7,9 @@
 <script src="/resources/testharnessreport.js"></script>
 <script>
 onload = function() {
   test(function() {
     assert_equals(document.body.offsetHeight, 100);
   }, "body height is 100");
 };
 </script>
-<body style="width: 100px; aspect-ratio: 1/1;">
+<body style="width: 100px; aspect-ratio: 1/1; min-height: 0;">
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.tentative.html
@@ -0,0 +1,15 @@
+<!-- quirks mode -->
+<title>Aspect ratio and quirks mode</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+<meta name="flags" content="dom" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+onload = function() {
+  test(function() {
+    assert_equals(document.body.clientHeight, document.documentElement.clientHeight);
+  }, "body height should match documentElement due to min-height: auto");
+};
+</script>
+<body style="width: 100px; aspect-ratio: 1/1;">
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; height: 100px; overflow: scroll;">
+  <div style="height: 600px"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="background: green; width: 100px; height: 100px; overflow-y: scroll;">
+  <div style="height: 600px"></div>
+</div>