1 files changed, 113 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html
new file mode 100644
index 0000000000..20cf0f87e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-percentage.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: try-tactic, percentage</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-options-try-tactic">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 150px;
+    top: 150px;
+    width: 100px;
+    height: 50px;
+    background-color: coral;
+    anchor-name: --a;
+  }
+  #target, #ref {
+    position: absolute;
+    left: 450px; /* force fallback */
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+    position-anchor: --a;
+  }
+  #ref {
+    background-color: seagreen;
+  }
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=target></div>
+  <div id=ref></div>
+</div>
+<script>
+
+// Verify that a given try-tactic + untransformed declaration equals
+// a reference element using `transformed` directly.
+function test_anchor_flip(try_tactic, untransformed, transformed) {
+  test((t) => {
+    style.textContent = `
+      @position-try --pf {
+        inset: auto;
+        ${untransformed}
+      }
+      #target {
+        position-try-options: --pf ${try_tactic};
+      }
+      @position-try --ref {
+        inset: auto;
+        ${transformed}
+      }
+      #ref {
+        position-try-options: --ref;
+      }
+    `;
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${try_tactic}, ${untransformed}, ${transformed}`);
+}
+
+test_anchor_flip('', 'left:anchor(0%)', 'left:anchor(left)');
+test_anchor_flip('', 'left:anchor(100%)', 'left:anchor(right)');
+test_anchor_flip('', 'left:anchor(50%)', 'left:anchor(center)');
+test_anchor_flip('', 'top:anchor(0%)', 'top:anchor(top)');
+test_anchor_flip('', 'top:anchor(100%)', 'top:anchor(bottom)');
+test_anchor_flip('', 'top:anchor(50%)', 'top:anchor(center)');
+
+test_anchor_flip('flip-inline', 'left:anchor(10%)', 'right:anchor(90%)');
+test_anchor_flip('flip-inline', 'left:anchor(calc(10% + 20%))', 'right:anchor(70%)');
+
+test_anchor_flip('flip-block', 'left:anchor(0%)', 'left:anchor(0%)');
+test_anchor_flip('flip-block', 'left:anchor(100%)', 'left:anchor(100%)');
+test_anchor_flip('flip-block', 'top:anchor(0%)', 'bottom:anchor(100%)');
+test_anchor_flip('flip-block', 'top:anchor(100%)', 'bottom:anchor(0%)');
+
+test_anchor_flip('flip-inline', 'left:anchor(0%)', 'right:anchor(100%)');
+test_anchor_flip('flip-inline', 'left:anchor(100%)', 'right:anchor(0%)');
+test_anchor_flip('flip-inline', 'top:anchor(0%)', 'top:anchor(0%)');
+test_anchor_flip('flip-inline', 'top:anchor(100%)', 'top:anchor(100%)');
+
+test_anchor_flip('flip-block flip-inline', 'left:anchor(0%)', 'right:anchor(100%)');
+test_anchor_flip('flip-block flip-inline', 'left:anchor(100%)', 'right:anchor(0%)');
+test_anchor_flip('flip-block flip-inline', 'top:anchor(0%)', 'bottom:anchor(100%)');
+test_anchor_flip('flip-block flip-inline', 'top:anchor(100%)', 'bottom:anchor(0%)');
+
+test_anchor_flip('flip-start', 'left:anchor(0%)', 'top:anchor(0%)');
+test_anchor_flip('flip-start', 'left:anchor(100%)', 'top:anchor(100%)');
+test_anchor_flip('flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)');
+test_anchor_flip('flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)');
+
+test_anchor_flip('flip-block flip-start', 'left:anchor(0%)', 'top:anchor(0%)');
+test_anchor_flip('flip-block flip-start', 'left:anchor(100%)', 'top:anchor(100%)');
+test_anchor_flip('flip-block flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)');
+test_anchor_flip('flip-block flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)');
+
+test_anchor_flip('flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)');
+test_anchor_flip('flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)');
+test_anchor_flip('flip-inline flip-start', 'bottom:anchor(0%)', 'right:anchor(0%)');
+test_anchor_flip('flip-inline flip-start', 'bottom:anchor(100%)', 'right:anchor(100%)');
+
+test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(0%)', 'bottom:anchor(100%)');
+test_anchor_flip('flip-block flip-inline flip-start', 'left:anchor(100%)', 'bottom:anchor(0%)');
+test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(0%)', 'left:anchor(100%)');
+test_anchor_flip('flip-block flip-inline flip-start', 'bottom:anchor(100%)', 'left:anchor(0%)');
+
+</script>