aspect-ratio should be used for abspos when insets on the block axis are specified.
Based on https://github.com/w3c/csswg-drafts/issues/5151,
if the block size is auto, we still can use the insets to resolve the auto
block size on absoluate position elements, so we still can use this resolved
block size to calculate the inline size through aspect-ratio.
Differential Revision: https://phabricator.services.mozilla.com/D96277
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1651776
gecko-commit: e65987e878dcebc6a8e07bace669082bc3386fbe
gecko-reviewers: TYLin
diff --git a/css/css-sizing/aspect-ratio/abspos-004.html b/css/css-sizing/aspect-ratio/abspos-004.html
index b7685f1..c16c8c7 100644
--- a/css/css-sizing/aspect-ratio/abspos-004.html
+++ b/css/css-sizing/aspect-ratio/abspos-004.html
@@ -2,14 +2,14 @@
<title>CSS aspect-ratio: abspos div inline 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="help" href="https://drafts.csswg.org/css-position/#abspos-auto-size">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
-<!-- It is not entirely clear if this is testing the right behavior. See:
- https://github.com/w3c/csswg-drafts/issues/5151
- -->
-
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
-<div style="width: 500px; height: 100px; position: relative;">
- <div style="background: green; aspect-ratio: 1/1; position: absolute; left: 0; top: 0; bottom: 0;"></div>
+<div style="width: 300px; height: 50px; position: relative;">
+ <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; top: 0; bottom: 0;"></div>
+</div>
+<div style="width: 100px; height: 300px; position: relative;">
+ <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; right: 0; top: 0; writing-mode: vertical-lr;"></div>
</div>
diff --git a/css/css-sizing/aspect-ratio/abspos-015.html b/css/css-sizing/aspect-ratio/abspos-015.html
new file mode 100644
index 0000000..efd9759
--- /dev/null
+++ b/css/css-sizing/aspect-ratio/abspos-015.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: abspos div block size</title>
+<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-position/#abspos-auto-size">
+<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: 300px; height: 50px; position: relative;">
+ <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; top: 0; bottom: 0; writing-mode: vertical-lr"></div>
+</div>
+<div style="width: 100px; height: 300px; position: relative;">
+ <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; right: 0; top: 0;"></div>
+</div>
