1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
new file mode 100644
index 0000000000..d4a1f4fa24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Tests the CSSOM interfaces of @position-try rules</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#interfaces">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="anchor"></div>
+<div id="not-anchor"></div>
+<div id="target"></div>
+
+<script>
+function createStyle(t, text) {
+  const style = document.createElement('style');
+  style.textContent = text;
+  t.add_cleanup(() => style.remove());
+  document.head.appendChild(style);
+  return style;
+}
+
+test(t => {
+  const style = createStyle(
+      t, '@position-try --pf { left: anchor(right); }');
+  const positionTryRule = style.sheet.cssRules[0];
+  assert_true(positionTryRule instanceof CSSPositionTryRule);
+  assert_equals(positionTryRule.name, '--pf');
+  assert_true(positionTryRule.style instanceof CSSStyleDeclaration);
+  assert_equals(positionTryRule.style.length, 1);
+  assert_equals(positionTryRule.style.left, 'anchor(right)');
+}, 'CSSPositionTryRule attribute values');
+
+test(t => {
+  const style = createStyle(t, `
+    @position-try --pf { top: anchor(top); left: 0; }
+    #anchor, #not-anchor, #target {
+      position: absolute; width: 100px; height: 100px;
+    }
+    #anchor { top: 100px; left: 0; anchor-name: --a; }
+    #not-anchor { top: 200px; left: 0; anchor-name: --b; }
+    #target { position-try-options: --pf; anchor-default: --a; left: 999999px; }
+  `);
+  const positionTryRule = style.sheet.cssRules[0];
+
+  // Check the initial position fallback result
+  assert_equals(target.getBoundingClientRect().left, 0);
+  assert_equals(target.getBoundingClientRect().top, 100);
+
+  // `left` is an allowed property in `@position-try` and should affect position fallback.
+  positionTryRule.style.setProperty('left', 'anchor(right)');
+  assert_equals(target.getBoundingClientRect().left, 100);
+  assert_equals(target.getBoundingClientRect().top, 100);
+
+  // These properties are disallowed in `@position-try` rule, and hence should not affect
+  // position fallback.
+  positionTryRule.style.setProperty('anchor-default', '--b');
+  positionTryRule.style.setProperty('position', 'static');
+  assert_equals(target.getBoundingClientRect().left, 100);
+  assert_equals(target.getBoundingClientRect().top, 100);
+}, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties');
+
+</script>