1 files changed, 67 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-parse-valid.html b/testing/web-platform/tests/css/css-anchor-position/anchor-parse-valid.html
new file mode 100644
index 0000000000..4690775388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-parse-valid.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>Tests parsing of the anchor() function</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+
+<script>
+const anchorNames = [
+  '',
+  '--foo',
+];
+
+const insetProperties = [
+  'left',
+  'right',
+  'top',
+  'bottom',
+  'inset-block-start',
+  'inset-block-end',
+  'inset-inline-start',
+  'inset-inline-end',
+];
+
+const anchorSides = [
+  'left',
+  'right',
+  'top',
+  'bottom',
+  'start',
+  'end',
+  'self-start',
+  'self-end',
+  'center',
+  '50%',
+];
+
+const fallbacks = [
+  null,
+  '1px',
+  '50%',
+  'calc(50% + 1px)',
+  'anchor(left)',
+  'anchor(--bar left)',
+  'anchor(--bar left, anchor(--baz right))',
+];
+
+// Tests basic combinations
+for (let property of insetProperties) {
+  // Using a wrong anchor-side (e.g., `top: anchor(--foo left)`) doesn't cause a
+  // parse error, but triggers the fallback when resolved.
+  for (let name of anchorNames) {
+    for (let side of anchorSides) {
+      for (let fallback of fallbacks) {
+        let value = `anchor(${name ? name + ' ' : ''}${side}${fallback ? ', ' + fallback : ''})`;
+        test_valid_value(property, value);
+      }
+    }
+  }
+}
+
+// Tests that anchor() can be used in a calc tree
+test_valid_value('top', 'calc((anchor(--foo top) + anchor(--bar bottom)) / 2)');
+test_valid_value('top', 'anchor(--foo top, calc(anchor(--bar bottom) * 0.5))');
+test_valid_value('top', 'min(100px, 10%, anchor(--foo top), anchor(--bar bottom))');
+</script>