1 files changed, 155 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html
new file mode 100644
index 0000000000..3e42913ffc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-align-justify-wm-dir.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: inset-area positioning - alignment with writing-mode and direction</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  /* A 300x300 container with a 100x100 centered anchor */
+  #container {
+    position: relative;
+    width: 300px;
+    height: 300px;
+  }
+  #anchor {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    width: 100px;
+    height: 100px;
+    anchor-name: --anchor;
+  }
+  #anchored {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    inset: 10px;
+    position-anchor: --anchor;
+  }
+</style>
+<div id="container">
+  <div id="anchor"></div>
+  <div id="anchored"></div>
+</div>
+<script>
+  function test_inset_area(writing_direction, inset_area, expected_offsets) {
+    anchored.style.insetArea = inset_area;
+    test(() => {
+      assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft");
+      assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop");
+      assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth");
+      assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight");
+    }, "Offsets for: " + inset_area + " with writing-mode / direction: " + writing_direction);
+  }
+
+  const top_left = {left:80, top:80, width:10, height:10};
+  const top_right = {left:210, top:80, width:10, height:10};
+  const bottom_left = {left:80, top:210, width:10, height:10};
+  const bottom_right = {left:210, top:210, width:10, height:10};
+
+  anchored.style.writingMode = "horizontal-tb";
+  anchored.style.direction = "ltr";
+
+  // Writing-mode and direction on container
+  let writing_direction = "containing-block: horizontal-tb / rtl";
+  container.style.writingMode = "horizontal-tb";
+  container.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", top_right);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", top_right);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // containing-block: vertical-lr / ltr
+  // self: horizontal-tb / ltr
+  writing_direction = "containing-block: vertical-lr / ltr";
+  container.style.writingMode = "vertical-lr";
+  container.style.direction = "ltr";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // containing-block: vertical-lr / rtl
+  // self: horizontal-tb / ltr
+  writing_direction = "containing-block: vertical-lr / rtl";
+  container.style.writingMode = "vertical-lr";
+  container.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", bottom_left);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", bottom_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // containing-block: vertical-rl / ltr
+  // self: horizontal-tb / ltr
+  writing_direction = "containing-block: vertical-rl / ltr";
+  container.style.writingMode = "vertical-rl";
+  container.style.direction = "ltr";
+  test_inset_area(writing_direction, "start start", top_right);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", top_right);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // containing-block: vertical-rl / rtl
+  // self: horizontal-tb / ltr
+  writing_direction = "containing-block: vertical-rl / rtl";
+  container.style.writingMode = "vertical-rl";
+  container.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", bottom_right);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", bottom_right);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // Writing-mode and direction on self
+  container.style.writingMode = "horizontal-tb";
+  container.style.direction = "ltr";
+
+  // containing-block: horizontal-tb / ltr
+  // self: horizontal-tb / rtl
+  writing_direction = "self: horizontal-tb / rtl";
+  anchored.style.writingMode = "horizontal-tb";
+  anchored.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", top_right);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_right);
+
+  // containing-block: horizontal-tb / ltr
+  // self: vertical-lr / ltr
+  writing_direction = "self: vertical-lr / ltr";
+  anchored.style.writingMode = "vertical-lr";
+  anchored.style.direction = "ltr";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", top_left);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_left);
+
+  // containing-block: horizontal-tb / ltr
+  // self: vertical-lr / rtl
+  writing_direction = "self: vertical-lr / rtl";
+  anchored.style.writingMode = "vertical-lr";
+  anchored.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", bottom_left);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", bottom_left);
+
+  // containing-block: horizontal-tb / ltr
+  // self: vertical-rl / ltr
+  writing_direction = "self: vertical-rl / ltr";
+  anchored.style.writingMode = "vertical-rl";
+  anchored.style.direction = "ltr";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", top_right);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", top_right);
+
+  // containing-block: horizontal-tb / ltr
+  // self: vertical-rl / rtl
+  writing_direction = "self: vertical-rl / rtl";
+  anchored.style.writingMode = "vertical-rl";
+  anchored.style.direction = "rtl";
+  test_inset_area(writing_direction, "start start", top_left);
+  test_inset_area(writing_direction, "self-start self-start", bottom_right);
+  test_inset_area(writing_direction, "x-start y-start", top_left);
+  test_inset_area(writing_direction, "x-self-start y-self-start", bottom_right);
+
+</script>