1 files changed, 188 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html
new file mode 100644
index 0000000000..7339c4f41d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: inset-area in @position-try</title>
+<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-options'>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<style>
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 50px;
+    height: 50px;
+    background-color: tomato;
+    anchor-name: --a;
+  }
+  #target {
+    left: 200px; /* force fallback */
+  }
+  #target, #ref {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+    inset-area: bottom right;
+    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>
+
+// Test that inside-area, when used inside @position-try, works the same
+// as when it's specified in the base style.
+function test_inset_area_ref(inset_area) {
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+    });
+    style.textContent = `
+      @position-try --pt {
+        inset: unset; /* Undo force fallback */
+        inset-area: ${inset_area};
+      }
+      #target {
+        position-try-options: --pt;
+      }
+      #ref {
+        inset-area: ${inset_area};
+      }
+    `;
+    assert_true(CSS.supports('inset-area', 'top left'));
+    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${inset_area}`);
+}
+
+test_inset_area_ref('none');
+test_inset_area_ref('span-all');
+test_inset_area_ref('span-all span-all');
+test_inset_area_ref('top left');
+test_inset_area_ref('top center');
+test_inset_area_ref('top right');
+test_inset_area_ref('center left');
+test_inset_area_ref('center center');
+test_inset_area_ref('center right');
+test_inset_area_ref('bottom left');
+test_inset_area_ref('bottom center');
+test_inset_area_ref('bottom right');
+test_inset_area_ref('start start');
+test_inset_area_ref('start center');
+test_inset_area_ref('start end');
+test_inset_area_ref('center start');
+test_inset_area_ref('center end');
+test_inset_area_ref('end start');
+test_inset_area_ref('end center');
+test_inset_area_ref('end end');
+test_inset_area_ref('self-start self-start');
+test_inset_area_ref('self-start center');
+test_inset_area_ref('self-start self-end');
+test_inset_area_ref('center self-start');
+test_inset_area_ref('center self-end');
+test_inset_area_ref('self-end self-start');
+test_inset_area_ref('self-end center');
+test_inset_area_ref('self-end self-end');
+test_inset_area_ref('y-start x-start');
+test_inset_area_ref('y-start center');
+test_inset_area_ref('y-start x-end');
+test_inset_area_ref('center x-start');
+test_inset_area_ref('center x-end');
+test_inset_area_ref('y-end x-start');
+test_inset_area_ref('y-end center');
+test_inset_area_ref('y-end x-end');
+test_inset_area_ref('y-self-start x-self-start');
+test_inset_area_ref('y-self-start center');
+test_inset_area_ref('y-self-start x-self-end');
+test_inset_area_ref('center x-self-start');
+test_inset_area_ref('center x-self-end');
+test_inset_area_ref('y-self-end x-self-start');
+test_inset_area_ref('y-self-end center');
+test_inset_area_ref('y-self-end x-self-end');
+test_inset_area_ref('span-y-self-start span-x-self-end');
+test_inset_area_ref('span-bottom span-all');
+
+</script>
+
+<style>
+  @position-try --top {
+    inset: unset; /* Undo force fallback */
+    inset-area: top;
+  }
+  @position-try --right {
+    inset: unset; /* Undo force fallback */
+    inset-area: right;
+  }
+  @position-try --bottom {
+    inset: unset; /* Undo force fallback */
+    inset-area: bottom;
+  }
+  @position-try --left {
+    inset: unset; /* Undo force fallback */
+    inset-area: left;
+  }
+</style>
+<script>
+
+// Test that an element with the specified position-try-options is placed
+// at the same position as a reference element with inset-area:`expected`.
+// This test uses #target/#ref size of 60x60px, which causes overflow if
+// if we attempt the --right and --bottom positions.
+function test_inset_area_placement(position_try_options, expected) {
+  test((t) => {
+    style.textContent = `
+      #target, #ref {
+        width: 60px;
+        height: 60px;
+      }
+      #target {
+        position-try-options: ${position_try_options};
+      }
+      #ref {
+        inset-area: ${expected};
+      }
+    `;
+    assert_true(CSS.supports('inset-area', 'top left'));
+    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `Placement: ${position_try_options}`);
+}
+
+test_inset_area_placement('--top', 'top');
+test_inset_area_placement('--left', 'left');
+
+// No space to to the right/bottom:
+test_inset_area_placement('--right, --top', 'top');
+test_inset_area_placement('--bottom, --top', 'top');
+test_inset_area_placement('--bottom, --right, --top', 'top');
+test_inset_area_placement('--bottom, --right, --left, --top', 'left');
+test_inset_area_placement('--bottom, --left, --top, --right', 'left');
+
+// Flipping:
+test_inset_area_placement('--right flip-inline', 'left');
+test_inset_area_placement('--bottom flip-block', 'top');
+test_inset_area_placement('--left flip-start', 'top');
+
+// left + flip-inline => right (no space).
+test_inset_area_placement('--left flip-inline, --top', 'top');
+// top + flip-block => bottom (no space).
+test_inset_area_placement('--top flip-block, --left', 'left');
+// left + flip-start flip-block => bottom (no space).
+test_inset_area_placement('--left flip-start flip-block, --left', 'left');
+
+</script>