1 files changed, 92 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-grid-001.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-grid-001.html
new file mode 100644
index 0000000000..f5ab4254b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-fallback-grid-001.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+<link rel="author" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.cb {
+  position: relative;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-template-rows: 50px 100px 50px 50px;
+}
+.item {
+  background: lightgray;
+}
+.spacer {
+  background: yellow;
+}
+.anchor1 {
+  anchor-name: --a1;
+  background: orange;
+  margin-left: 15px;
+  width: 20px;
+  height: 30px;
+}
+.target {
+  grid-column: 2 / 4;
+  grid-row: 2 / 4;
+  position: absolute;
+  position-fallback: --fallback1;
+  width: 100px;
+  height: 100px;
+  background: lime;
+  opacity: .2;
+}
+@position-fallback --fallback1 {
+  @try { /* Position to the left of the anchor. */
+    right: anchor(--a1 left);
+    top: anchor(--a1 top);
+  }
+  @try { /* Position to the right of the anchor with the wider width than CB. */
+    left: anchor(--a1 right);
+    top: anchor(--a1 top);
+    width: 250px;
+  }
+  @try { /* Position to the right of the anchor. This entry should succeed. */
+    left: anchor(--a1 right);
+    top: anchor(--a1 top);
+  }
+  @try { /* Zero-sized, the last entry wins if none succeeded. */
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+  }
+}
+</style>
+<body onload="checkLayout('.target')">
+  <div>
+    <div class="spacer" style="height: 10px"></div>
+    <div class="grid cb">
+      <div class="item">1</div>
+      <div class="item">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+      <div class="item">5</div>
+      <div class="item">
+        <div class="spacer" style="height: 20px"></div>
+        <div class="anchor1"></div>
+      </div>
+      <div class="item">7</div>
+      <div class="item">8</div>
+      <div class="item">9</div>
+      <div class="item">10</div>
+      <div class="item">11</div>
+      <div class="item">12</div>
+      <div class="item">13</div>
+      <div class="item">14</div>
+      <div class="item">15</div>
+      <div class="item">16</div>
+
+      <div class="target"
+           data-offset-x=135 data-offset-y=70
+           data-expected-height=100></div>
+    </div>
+  </div>
+</body>