1 files changed, 142 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html
new file mode 100644
index 0000000000..531dc303d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<title>Tests fallback positions that overflow the inset-modified containing block regardless of scrolling</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/test-common.js"></script>
+<style>
+body { margin: 0; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+.vrl { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; }
+
+.cb {
+  width: 200px;
+  height: 200px;
+  transform: scale(1);
+}
+
+.spacer {
+  block-size: 50px;
+}
+
+.anchor {
+  width: 100px;
+  height: 100px;
+  margin-inline-start: 50px;
+  background: orange;
+  anchor-name: --a;
+}
+
+.anchored {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background: lime;
+}
+
+.exceeds-end {
+  position-fallback: --exceeds-end;
+}
+
+/* Used on a element whose block and inline axes are the same with its
+   containing block, so that the first two positions will exceed the end edges
+   of the IMCB, and the last position will be used. */
+@position-fallback --exceeds-end {
+  @try {
+    left: 0;
+    right: anchor(--a left);
+    width: 100px;
+  }
+
+  @try {
+    top: 0;
+    bottom: anchor(--a top);
+    height: 100px;
+  }
+
+  @try {
+    top: 11px;
+    left: 22px;
+  }
+}
+
+.exceeds-start {
+  position-fallback: --exceeds-start;
+}
+
+/* Used on a element whose block and inline axes are in the opposite directions
+   of its containing block, so that the first two positions will exceed the
+   start edges of the IMCB, and the last position will be used. */
+@position-fallback --exceeds-start {
+  @try {
+    bottom: 0;
+    top: anchor(--a bottom);
+    height: 100px;
+  }
+
+  @try {
+    right: 0;
+    left: anchor(--a right);
+    width: 100px;
+  }
+
+  @try {
+    top: 11px;
+    left: 22px;
+  }
+}
+
+.exceeds-size {
+  position-fallback: --exceeds-size;
+}
+
+/* Both inset sides are `auto`, but the size is too big to fit in the containing
+   block. */
+@position-fallback --exceeds-size {
+  @try {
+    top: anchor(--a bottom);
+    left: auto;
+    right: auto;
+    width: 300px;
+  }
+
+  @try {
+    left: anchor(--a right);
+    top: auto;
+    bottom: auto;
+    height: 300px;
+  }
+
+  @try {
+    top: 11px;
+    left: 22px;
+  }
+}
+</style>
+
+<body onload="checkLayoutForAnchorPos('.anchored')">
+  <div class=cb>
+    <div class=spacer></div>
+    <div class=anchor></div>
+    <div class="anchored exceeds-end"
+         data-offset-x=22 data-offset-y=11></div>
+  </div>
+
+  <div class="cb rtl vrl">
+    <div class=spacer></div>
+    <div class=anchor></div>
+    <div class="anchored ltr vlr exceeds-start"
+         data-offset-x=22 data-offset-y=11></div>
+  </div>
+
+  <div class="cb">
+    <div class=spacer></div>
+    <div class=anchor></div>
+    <div class="anchored exceeds-size"
+         data-offset-x=22 data-offset-y=11></div>
+  </div>
+</body>