1 files changed, 195 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html
new file mode 100644
index 0000000000..39595276d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/try-tactic-alignment.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: try-tactic, justify/align-self</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;
+  }
+  #target, #ref {
+    position: absolute;
+    left: 450px; /* force fallback */
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+  }
+  #ref {
+    background-color: seagreen;
+  }
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <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_justify_flip(try_tactic, untransformed, transformed, direction, writing_mode) {
+  if (direction==undefined) {
+    direction = 'ltr';
+  }
+  if (writing_mode==undefined) {
+    writing_mode = 'horizontal-tb';
+  }
+  test((t) => {
+    t.add_cleanup(() => {
+      document.documentElement.style = '';
+      style.textContent = '';
+    });
+    document.documentElement.style.direction = direction;
+    document.documentElement.style.writingMode = writing_mode;
+    style.textContent = `
+      @position-try --pf {
+        inset: 0;
+        ${untransformed}
+      }
+      #target {
+        position-try-options: --pf ${try_tactic};
+      }
+      @position-try --ref {
+        inset: 0;
+        ${transformed}
+      }
+      #ref {
+        position-try-options: --ref;
+      }
+    `;
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${try_tactic}, ${untransformed}, ${transformed}, ${direction}, ${writing_mode}`);
+}
+
+test_justify_flip(
+  '',
+  'justify-self:start;align-self:start',
+  'justify-self:start;align-self:start');
+
+test_justify_flip(
+  'flip-inline',
+  'justify-self:start;align-self:start',
+  'justify-self:end;align-self:start');
+
+test_justify_flip(
+  'flip-block',
+  'justify-self:start;align-self:start',
+  'justify-self:start;align-self:end');
+
+test_justify_flip(
+  'flip-block flip-inline',
+  'justify-self:start;align-self:start',
+  'justify-self:end;align-self:end');
+
+test_justify_flip(
+  'flip-start',
+  'justify-self:start;align-self:end',
+  'justify-self:end;align-self:start');
+
+test_justify_flip(
+  'flip-block flip-start',
+  'justify-self:start;align-self:start',
+  'justify-self:end;align-self:start');
+
+test_justify_flip(
+  'flip-inline flip-start',
+  'justify-self:start;align-self:start',
+  'justify-self:start;align-self:end');
+
+test_justify_flip(
+  'flip-block flip-inline flip-start',
+  'justify-self:start;align-self:start',
+  'justify-self:end;align-self:end');
+
+// left/right are special cases, because they're supported by
+// justify-self, but not align-self:
+
+test_justify_flip(
+  'flip-inline',
+  'justify-self:left;align-self:start',
+  'justify-self:right;align-self:start');
+
+test_justify_flip(
+  'flip-start',
+  'justify-self:left;align-self:end',
+  'justify-self:end;align-self:self-start');
+
+test_justify_flip(
+  'flip-start',
+  'justify-self:right;align-self:start',
+  'justify-self:start;align-self:self-end');
+
+
+// That that all relevant computed values can be transformed:
+
+function test_computed_value(try_tactic, property, value, expected) {
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+    });
+    style.textContent = `
+      @position-try --pf {
+        inset: 0;
+        ${property}:${value};
+      }
+      #target {
+        position-try-options: --pf ${try_tactic};
+      }
+    `;
+    assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
+  }, `${try_tactic}, ${property}:${value}`);
+}
+
+// No flip:
+for (let property of ['justify-self', 'align-self']) {
+  test_computed_value('', property, 'start', 'start');
+  test_computed_value('', property, 'end', 'end');
+  test_computed_value('', property, 'self-start', 'self-start');
+  test_computed_value('', property, 'self-end', 'self-end');
+  test_computed_value('', property, 'flex-start', 'flex-start');
+  test_computed_value('', property, 'flex-end', 'flex-end');
+}
+
+test_computed_value('flip-inline', 'justify-self', 'start', 'end');
+test_computed_value('flip-inline', 'justify-self', 'end', 'start');
+test_computed_value('flip-inline', 'justify-self', 'self-start', 'self-end');
+test_computed_value('flip-inline', 'justify-self', 'self-end', 'self-start');
+test_computed_value('flip-inline', 'justify-self', 'flex-start', 'flex-end');
+test_computed_value('flip-inline', 'justify-self', 'flex-end', 'flex-start');
+test_computed_value('flip-inline', 'justify-self', 'left', 'right');
+test_computed_value('flip-inline', 'justify-self', 'right', 'left');
+
+test_computed_value('flip-block', 'align-self', 'start', 'end');
+test_computed_value('flip-block', 'align-self', 'end', 'start');
+test_computed_value('flip-block', 'align-self', 'self-start', 'self-end');
+test_computed_value('flip-block', 'align-self', 'self-end', 'self-start');
+test_computed_value('flip-block', 'align-self', 'flex-start', 'flex-end');
+test_computed_value('flip-block', 'align-self', 'flex-end', 'flex-start');
+
+test_justify_flip(
+  'flip-start',
+  'justify-self:left;align-self:end',
+  'justify-self:end;align-self:self-start',
+  'ltr',
+  'vertical-rl');
+
+test_justify_flip(
+  'flip-start',
+  'justify-self:left;align-self:start',
+  'justify-self:start;align-self:self-end',
+  'rtl');
+
+</script>