From 6fca7647aef0abc760b43507498d5c88c8d2e1fb Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Tue, 6 Aug 2024 10:01:24 -0700
Subject: [PATCH] Rename inset-area to position-area

Per the CSSWG, this property has been renamed:

https://github.com/w3c/csswg-drafts/issues/10209#issuecomment-2221005001

This does a mechanical rename:
 - `inset-area` to `position-area`
 - `insetArea` to `positionArea`
 - `InsetArea` to `PositionArea`
 - `inset_area` to `position_Area`

After the mechanical rename, there were a handful of hand-fixups,
e.g. in cases where the old property (inset-area) needs to stay,
or in setting up feature access to both.

This CL also adds a surrogate from `inset-area` to `position-area`,
so that both names keep working. Separate runtime flags are created
to enable either of these property names. As-is, `inset-area` is
enabled for "stable", and `position-area` is "experimental". And
finally, a virtual test suite is added that enables `inset-area`
and disables `position-area` and tests that the old WPTs still pass.
Note that the WPTs had to be slightly modified for their new copied
location within the VTS.

Bug: 352333393
Change-Id: I92d3347ae109546a155771a21b5d6aee2a81391d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5698212
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1337930}
---
 .../anchor-scroll-position-try-013.html       |   2 +-
 .../anchor-scroll-position-try-014.html       |   2 +-
 .../at-position-try-allowed-declarations.html |   2 +-
 .../at-position-try-cssom.html                |   2 +-
 .../inset-area-align-justify.html             |  65 -----
 .../inset-area-anchor-outside.html            |  56 ----
 .../inset-area-anchor-partially-outside.html  |  56 ----
 css/css-anchor-position/inset-area-basic.html | 117 --------
 .../inset-area-computed.html                  |  22 --
 .../inset-area-in-position-try.html           | 188 -------------
 .../inset-area-parsing.html                   | 162 -----------
 .../inset-area-wm-dir.html                    | 257 ------------------
 .../last-successful-basic.html                |   2 +-
 .../last-successful-change-fallbacks.html     |   2 +-
 .../last-successful-change-try-rule.html      |   6 +-
 .../last-successful-intermediate-ignored.html |   2 +-
 ...> position-area-abs-inline-container.html} |  14 +-
 ...> position-area-align-justify-wm-dir.html} |  90 +++---
 .../position-area-align-justify.html          |  65 +++++
 .../position-area-anchor-outside.html         |  56 ++++
 ...osition-area-anchor-partially-outside.html |  56 ++++
 .../position-area-basic.html                  | 117 ++++++++
 ...tml => position-area-computed-insets.html} |  10 +-
 .../position-area-computed.html               |  22 ++
 ...n-grid.html => position-area-in-grid.html} |  14 +-
 .../position-area-in-position-try.html        | 188 +++++++++++++
 ...> position-area-inline-container-ref.html} |   0
 ...ml => position-area-inline-container.html} |  14 +-
 ....html => position-area-interpolation.html} |   6 +-
 .../position-area-parsing.html                | 162 +++++++++++
 ...l => position-area-scroll-adjust-ref.html} |   0
 ....html => position-area-scroll-adjust.html} |   8 +-
 ...ea-value.html => position-area-value.html} |  30 +-
 ...ts.html => position-area-with-insets.html} |  22 +-
 .../position-area-wm-dir.html                 | 176 ++++++++++++
 ... => position-try-order-position-area.html} |  78 +++---
 ...position-try-switch-from-fixed-anchor.html |   4 +-
 .../position-try-switch-to-fixed-anchor.html  |   4 +-
 .../position-visibility-add-no-overflow.html  |   2 +-
 ...on-visibility-anchors-valid.tentative.html |   2 +-
 ...ility-anchors-visible-after-scroll-in.html |   2 +-
 ...lity-anchors-visible-after-scroll-out.html |   2 +-
 ...visible-both-position-fixed.tentative.html |   2 +-
 ...isibility-anchors-visible-chained-001.html |   2 +-
 ...isibility-anchors-visible-chained-002.html |   2 +-
 ...isibility-anchors-visible-chained-003.html |   2 +-
 ...isibility-anchors-visible-chained-004.html |   2 +-
 ...ibility-anchors-visible-change-anchor.html |   2 +-
 ...anchors-visible-change-css-visibility.html |   2 +-
 ...bility-anchors-visible-css-visibility.html |   2 +-
 ...ors-visible-non-intervening-container.html |   2 +-
 ...hors-visible-position-fixed.tentative.html |   2 +-
 ...ibility-anchors-visible-stacked-child.html |   2 +-
 ...chors-visible-stacked-child.tentative.html |   2 +-
 ...ibility-anchors-visible-with-position.html |   2 +-
 .../position-visibility-anchors-visible.html  |   2 +-
 ...-visibility-no-overflow-stacked-child.html |   2 +-
 .../position-visibility-no-overflow.html      |   2 +-
 ...ion-visibility-remove-anchors-visible.html |   2 +-
 ...osition-visibility-remove-no-overflow.html |   2 +-
 .../property-interpolations.html              |   4 +-
 .../try-tactic-inset-area.html                | 251 -----------------
 .../try-tactic-position-area.html             | 251 +++++++++++++++++
 63 files changed, 1274 insertions(+), 1355 deletions(-)
 delete mode 100644 css/css-anchor-position/inset-area-align-justify.html
 delete mode 100644 css/css-anchor-position/inset-area-anchor-outside.html
 delete mode 100644 css/css-anchor-position/inset-area-anchor-partially-outside.html
 delete mode 100644 css/css-anchor-position/inset-area-basic.html
 delete mode 100644 css/css-anchor-position/inset-area-computed.html
 delete mode 100644 css/css-anchor-position/inset-area-in-position-try.html
 delete mode 100644 css/css-anchor-position/inset-area-parsing.html
 delete mode 100644 css/css-anchor-position/inset-area-wm-dir.html
 rename css/css-anchor-position/{inset-area-abs-inline-container.html => position-area-abs-inline-container.html} (71%)
 rename css/css-anchor-position/{inset-area-align-justify-wm-dir.html => position-area-align-justify-wm-dir.html} (52%)
 create mode 100644 css/css-anchor-position/position-area-align-justify.html
 create mode 100644 css/css-anchor-position/position-area-anchor-outside.html
 create mode 100644 css/css-anchor-position/position-area-anchor-partially-outside.html
 create mode 100644 css/css-anchor-position/position-area-basic.html
 rename css/css-anchor-position/{inset-area-computed-insets.html => position-area-computed-insets.html} (69%)
 create mode 100644 css/css-anchor-position/position-area-computed.html
 rename css/css-anchor-position/{inset-area-in-grid.html => position-area-in-grid.html} (85%)
 create mode 100644 css/css-anchor-position/position-area-in-position-try.html
 rename css/css-anchor-position/{inset-area-inline-container-ref.html => position-area-inline-container-ref.html} (100%)
 rename css/css-anchor-position/{inset-area-inline-container.html => position-area-inline-container.html} (71%)
 rename css/css-anchor-position/{inset-area-interpolation.html => position-area-interpolation.html} (74%)
 create mode 100644 css/css-anchor-position/position-area-parsing.html
 rename css/css-anchor-position/{inset-area-scroll-adjust-ref.html => position-area-scroll-adjust-ref.html} (100%)
 rename css/css-anchor-position/{inset-area-scroll-adjust.html => position-area-scroll-adjust.html} (78%)
 rename css/css-anchor-position/{inset-area-value.html => position-area-value.html} (62%)
 rename css/css-anchor-position/{inset-area-with-insets.html => position-area-with-insets.html} (69%)
 create mode 100644 css/css-anchor-position/position-area-wm-dir.html
 rename css/css-anchor-position/{position-try-order-inset-area.html => position-try-order-position-area.html} (60%)
 delete mode 100644 css/css-anchor-position/try-tactic-inset-area.html
 create mode 100644 css/css-anchor-position/try-tactic-position-area.html

diff --git a/css/css-anchor-position/anchor-scroll-position-try-013.html b/css/css-anchor-position/anchor-scroll-position-try-013.html
index 0d115c26fc436b..2edad12be7256e 100644
--- a/css/css-anchor-position/anchor-scroll-position-try-013.html
+++ b/css/css-anchor-position/anchor-scroll-position-try-013.html
@@ -24,7 +24,7 @@
   width: 50px;
   height: 50px;
 
-  inset-area: bottom;
+  position-area: bottom;
   position-try-fallbacks: flip-block;
   position-anchor: --a;
 }
diff --git a/css/css-anchor-position/anchor-scroll-position-try-014.html b/css/css-anchor-position/anchor-scroll-position-try-014.html
index 3e964e4dbd6077..6d1019ee4aef7b 100644
--- a/css/css-anchor-position/anchor-scroll-position-try-014.html
+++ b/css/css-anchor-position/anchor-scroll-position-try-014.html
@@ -26,7 +26,7 @@
   width: 50px;
   height: 50px;
 
-  inset-area: top;
+  position-area: top;
   position-try-fallbacks: flip-block;
   position-anchor: --a;
 }
diff --git a/css/css-anchor-position/at-position-try-allowed-declarations.html b/css/css-anchor-position/at-position-try-allowed-declarations.html
index f6dac753d2bcf2..3d2a70390a4ab0 100644
--- a/css/css-anchor-position/at-position-try-allowed-declarations.html
+++ b/css/css-anchor-position/at-position-try-allowed-declarations.html
@@ -44,7 +44,7 @@
 test_allowed_declaration('inset-block');
 test_allowed_declaration('inset-inline');
 test_allowed_declaration('inset');
-test_allowed_declaration('inset-area', 'span-all');
+test_allowed_declaration('position-area', 'span-all');
 
 // Margin properties are allowed
 test_allowed_declaration('margin-top');
diff --git a/css/css-anchor-position/at-position-try-cssom.html b/css/css-anchor-position/at-position-try-cssom.html
index 46ca8f73e92e13..126b9fa81a76d4 100644
--- a/css/css-anchor-position/at-position-try-cssom.html
+++ b/css/css-anchor-position/at-position-try-cssom.html
@@ -125,7 +125,7 @@
   'align-self',
   'justify-self',
   'position-anchor',
-  'inset-area',
+  'position-area',
 ];
 
 // A selection of unsupported properties.
diff --git a/css/css-anchor-position/inset-area-align-justify.html b/css/css-anchor-position/inset-area-align-justify.html
deleted file mode 100644
index 7f7f05ccf3a985..00000000000000
--- a/css/css-anchor-position/inset-area-align-justify.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning - alignment</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(inset_area, expected_offsets) {
-    anchored.style.insetArea = inset_area;
-
-    test(() => {
-      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
-      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
-      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
-      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for inset-area: " + inset_area);
-  }
-
-  // anchor-center in both directions
-  test_inset_area("span-all", {left:145, top:145, width:10, height:10});
-
-  // Single region spans
-  test_inset_area("top left", {left:80, top:80, width:10, height:10});
-  test_inset_area("top center", {left:145, top:80, width:10, height:10});
-  test_inset_area("top right", {left:210, top:80, width:10, height:10});
-  test_inset_area("center left", {left:80, top:145, width:10, height:10});
-  test_inset_area("center center", {left:145, top:145, width:10, height:10});
-  test_inset_area("center right", {left:210, top:145, width:10, height:10});
-  test_inset_area("bottom left", {left:80, top:210, width:10, height:10});
-  test_inset_area("bottom center", {left:145, top:210, width:10, height:10});
-  test_inset_area("bottom right", {left:210, top:210, width:10, height:10});
-
-  // Multi-region spans
-  test_inset_area("top span-left", {left:180, top:80, width:10, height:10});
-  test_inset_area("top span-right", {left:110, top:80, width:10, height:10});
-  test_inset_area("span-top left", {left:80, top:180, width:10, height:10});
-  test_inset_area("span-bottom left", {left:80, top:110, width:10, height:10});
-
-</script>
diff --git a/css/css-anchor-position/inset-area-anchor-outside.html b/css/css-anchor-position/inset-area-anchor-outside.html
deleted file mode 100644
index ac7e85bafb1a1d..00000000000000
--- a/css/css-anchor-position/inset-area-anchor-outside.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning - anchor outside containing block</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>
-  #container {
-    position: relative;
-    width: 400px;
-    height: 400px;
-  }
-  #anchor {
-    position: absolute;
-    left: -200px;
-    top: 500px;
-    width: 100px;
-    height: 100px;
-    anchor-name: --anchor;
-  }
-  #anchored {
-    position: absolute;
-    align-self: stretch;
-    justify-self: stretch;
-    position-anchor: --anchor;
-  }
-</style>
-<div id="container">
-  <div id="anchor"></div>
-  <div id="anchored"></div>
-</div>
-<script>
-  function test_inset_area(inset_area, expected_offsets) {
-    anchored.style.insetArea = inset_area;
-
-    test(() => {
-      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
-      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
-      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
-      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for inset-area: " + inset_area);
-  }
-
-  test_inset_area("span-all", {left:0, top:0, width:400, height:400});
-
-  test_inset_area("left span-all", {left:-200, top:0, width:0, height:400});
-  test_inset_area("span-left span-all", {left:-100, top:0, width:0, height:400});
-  test_inset_area("span-all center", {left:-200, top:0, width:100, height:400});
-  test_inset_area("span-right span-all", {left:-200, top:0, width:600, height:400});
-  test_inset_area("right span-all", {left:-100, top:0, width:500, height:400});
-
-  test_inset_area("top span-all", {left:0, top:0, width:400, height:500});
-  test_inset_area("span-top span-all", {left:0, top:0, width:400, height:600});
-  test_inset_area("center span-all", {left:0, top:500, width:400, height:100});
-  test_inset_area("span-bottom span-all", {left:0, top:500, width:400, height:0});
-  test_inset_area("bottom span-all", {left:0, top:600, width:400, height:0});
-</script>
diff --git a/css/css-anchor-position/inset-area-anchor-partially-outside.html b/css/css-anchor-position/inset-area-anchor-partially-outside.html
deleted file mode 100644
index 9d7f5b5f6baca2..00000000000000
--- a/css/css-anchor-position/inset-area-anchor-partially-outside.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning - anchor partially outside containing block</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>
-  #container {
-    position: relative;
-    width: 400px;
-    height: 400px;
-  }
-  #anchor {
-    position: absolute;
-    right: -50px;
-    top: -50px;
-    width: 100px;
-    height: 100px;
-    anchor-name: --anchor;
-  }
-  #anchored {
-    position: absolute;
-    align-self: stretch;
-    justify-self: stretch;
-    position-anchor: --anchor;
-  }
-</style>
-<div id="container">
-  <div id="anchor"></div>
-  <div id="anchored"></div>
-</div>
-<script>
-  function test_inset_area(inset_area, expected_offsets) {
-    anchored.style.insetArea = inset_area;
-
-    test(() => {
-      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
-      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
-      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
-      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for inset-area: " + inset_area);
-  }
-
-  test_inset_area("span-all", {left:0, top:0, width:400, height:400});
-
-  test_inset_area("left span-all", {left:0, top:0, width:350, height:400});
-  test_inset_area("span-left span-all", {left:0, top:0, width:450, height:400});
-  test_inset_area("span-all center", {left:350, top:0, width:100, height:400});
-  test_inset_area("span-right span-all", {left:350, top:0, width:50, height:400});
-  test_inset_area("right span-all", {left:450, top:0, width:0, height:400});
-
-  test_inset_area("top span-all", {left:0, top:-50, width:400, height:0});
-  test_inset_area("span-top span-all", {left:0, top:0, width:400, height:50});
-  test_inset_area("center span-all", {left:0, top:-50, width:400, height:100});
-  test_inset_area("span-bottom span-all", {left:0, top:-50, width:400, height:450});
-  test_inset_area("bottom span-all", {left:0, top:50, width:400, height:350});
-</script>
diff --git a/css/css-anchor-position/inset-area-basic.html b/css/css-anchor-position/inset-area-basic.html
deleted file mode 100644
index 3ede9dcd92584b..00000000000000
--- a/css/css-anchor-position/inset-area-basic.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: basic inset-area positioning</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>
-<!-- The grid:
-
-          100      150      150
-      +--------+--------+--------+
-      |        |        |        |
-  150 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-      |        |        |        |
-   75 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-      |        |        |        |
-  175 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-
-  -->
-<style>
-  #container {
-    position: absolute;
-    width: 400px;
-    height: 400px;
-  }
-  #anchored {
-    position: absolute;
-    align-self: stretch;
-    justify-self: stretch;
-    position-anchor: --anchor;
-  }
-  #anchor {
-    margin-top: 150px;
-    margin-left: 100px;
-    width: 150px;
-    height: 75px;
-    anchor-name: --anchor;
-  }
-</style>
-<div id="container">
-  <div id="anchored"></div>
-  <div id="anchor"></div>
-</div>
-<script>
-  function test_inset_area(inset_area, expected_offsets) {
-    anchored.style.insetArea = inset_area;
-    test(() => {
-      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
-      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
-      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
-      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for: " + inset_area);
-  }
-
-  test_inset_area("none", {left:0, top:0, width:0, height:0});
-  test_inset_area("span-all", {left:0, top:0, width:400, height:400});
-  test_inset_area("span-all span-all", {left:0, top:0, width:400, height:400});
-
-  // Single region spans
-  test_inset_area("top left", {left:0, top:0, width:100, height:150});
-  test_inset_area("top center", {left:100, top:0, width:150, height:150});
-  test_inset_area("top right", {left:250, top:0, width:150, height:150});
-  test_inset_area("center left", {left:0, top:150, width:100, height:75});
-  test_inset_area("center center", {left:100, top:150, width:150, height:75});
-  test_inset_area("center right", {left:250, top:150, width:150, height:75});
-  test_inset_area("bottom left", {left:0, top:225, width:100, height:175});
-  test_inset_area("bottom center", {left:100, top:225, width:150, height:175});
-  test_inset_area("bottom right", {left:250, top:225, width:150, height:175});
-
-  test_inset_area("start start", {left:0, top:0, width:100, height:150});
-  test_inset_area("start center", {left:100, top:0, width:150, height:150});
-  test_inset_area("start end", {left:250, top:0, width:150, height:150});
-  test_inset_area("center start", {left:0, top:150, width:100, height:75});
-  test_inset_area("center end", {left:250, top:150, width:150, height:75});
-  test_inset_area("end start", {left:0, top:225, width:100, height:175});
-  test_inset_area("end center", {left:100, top:225, width:150, height:175});
-  test_inset_area("end end", {left:250, top:225, width:150, height:175});
-
-  test_inset_area("self-start self-start", {left:0, top:0, width:100, height:150});
-  test_inset_area("self-start center", {left:100, top:0, width:150, height:150});
-  test_inset_area("self-start self-end", {left:250, top:0, width:150, height:150});
-  test_inset_area("center self-start", {left:0, top:150, width:100, height:75});
-  test_inset_area("center self-end", {left:250, top:150, width:150, height:75});
-  test_inset_area("self-end self-start", {left:0, top:225, width:100, height:175});
-  test_inset_area("self-end center", {left:100, top:225, width:150, height:175});
-  test_inset_area("self-end self-end", {left:250, top:225, width:150, height:175});
-
-  test_inset_area("y-start x-start", {left:0, top:0, width:100, height:150});
-  test_inset_area("y-start center", {left:100, top:0, width:150, height:150});
-  test_inset_area("y-start x-end", {left:250, top:0, width:150, height:150});
-  test_inset_area("center x-start", {left:0, top:150, width:100, height:75});
-  test_inset_area("center x-end", {left:250, top:150, width:150, height:75});
-  test_inset_area("y-end x-start", {left:0, top:225, width:100, height:175});
-  test_inset_area("y-end center", {left:100, top:225, width:150, height:175});
-  test_inset_area("y-end x-end", {left:250, top:225, width:150, height:175});
-
-  test_inset_area("y-self-start x-self-start", {left:0, top:0, width:100, height:150});
-  test_inset_area("y-self-start center", {left:100, top:0, width:150, height:150});
-  test_inset_area("y-self-start x-self-end", {left:250, top:0, width:150, height:150});
-  test_inset_area("center x-self-start", {left:0, top:150, width:100, height:75});
-  test_inset_area("center x-self-end", {left:250, top:150, width:150, height:75});
-  test_inset_area("y-self-end x-self-start", {left:0, top:225, width:100, height:175});
-  test_inset_area("y-self-end center", {left:100, top:225, width:150, height:175});
-  test_inset_area("y-self-end x-self-end", {left:250, top:225, width:150, height:175});
-
-  // Multi-region spans
-  test_inset_area("span-y-self-start span-x-self-end", {left:100, top:0, width:300, height:225});
-  test_inset_area("span-bottom span-all", {left:0, top:150, width:400, height:250});
-
-  // No implicit anchor means the inset-area should not apply.
-  anchored.style.positionAnchor = "auto";
-  test_inset_area("span-all top", {left:0, top:0, width:0, height:0});
-</script>
diff --git a/css/css-anchor-position/inset-area-computed.html b/css/css-anchor-position/inset-area-computed.html
deleted file mode 100644
index a49ff2a452288a..00000000000000
--- a/css/css-anchor-position/inset-area-computed.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area getComputedStyle()</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>
-<script src="/css/support/computed-testcommon.js"></script>
-<script src="/css/support/inheritance-testcommon.js"></script>
-<div id="container">
-  <div id="target"></div>
-</div>
-<script>
-  test_computed_value("inset-area", "none");
-  test_computed_value("inset-area", "span-all");
-  test_computed_value("inset-area", "x-start");
-  test_computed_value("inset-area", "center");
-  test_computed_value("inset-area", "span-all span-all", "span-all");
-  test_computed_value("inset-area", "center center", "center");
-  test_computed_value("inset-area", "top center", "center top");
-  test_computed_value("inset-area", "span-bottom span-all", "span-bottom");
-
-  assert_not_inherited("inset-area", "none", "span-all");
-</script>
diff --git a/css/css-anchor-position/inset-area-in-position-try.html b/css/css-anchor-position/inset-area-in-position-try.html
deleted file mode 100644
index 3affc1b30b710e..00000000000000
--- a/css/css-anchor-position/inset-area-in-position-try.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!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-fallbacks'>
-<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-fallbacks: --pt;
-      }
-      #ref {
-        inset-area: ${inset_area};
-      }
-    `;
-    assert_true(CSS.supports('inset-area', 'top left'));
-    assert_true(CSS.supports('position-try-fallbacks', '--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-fallbacks 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_fallbacks, expected) {
-  test((t) => {
-    style.textContent = `
-      #target, #ref {
-        width: 60px;
-        height: 60px;
-      }
-      #target {
-        position-try-fallbacks: ${position_try_fallbacks};
-      }
-      #ref {
-        inset-area: ${expected};
-      }
-    `;
-    assert_true(CSS.supports('inset-area', 'top left'));
-    assert_true(CSS.supports('position-try-fallbacks', '--x'));
-    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
-    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
-  }, `Placement: ${position_try_fallbacks}`);
-}
-
-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>
diff --git a/css/css-anchor-position/inset-area-parsing.html b/css/css-anchor-position/inset-area-parsing.html
deleted file mode 100644
index 7c7fc824917827..00000000000000
--- a/css/css-anchor-position/inset-area-parsing.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area parsing</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>
-<script src="/css/support/parsing-testcommon.js"></script>
-<body>
-<script>
-  function test_valid_single_inset_area_values(valid_keywords) {
-    for (const keyword of valid_keywords) {
-      test_valid_value("inset-area", keyword);
-    }
-  };
-
-  function test_valid_inset_area_value_pairs(valid_keywords1,
-                                             valid_keywords2,
-                                             flip_order) {
-    for (const keyword1 of valid_keywords1) {
-      for (const keyword2 of valid_keywords2) {
-        if (keyword1 === keyword2) {
-          test_valid_value("inset-area", keyword1 + " " + keyword2, keyword1);
-        } else {
-          test_valid_value("inset-area", keyword1 + " " + keyword2,
-                           flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2);
-        }
-      }
-    }
-  };
-
-  function test_valid_inset_area_value_pairs_with_span_all_center(
-      valid_keywords, flip_order) {
-    for (const keyword of valid_keywords) {
-      test_valid_value("inset-area", keyword + " center",
-                       flip_order ? "center " + keyword : keyword + " center");
-      test_valid_value("inset-area", "center " + keyword,
-                       flip_order ? "center " + keyword : keyword + " center");
-      test_valid_value("inset-area", keyword + " span-all", keyword);
-      test_valid_value("inset-area", "span-all " + keyword, keyword);
-    }
-  };
-
-  function test_valid_inset_area_value_start_end_pairs_with_span_all_center(
-      valid_keywords) {
-    for (const keyword of valid_keywords) {
-      test_valid_value("inset-area", keyword + " center");
-      test_valid_value("inset-area", "center " + keyword);
-      test_valid_value("inset-area", keyword + " span-all");
-      test_valid_value("inset-area", "span-all " + keyword);
-    }
-  }
-
-  function test_invalid_inset_area_value_pairs(valid_keywords1,
-                                               valid_keywords2) {
-    for (const keyword1 of valid_keywords1) {
-      for (const keyword2 of valid_keywords2) {
-        test_invalid_value("inset-area", keyword1 + " " + keyword2);
-        test_invalid_value("inset-area", keyword2 + " " + keyword1);
-      }
-    }
-  };
-
-  function test_invalid_inset_area_value_equal_pairs(valid_keywords) {
-    for (const keyword of valid_keywords) {
-      test_invalid_value("inset-area", keyword + " " + keyword);
-    }
-  };
-
-  const horizontal = [ "left", "right", "span-left", "span-right", "x-start",
-                       "x-end", "span-x-start", "span-x-end", "x-self-start",
-                       "x-self-end", "span-x-self-start", "span-x-self-end" ];
-  const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start",
-                     "y-end", "span-y-start", "span-y-end", "y-self-start",
-                     "y-self-end", "span-y-self-start", "span-y-self-end" ];
-  const inline = [ "inline-start", "inline-end", "span-inline-start",
-                   "span-inline-end" ];
-  const block = [ "block-start", "block-end", "span-block-start",
-                  "span-block-end" ];
-  const self_inline = [ "self-inline-start", "self-inline-end",
-                        "span-self-inline-start", "span-self-inline-end" ];
-  const self_block = [ "self-block-start", "self-block-end",
-                       "span-self-block-start", "span-self-block-end" ];
-  const start_end = [ "start", "end", "span-start", "span-end" ];
-  const self_start_end = [ "self-start", "self-end", "span-self-start",
-                           "span-self-end" ];
-
-  // Test initial value 'none'
-  test_valid_value("inset-area", "none");
-  test_invalid_value("inset-area", "none none");
-  test_invalid_value("inset-area", "start none");
-  test_invalid_value("inset-area", "none start");
-  test_invalid_value("inset-area", "top left top");
-
-  // Test keywords allowed in all axes
-  test_valid_value("inset-area", "center");
-  test_valid_value("inset-area", "center center", "center")
-  test_valid_value("inset-area", "span-all");
-  test_valid_value("inset-area", "span-all span-all", "span-all");
-  test_valid_value("inset-area", "center span-all");
-  test_valid_value("inset-area", "span-all center");
-
-  test_valid_single_inset_area_values(horizontal);
-  test_valid_single_inset_area_values(vertical);
-  test_valid_single_inset_area_values(inline);
-  test_valid_single_inset_area_values(block);
-  test_valid_single_inset_area_values(start_end);
-  test_valid_single_inset_area_values(self_start_end);
-
-  // Used if the sets of valid keywords are serialized in a different order than
-  // the argument order
-  const flip_order = true;
-
-  // Test all valid combinations in both orders
-  test_valid_inset_area_value_pairs(horizontal, vertical);
-  test_valid_inset_area_value_pairs(vertical, horizontal, flip_order);
-  test_valid_inset_area_value_pairs(block, inline);
-  test_valid_inset_area_value_pairs(inline, block, flip_order);
-  test_valid_inset_area_value_pairs(self_block, self_inline);
-  test_valid_inset_area_value_pairs(self_inline, self_block, flip_order);
-  test_valid_inset_area_value_pairs(start_end, start_end);
-  test_valid_inset_area_value_pairs(self_start_end, self_start_end);
-
-  // Test all valid combinations with 'span-all' and 'center' in both orders
-  test_valid_inset_area_value_pairs_with_span_all_center(horizontal);
-  test_valid_inset_area_value_pairs_with_span_all_center(vertical, flip_order);
-  test_valid_inset_area_value_pairs_with_span_all_center(block);
-  test_valid_inset_area_value_pairs_with_span_all_center(inline, flip_order);
-  test_valid_inset_area_value_pairs_with_span_all_center(self_block);
-  test_valid_inset_area_value_pairs_with_span_all_center(self_inline, flip_order);
-  test_valid_inset_area_value_start_end_pairs_with_span_all_center(start_end);
-  test_valid_inset_area_value_start_end_pairs_with_span_all_center(self_start_end);
-
-  // Test all invalid combinations with incompatible axes in both orders
-  test_invalid_inset_area_value_pairs(horizontal, inline);
-  test_invalid_inset_area_value_pairs(horizontal, block);
-  test_invalid_inset_area_value_pairs(horizontal, self_inline);
-  test_invalid_inset_area_value_pairs(horizontal, self_block);
-  test_invalid_inset_area_value_pairs(horizontal, start_end);
-  test_invalid_inset_area_value_pairs(horizontal, self_start_end);
-  test_invalid_inset_area_value_pairs(vertical, inline);
-  test_invalid_inset_area_value_pairs(vertical, block);
-  test_invalid_inset_area_value_pairs(vertical, self_inline);
-  test_invalid_inset_area_value_pairs(vertical, self_block);
-  test_invalid_inset_area_value_pairs(vertical, start_end);
-  test_invalid_inset_area_value_pairs(vertical, self_start_end);
-  test_invalid_inset_area_value_pairs(inline, self_inline);
-  test_invalid_inset_area_value_pairs(inline, self_block);
-  test_invalid_inset_area_value_pairs(inline, start_end);
-  test_invalid_inset_area_value_pairs(inline, self_start_end);
-  test_invalid_inset_area_value_pairs(block, self_inline);
-  test_invalid_inset_area_value_pairs(block, self_block);
-  test_invalid_inset_area_value_pairs(block, start_end);
-  test_invalid_inset_area_value_pairs(block, self_start_end);
-  test_invalid_inset_area_value_pairs(start_end, self_start_end);
-
-  // Test all invalid combinations of same axis
-  test_invalid_inset_area_value_equal_pairs(horizontal);
-  test_invalid_inset_area_value_equal_pairs(vertical);
-  test_invalid_inset_area_value_equal_pairs(inline);
-  test_invalid_inset_area_value_equal_pairs(block);
-  test_invalid_inset_area_value_equal_pairs(self_inline);
-  test_invalid_inset_area_value_equal_pairs(self_block);
-</script>
diff --git a/css/css-anchor-position/inset-area-wm-dir.html b/css/css-anchor-position/inset-area-wm-dir.html
deleted file mode 100644
index 6069346ad296cf..00000000000000
--- a/css/css-anchor-position/inset-area-wm-dir.html
+++ /dev/null
@@ -1,257 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area 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>
-<!-- The grid:
-
-          100      150      150
-      +--------+--------+--------+
-      |        |        |        |
-  150 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-      |        |        |        |
-   75 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-      |        |        |        |
-  175 |        |        |        |
-      |        |        |        |
-      +--------+--------+--------+
-
-  -->
-<style>
-  #container {
-    position: absolute;
-    width: 400px;
-    height: 400px;
-  }
-  #anchored {
-    position: absolute;
-    align-self: stretch;
-    justify-self: stretch;
-    position-anchor: --anchor;
-  }
-  #anchor {
-    margin-top: 150px;
-    margin-bottom: 175px;
-    margin-left: 100px;
-    margin-right: 150px;
-    width: 150px;
-    height: 75px;
-    anchor-name: --anchor;
-  }
-</style>
-<div id="container">
-  <div id="anchored"></div>
-  <div id="anchor"></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:0, top:0, width:100, height:150};
-  const top_right = {left:250, top:0, width:150, height:150};
-  const bottom_left = {left:0, top:225, width:100, height:175};
-  const bottom_right = {left:250, top:225, width:150, height:175};
-
-  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);
-  test_inset_area(writing_direction, "inline-start block-end", bottom_right);
-  test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_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);
-  test_inset_area(writing_direction, "inline-start block-end", top_right);
-  test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_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);
-
-  // containing-block: sideways-lr / ltr
-  // self: horizontal-tb / ltr
-  container.style.writingMode = "sideways-lr";
-  container.style.direction = "ltr";
-  writing_direction = `containing-block: ${container.style.writingMode} / ${container.style.direction}`;
-  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);
-  test_inset_area(writing_direction, "inline-start block-end", bottom_right);
-  test_inset_area(writing_direction, "self-inline-start self-block-end", bottom_left);
-
-  // containing-block: sideways-lr / rtl
-  // self: horizontal-tb / ltr
-  container.style.writingMode = "sideways-lr";
-  container.style.direction = "rtl";
-  writing_direction = `containing-block: ${container.style.writingMode} / ${container.style.direction}`;
-  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: sideways-rl / ltr
-  // self: horizontal-tb / ltr
-  container.style.writingMode = "sideways-rl";
-  container.style.direction = "ltr";
-  writing_direction = `containing-block: ${container.style.writingMode} / ${container.style.direction}`;
-  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: sideways-rl / rtl
-  // self: horizontal-tb / ltr
-  container.style.writingMode = "sideways-rl";
-  container.style.direction = "rtl";
-  writing_direction = `containing-block: ${container.style.writingMode} / ${container.style.direction}`;
-  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);
-
-  // containing-block: horizontal-tb / ltr
-  // self: sideways-lr / ltr
-  anchored.style.writingMode = "sideways-lr";
-  anchored.style.direction = "ltr";
-  writing_direction = `self: ${anchored.style.writingMode} / ${anchored.style.direction}`;
-  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: sideways-lr / rtl
-  anchored.style.writingMode = "sideways-lr";
-  anchored.style.direction = "rtl";
-  writing_direction = `self: ${anchored.style.writingMode} / ${anchored.style.direction}`;
-  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: sideways-rl / ltr
-  anchored.style.writingMode = "sideways-rl";
-  anchored.style.direction = "ltr";
-  writing_direction = `self: ${anchored.style.writingMode} / ${anchored.style.direction}`;
-  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: sideways-rl / rtl
-  anchored.style.writingMode = "sideways-rl";
-  anchored.style.direction = "rtl";
-  writing_direction = `self: ${anchored.style.writingMode} / ${anchored.style.direction}`;
-  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>
diff --git a/css/css-anchor-position/last-successful-basic.html b/css/css-anchor-position/last-successful-basic.html
index cda0eed6fbad42..953ad80fcfc100 100644
--- a/css/css-anchor-position/last-successful-basic.html
+++ b/css/css-anchor-position/last-successful-basic.html
@@ -26,7 +26,7 @@
     position: absolute;
     width: 100px;
     height: 200px;
-    inset-area: top center;
+    position-area: top center;
     background: lime;
   }
 </style>
diff --git a/css/css-anchor-position/last-successful-change-fallbacks.html b/css/css-anchor-position/last-successful-change-fallbacks.html
index ed4f8a43626e3d..d9aed01a90b08d 100644
--- a/css/css-anchor-position/last-successful-change-fallbacks.html
+++ b/css/css-anchor-position/last-successful-change-fallbacks.html
@@ -26,7 +26,7 @@
     position: absolute;
     width: 100px;
     height: 200px;
-    inset-area: top center;
+    position-area: top center;
     background: lime;
   }
 </style>
diff --git a/css/css-anchor-position/last-successful-change-try-rule.html b/css/css-anchor-position/last-successful-change-try-rule.html
index 205aba014c3cd5..f7caf2f08ee1d8 100644
--- a/css/css-anchor-position/last-successful-change-try-rule.html
+++ b/css/css-anchor-position/last-successful-change-try-rule.html
@@ -26,11 +26,11 @@
     position: absolute;
     width: 100px;
     height: 200px;
-    inset-area: top center;
+    position-area: top center;
     background: lime;
   }
   @position-try --try {
-    inset-area: bottom center;
+    position-area: bottom center;
   }
 </style>
 <div id="container">
@@ -53,7 +53,7 @@
 
   promise_test(async () => {
     // Changing @position-try --try {}
-    anchor_sheet.sheet.cssRules[3].style.insetArea = "bottom";
+    anchor_sheet.sheet.cssRules[3].style.positionArea = "bottom";
     await waitUntilNextAnimationFrame();
     await waitUntilNextAnimationFrame();
     assert_equals(anchored.offsetTop, -50);
diff --git a/css/css-anchor-position/last-successful-intermediate-ignored.html b/css/css-anchor-position/last-successful-intermediate-ignored.html
index 82bf1e8aca9ae6..33f42e7be8f1b0 100644
--- a/css/css-anchor-position/last-successful-intermediate-ignored.html
+++ b/css/css-anchor-position/last-successful-intermediate-ignored.html
@@ -26,7 +26,7 @@
     position: absolute;
     width: 100px;
     height: 200px;
-    inset-area: top center;
+    position-area: top center;
     background: lime;
   }
 </style>
diff --git a/css/css-anchor-position/inset-area-abs-inline-container.html b/css/css-anchor-position/position-area-abs-inline-container.html
similarity index 71%
rename from css/css-anchor-position/inset-area-abs-inline-container.html
rename to css/css-anchor-position/position-area-abs-inline-container.html
index 7bc59356e95ed7..deaf60647d4ecf 100644
--- a/css/css-anchor-position/inset-area-abs-inline-container.html
+++ b/css/css-anchor-position/position-area-abs-inline-container.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning with absolute inline container</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
-<link rel="match" href="inset-area-inline-container-ref.html">
+<title>CSS Anchor Positioning: position-area positioning with absolute inline container</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<link rel="match" href="position-area-inline-container-ref.html">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
 <style>
   #in-flow {
@@ -28,10 +28,10 @@
     position-anchor: --anchor;
     background-color: blue;
   }
-  #top-left { inset-area: top left; }
-  #top-right { inset-area: top right; }
-  #bottom-left { inset-area: bottom left; }
-  #bottom-right { inset-area: bottom right; }
+  #top-left { position-area: top left; }
+  #top-right { position-area: top right; }
+  #bottom-left { position-area: bottom left; }
+  #bottom-right { position-area: bottom right; }
 </style>
 <div id="in-flow">
   <br>
diff --git a/css/css-anchor-position/inset-area-align-justify-wm-dir.html b/css/css-anchor-position/position-area-align-justify-wm-dir.html
similarity index 52%
rename from css/css-anchor-position/inset-area-align-justify-wm-dir.html
rename to css/css-anchor-position/position-area-align-justify-wm-dir.html
index 3e42913ffc46cb..25b53d44f788b3 100644
--- a/css/css-anchor-position/inset-area-align-justify-wm-dir.html
+++ b/css/css-anchor-position/position-area-align-justify-wm-dir.html
@@ -1,6 +1,6 @@
 <!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">
+<title>CSS Anchor Positioning: position-area positioning - alignment with writing-mode and direction</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
@@ -31,14 +31,14 @@
   <div id="anchored"></div>
 </div>
 <script>
-  function test_inset_area(writing_direction, inset_area, expected_offsets) {
-    anchored.style.insetArea = inset_area;
+  function test_position_area(writing_direction, position_area, expected_offsets) {
+    anchored.style.positionArea = position_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);
+    }, "Offsets for: " + position_area + " with writing-mode / direction: " + writing_direction);
   }
 
   const top_left = {left:80, top:80, width:10, height:10};
@@ -53,50 +53,50 @@
   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);
+  test_position_area(writing_direction, "start start", top_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_right);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", bottom_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", bottom_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_right);
+  test_position_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);
+  test_position_area(writing_direction, "start start", bottom_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", bottom_right);
+  test_position_area(writing_direction, "x-self-start y-self-start", top_left);
 
   // Writing-mode and direction on self
   container.style.writingMode = "horizontal-tb";
@@ -107,49 +107,49 @@
   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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", bottom_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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);
+  test_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", bottom_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_area(writing_direction, "x-self-start y-self-start", bottom_right);
 
 </script>
diff --git a/css/css-anchor-position/position-area-align-justify.html b/css/css-anchor-position/position-area-align-justify.html
new file mode 100644
index 00000000000000..e0bce2c8268324
--- /dev/null
+++ b/css/css-anchor-position/position-area-align-justify.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area positioning - alignment</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-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_position_area(position_area, expected_offsets) {
+    anchored.style.positionArea = position_area;
+
+    test(() => {
+      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
+      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
+      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
+      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
+    }, "Offsets for position-area: " + position_area);
+  }
+
+  // anchor-center in both directions
+  test_position_area("span-all", {left:145, top:145, width:10, height:10});
+
+  // Single region spans
+  test_position_area("top left", {left:80, top:80, width:10, height:10});
+  test_position_area("top center", {left:145, top:80, width:10, height:10});
+  test_position_area("top right", {left:210, top:80, width:10, height:10});
+  test_position_area("center left", {left:80, top:145, width:10, height:10});
+  test_position_area("center center", {left:145, top:145, width:10, height:10});
+  test_position_area("center right", {left:210, top:145, width:10, height:10});
+  test_position_area("bottom left", {left:80, top:210, width:10, height:10});
+  test_position_area("bottom center", {left:145, top:210, width:10, height:10});
+  test_position_area("bottom right", {left:210, top:210, width:10, height:10});
+
+  // Multi-region spans
+  test_position_area("top span-left", {left:180, top:80, width:10, height:10});
+  test_position_area("top span-right", {left:110, top:80, width:10, height:10});
+  test_position_area("span-top left", {left:80, top:180, width:10, height:10});
+  test_position_area("span-bottom left", {left:80, top:110, width:10, height:10});
+
+</script>
diff --git a/css/css-anchor-position/position-area-anchor-outside.html b/css/css-anchor-position/position-area-anchor-outside.html
new file mode 100644
index 00000000000000..d8fb5dbc98fa90
--- /dev/null
+++ b/css/css-anchor-position/position-area-anchor-outside.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area positioning - anchor outside containing block</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    position: relative;
+    width: 400px;
+    height: 400px;
+  }
+  #anchor {
+    position: absolute;
+    left: -200px;
+    top: 500px;
+    width: 100px;
+    height: 100px;
+    anchor-name: --anchor;
+  }
+  #anchored {
+    position: absolute;
+    align-self: stretch;
+    justify-self: stretch;
+    position-anchor: --anchor;
+  }
+</style>
+<div id="container">
+  <div id="anchor"></div>
+  <div id="anchored"></div>
+</div>
+<script>
+  function test_position_area(position_area, expected_offsets) {
+    anchored.style.positionArea = position_area;
+
+    test(() => {
+      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
+      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
+      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
+      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
+    }, "Offsets for position-area: " + position_area);
+  }
+
+  test_position_area("span-all", {left:0, top:0, width:400, height:400});
+
+  test_position_area("left span-all", {left:-200, top:0, width:0, height:400});
+  test_position_area("span-left span-all", {left:-100, top:0, width:0, height:400});
+  test_position_area("span-all center", {left:-200, top:0, width:100, height:400});
+  test_position_area("span-right span-all", {left:-200, top:0, width:600, height:400});
+  test_position_area("right span-all", {left:-100, top:0, width:500, height:400});
+
+  test_position_area("top span-all", {left:0, top:0, width:400, height:500});
+  test_position_area("span-top span-all", {left:0, top:0, width:400, height:600});
+  test_position_area("center span-all", {left:0, top:500, width:400, height:100});
+  test_position_area("span-bottom span-all", {left:0, top:500, width:400, height:0});
+  test_position_area("bottom span-all", {left:0, top:600, width:400, height:0});
+</script>
diff --git a/css/css-anchor-position/position-area-anchor-partially-outside.html b/css/css-anchor-position/position-area-anchor-partially-outside.html
new file mode 100644
index 00000000000000..e23cea474787b1
--- /dev/null
+++ b/css/css-anchor-position/position-area-anchor-partially-outside.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area positioning - anchor partially outside containing block</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    position: relative;
+    width: 400px;
+    height: 400px;
+  }
+  #anchor {
+    position: absolute;
+    right: -50px;
+    top: -50px;
+    width: 100px;
+    height: 100px;
+    anchor-name: --anchor;
+  }
+  #anchored {
+    position: absolute;
+    align-self: stretch;
+    justify-self: stretch;
+    position-anchor: --anchor;
+  }
+</style>
+<div id="container">
+  <div id="anchor"></div>
+  <div id="anchored"></div>
+</div>
+<script>
+  function test_position_area(position_area, expected_offsets) {
+    anchored.style.positionArea = position_area;
+
+    test(() => {
+      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
+      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
+      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
+      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
+    }, "Offsets for position-area: " + position_area);
+  }
+
+  test_position_area("span-all", {left:0, top:0, width:400, height:400});
+
+  test_position_area("left span-all", {left:0, top:0, width:350, height:400});
+  test_position_area("span-left span-all", {left:0, top:0, width:450, height:400});
+  test_position_area("span-all center", {left:350, top:0, width:100, height:400});
+  test_position_area("span-right span-all", {left:350, top:0, width:50, height:400});
+  test_position_area("right span-all", {left:450, top:0, width:0, height:400});
+
+  test_position_area("top span-all", {left:0, top:-50, width:400, height:0});
+  test_position_area("span-top span-all", {left:0, top:0, width:400, height:50});
+  test_position_area("center span-all", {left:0, top:-50, width:400, height:100});
+  test_position_area("span-bottom span-all", {left:0, top:-50, width:400, height:450});
+  test_position_area("bottom span-all", {left:0, top:50, width:400, height:350});
+</script>
diff --git a/css/css-anchor-position/position-area-basic.html b/css/css-anchor-position/position-area-basic.html
new file mode 100644
index 00000000000000..6cbaf8e50145b1
--- /dev/null
+++ b/css/css-anchor-position/position-area-basic.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: basic position-area positioning</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<!-- The grid:
+
+          100      150      150
+      +--------+--------+--------+
+      |        |        |        |
+  150 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+      |        |        |        |
+   75 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+      |        |        |        |
+  175 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+
+  -->
+<style>
+  #container {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+  }
+  #anchored {
+    position: absolute;
+    align-self: stretch;
+    justify-self: stretch;
+    position-anchor: --anchor;
+  }
+  #anchor {
+    margin-top: 150px;
+    margin-left: 100px;
+    width: 150px;
+    height: 75px;
+    anchor-name: --anchor;
+  }
+</style>
+<div id="container">
+  <div id="anchored"></div>
+  <div id="anchor"></div>
+</div>
+<script>
+  function test_position_area(position_area, expected_offsets) {
+    anchored.style.positionArea = position_area;
+    test(() => {
+      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
+      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
+      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
+      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
+    }, "Offsets for: " + position_area);
+  }
+
+  test_position_area("none", {left:0, top:0, width:0, height:0});
+  test_position_area("span-all", {left:0, top:0, width:400, height:400});
+  test_position_area("span-all span-all", {left:0, top:0, width:400, height:400});
+
+  // Single region spans
+  test_position_area("top left", {left:0, top:0, width:100, height:150});
+  test_position_area("top center", {left:100, top:0, width:150, height:150});
+  test_position_area("top right", {left:250, top:0, width:150, height:150});
+  test_position_area("center left", {left:0, top:150, width:100, height:75});
+  test_position_area("center center", {left:100, top:150, width:150, height:75});
+  test_position_area("center right", {left:250, top:150, width:150, height:75});
+  test_position_area("bottom left", {left:0, top:225, width:100, height:175});
+  test_position_area("bottom center", {left:100, top:225, width:150, height:175});
+  test_position_area("bottom right", {left:250, top:225, width:150, height:175});
+
+  test_position_area("start start", {left:0, top:0, width:100, height:150});
+  test_position_area("start center", {left:100, top:0, width:150, height:150});
+  test_position_area("start end", {left:250, top:0, width:150, height:150});
+  test_position_area("center start", {left:0, top:150, width:100, height:75});
+  test_position_area("center end", {left:250, top:150, width:150, height:75});
+  test_position_area("end start", {left:0, top:225, width:100, height:175});
+  test_position_area("end center", {left:100, top:225, width:150, height:175});
+  test_position_area("end end", {left:250, top:225, width:150, height:175});
+
+  test_position_area("self-start self-start", {left:0, top:0, width:100, height:150});
+  test_position_area("self-start center", {left:100, top:0, width:150, height:150});
+  test_position_area("self-start self-end", {left:250, top:0, width:150, height:150});
+  test_position_area("center self-start", {left:0, top:150, width:100, height:75});
+  test_position_area("center self-end", {left:250, top:150, width:150, height:75});
+  test_position_area("self-end self-start", {left:0, top:225, width:100, height:175});
+  test_position_area("self-end center", {left:100, top:225, width:150, height:175});
+  test_position_area("self-end self-end", {left:250, top:225, width:150, height:175});
+
+  test_position_area("y-start x-start", {left:0, top:0, width:100, height:150});
+  test_position_area("y-start center", {left:100, top:0, width:150, height:150});
+  test_position_area("y-start x-end", {left:250, top:0, width:150, height:150});
+  test_position_area("center x-start", {left:0, top:150, width:100, height:75});
+  test_position_area("center x-end", {left:250, top:150, width:150, height:75});
+  test_position_area("y-end x-start", {left:0, top:225, width:100, height:175});
+  test_position_area("y-end center", {left:100, top:225, width:150, height:175});
+  test_position_area("y-end x-end", {left:250, top:225, width:150, height:175});
+
+  test_position_area("y-self-start x-self-start", {left:0, top:0, width:100, height:150});
+  test_position_area("y-self-start center", {left:100, top:0, width:150, height:150});
+  test_position_area("y-self-start x-self-end", {left:250, top:0, width:150, height:150});
+  test_position_area("center x-self-start", {left:0, top:150, width:100, height:75});
+  test_position_area("center x-self-end", {left:250, top:150, width:150, height:75});
+  test_position_area("y-self-end x-self-start", {left:0, top:225, width:100, height:175});
+  test_position_area("y-self-end center", {left:100, top:225, width:150, height:175});
+  test_position_area("y-self-end x-self-end", {left:250, top:225, width:150, height:175});
+
+  // Multi-region spans
+  test_position_area("span-y-self-start span-x-self-end", {left:100, top:0, width:300, height:225});
+  test_position_area("span-bottom span-all", {left:0, top:150, width:400, height:250});
+
+  // No implicit anchor means the position-area should not apply.
+  anchored.style.positionAnchor = "auto";
+  test_position_area("span-all top", {left:0, top:0, width:0, height:0});
+</script>
diff --git a/css/css-anchor-position/inset-area-computed-insets.html b/css/css-anchor-position/position-area-computed-insets.html
similarity index 69%
rename from css/css-anchor-position/inset-area-computed-insets.html
rename to css/css-anchor-position/position-area-computed-insets.html
index b06714b8a78ea1..2d7907fd92d240 100644
--- a/css/css-anchor-position/inset-area-computed-insets.html
+++ b/css/css-anchor-position/position-area-computed-insets.html
@@ -1,23 +1,23 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area should not affect computed inset values</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
+<title>CSS Anchor Positioning: position-area should not affect computed inset values</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/css-typed-om/resources/testhelper.js"></script>
 <style>
   #abs {
     position: absolute;
-    inset-area: span-all;
+    position-area: span-all;
   }
 </style>
 <div id="abs"></div>
 <script>
   test(() => {
     let style = abs.computedStyleMap();
-    assert_equals(style.get("inset-area").toString(), "span-all", "inset-area is supported");
+    assert_equals(style.get("position-area").toString(), "span-all", "position-area is supported");
     assert_style_value_equals(style.get("left"), new CSSKeywordValue("auto"));
     assert_style_value_equals(style.get("right"), new CSSKeywordValue("auto"));
     assert_style_value_equals(style.get("top"), new CSSKeywordValue("auto"));
     assert_style_value_equals(style.get("bottom"), new CSSKeywordValue("auto"));
-  }, "inset-area does not affect insets at computed value time");
+  }, "position-area does not affect insets at computed value time");
 </script>
diff --git a/css/css-anchor-position/position-area-computed.html b/css/css-anchor-position/position-area-computed.html
new file mode 100644
index 00000000000000..0acc853eb9048c
--- /dev/null
+++ b/css/css-anchor-position/position-area-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area getComputedStyle()</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+  test_computed_value("position-area", "none");
+  test_computed_value("position-area", "span-all");
+  test_computed_value("position-area", "x-start");
+  test_computed_value("position-area", "center");
+  test_computed_value("position-area", "span-all span-all", "span-all");
+  test_computed_value("position-area", "center center", "center");
+  test_computed_value("position-area", "top center", "center top");
+  test_computed_value("position-area", "span-bottom span-all", "span-bottom");
+
+  assert_not_inherited("position-area", "none", "span-all");
+</script>
diff --git a/css/css-anchor-position/inset-area-in-grid.html b/css/css-anchor-position/position-area-in-grid.html
similarity index 85%
rename from css/css-anchor-position/inset-area-in-grid.html
rename to css/css-anchor-position/position-area-in-grid.html
index bbf92e8d1c66a3..85dd4f48306016 100644
--- a/css/css-anchor-position/inset-area-in-grid.html
+++ b/css/css-anchor-position/position-area-in-grid.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning inside grid</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
+<title>CSS Anchor Positioning: position-area positioning inside grid</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <!--
@@ -84,8 +84,8 @@
   <div id="anchored"></div>
 </div>
 <script>
-  function test_inset_area(inset_area, insets, expected_offsets) {
-    anchored.style.insetArea = inset_area;
+  function test_position_area(position_area, insets, expected_offsets) {
+    anchored.style.positionArea = position_area;
     for (const [prop, value] of Object.entries(insets)) {
       anchored.style[prop] = value;
     }
@@ -95,12 +95,12 @@
       assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
       assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
       assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets));
+    }, "Offsets for position-area: " + position_area + " and insets: " + JSON.stringify(insets));
   }
 
-  test_inset_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"},
+  test_position_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"},
                   {left:200, top:150, width:50, height:150});
 
-  test_inset_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"},
+  test_position_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"},
                   {left:210, top:160, width:30, height:130});
 </script>
diff --git a/css/css-anchor-position/position-area-in-position-try.html b/css/css-anchor-position/position-area-in-position-try.html
new file mode 100644
index 00000000000000..1812c3892ea1b8
--- /dev/null
+++ b/css/css-anchor-position/position-area-in-position-try.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area in @position-try</title>
+<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks'>
+<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;
+    position-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_position_area_ref(position_area) {
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+    });
+    style.textContent = `
+      @position-try --pt {
+        inset: unset; /* Undo force fallback */
+        position-area: ${position_area};
+      }
+      #target {
+        position-try-fallbacks: --pt;
+      }
+      #ref {
+        position-area: ${position_area};
+      }
+    `;
+    assert_true(CSS.supports('position-area', 'top left'));
+    assert_true(CSS.supports('position-try-fallbacks', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${position_area}`);
+}
+
+test_position_area_ref('none');
+test_position_area_ref('span-all');
+test_position_area_ref('span-all span-all');
+test_position_area_ref('top left');
+test_position_area_ref('top center');
+test_position_area_ref('top right');
+test_position_area_ref('center left');
+test_position_area_ref('center center');
+test_position_area_ref('center right');
+test_position_area_ref('bottom left');
+test_position_area_ref('bottom center');
+test_position_area_ref('bottom right');
+test_position_area_ref('start start');
+test_position_area_ref('start center');
+test_position_area_ref('start end');
+test_position_area_ref('center start');
+test_position_area_ref('center end');
+test_position_area_ref('end start');
+test_position_area_ref('end center');
+test_position_area_ref('end end');
+test_position_area_ref('self-start self-start');
+test_position_area_ref('self-start center');
+test_position_area_ref('self-start self-end');
+test_position_area_ref('center self-start');
+test_position_area_ref('center self-end');
+test_position_area_ref('self-end self-start');
+test_position_area_ref('self-end center');
+test_position_area_ref('self-end self-end');
+test_position_area_ref('y-start x-start');
+test_position_area_ref('y-start center');
+test_position_area_ref('y-start x-end');
+test_position_area_ref('center x-start');
+test_position_area_ref('center x-end');
+test_position_area_ref('y-end x-start');
+test_position_area_ref('y-end center');
+test_position_area_ref('y-end x-end');
+test_position_area_ref('y-self-start x-self-start');
+test_position_area_ref('y-self-start center');
+test_position_area_ref('y-self-start x-self-end');
+test_position_area_ref('center x-self-start');
+test_position_area_ref('center x-self-end');
+test_position_area_ref('y-self-end x-self-start');
+test_position_area_ref('y-self-end center');
+test_position_area_ref('y-self-end x-self-end');
+test_position_area_ref('span-y-self-start span-x-self-end');
+test_position_area_ref('span-bottom span-all');
+
+</script>
+
+<style>
+  @position-try --top {
+    inset: unset; /* Undo force fallback */
+    position-area: top;
+  }
+  @position-try --right {
+    inset: unset; /* Undo force fallback */
+    position-area: right;
+  }
+  @position-try --bottom {
+    inset: unset; /* Undo force fallback */
+    position-area: bottom;
+  }
+  @position-try --left {
+    inset: unset; /* Undo force fallback */
+    position-area: left;
+  }
+</style>
+<script>
+
+// Test that an element with the specified position-try-fallbacks is placed
+// at the same position as a reference element with position-area:`expected`.
+// This test uses #target/#ref size of 60x60px, which causes overflow if
+// if we attempt the --right and --bottom positions.
+function test_position_area_placement(position_try_fallbacks, expected) {
+  test((t) => {
+    style.textContent = `
+      #target, #ref {
+        width: 60px;
+        height: 60px;
+      }
+      #target {
+        position-try-fallbacks: ${position_try_fallbacks};
+      }
+      #ref {
+        position-area: ${expected};
+      }
+    `;
+    assert_true(CSS.supports('position-area', 'top left'));
+    assert_true(CSS.supports('position-try-fallbacks', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `Placement: ${position_try_fallbacks}`);
+}
+
+test_position_area_placement('--top', 'top');
+test_position_area_placement('--left', 'left');
+
+// No space to to the right/bottom:
+test_position_area_placement('--right, --top', 'top');
+test_position_area_placement('--bottom, --top', 'top');
+test_position_area_placement('--bottom, --right, --top', 'top');
+test_position_area_placement('--bottom, --right, --left, --top', 'left');
+test_position_area_placement('--bottom, --left, --top, --right', 'left');
+
+// Flipping:
+test_position_area_placement('--right flip-inline', 'left');
+test_position_area_placement('--bottom flip-block', 'top');
+test_position_area_placement('--left flip-start', 'top');
+
+// left + flip-inline => right (no space).
+test_position_area_placement('--left flip-inline, --top', 'top');
+// top + flip-block => bottom (no space).
+test_position_area_placement('--top flip-block, --left', 'left');
+// left + flip-start flip-block => bottom (no space).
+test_position_area_placement('--left flip-start flip-block, --left', 'left');
+
+</script>
diff --git a/css/css-anchor-position/inset-area-inline-container-ref.html b/css/css-anchor-position/position-area-inline-container-ref.html
similarity index 100%
rename from css/css-anchor-position/inset-area-inline-container-ref.html
rename to css/css-anchor-position/position-area-inline-container-ref.html
diff --git a/css/css-anchor-position/inset-area-inline-container.html b/css/css-anchor-position/position-area-inline-container.html
similarity index 71%
rename from css/css-anchor-position/inset-area-inline-container.html
rename to css/css-anchor-position/position-area-inline-container.html
index b25a928b1fe08b..b6661ce5baa4a2 100644
--- a/css/css-anchor-position/inset-area-inline-container.html
+++ b/css/css-anchor-position/position-area-inline-container.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning with inline container</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
-<link rel="match" href="inset-area-inline-container-ref.html">
+<title>CSS Anchor Positioning: position-area positioning with inline container</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<link rel="match" href="position-area-inline-container-ref.html">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
 <style>
   #in-flow {
@@ -28,10 +28,10 @@
     position-anchor: --anchor;
     background-color: blue;
   }
-  #top-left { inset-area: top left; }
-  #top-right { inset-area: top right; }
-  #bottom-left { inset-area: bottom left; }
-  #bottom-right { inset-area: bottom right; }
+  #top-left { position-area: top left; }
+  #top-right { position-area: top right; }
+  #bottom-left { position-area: bottom left; }
+  #bottom-right { position-area: bottom right; }
 </style>
 <div id="in-flow">
   <br>
diff --git a/css/css-anchor-position/inset-area-interpolation.html b/css/css-anchor-position/position-area-interpolation.html
similarity index 74%
rename from css/css-anchor-position/inset-area-interpolation.html
rename to css/css-anchor-position/position-area-interpolation.html
index b09b3913531f95..b0e696ec25507a 100644
--- a/css/css-anchor-position/inset-area-interpolation.html
+++ b/css/css-anchor-position/position-area-interpolation.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area interpolation</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
+<title>CSS Anchor Positioning: position-area interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/interpolation-testcommon.js"></script>
 <body>
 <script>
   test_no_interpolation({
-    property: "inset-area",
+    property: "position-area",
     from: "none",
     to: "span-all left"
   });
diff --git a/css/css-anchor-position/position-area-parsing.html b/css/css-anchor-position/position-area-parsing.html
new file mode 100644
index 00000000000000..9eefd256f41e0a
--- /dev/null
+++ b/css/css-anchor-position/position-area-parsing.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area parsing</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<body>
+<script>
+  function test_valid_single_position_area_values(valid_keywords) {
+    for (const keyword of valid_keywords) {
+      test_valid_value("position-area", keyword);
+    }
+  };
+
+  function test_valid_position_area_value_pairs(valid_keywords1,
+                                             valid_keywords2,
+                                             flip_order) {
+    for (const keyword1 of valid_keywords1) {
+      for (const keyword2 of valid_keywords2) {
+        if (keyword1 === keyword2) {
+          test_valid_value("position-area", keyword1 + " " + keyword2, keyword1);
+        } else {
+          test_valid_value("position-area", keyword1 + " " + keyword2,
+                           flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2);
+        }
+      }
+    }
+  };
+
+  function test_valid_position_area_value_pairs_with_span_all_center(
+      valid_keywords, flip_order) {
+    for (const keyword of valid_keywords) {
+      test_valid_value("position-area", keyword + " center",
+                       flip_order ? "center " + keyword : keyword + " center");
+      test_valid_value("position-area", "center " + keyword,
+                       flip_order ? "center " + keyword : keyword + " center");
+      test_valid_value("position-area", keyword + " span-all", keyword);
+      test_valid_value("position-area", "span-all " + keyword, keyword);
+    }
+  };
+
+  function test_valid_position_area_value_start_end_pairs_with_span_all_center(
+      valid_keywords) {
+    for (const keyword of valid_keywords) {
+      test_valid_value("position-area", keyword + " center");
+      test_valid_value("position-area", "center " + keyword);
+      test_valid_value("position-area", keyword + " span-all");
+      test_valid_value("position-area", "span-all " + keyword);
+    }
+  }
+
+  function test_invalid_position_area_value_pairs(valid_keywords1,
+                                               valid_keywords2) {
+    for (const keyword1 of valid_keywords1) {
+      for (const keyword2 of valid_keywords2) {
+        test_invalid_value("position-area", keyword1 + " " + keyword2);
+        test_invalid_value("position-area", keyword2 + " " + keyword1);
+      }
+    }
+  };
+
+  function test_invalid_position_area_value_equal_pairs(valid_keywords) {
+    for (const keyword of valid_keywords) {
+      test_invalid_value("position-area", keyword + " " + keyword);
+    }
+  };
+
+  const horizontal = [ "left", "right", "span-left", "span-right", "x-start",
+                       "x-end", "span-x-start", "span-x-end", "x-self-start",
+                       "x-self-end", "span-x-self-start", "span-x-self-end" ];
+  const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start",
+                     "y-end", "span-y-start", "span-y-end", "y-self-start",
+                     "y-self-end", "span-y-self-start", "span-y-self-end" ];
+  const inline = [ "inline-start", "inline-end", "span-inline-start",
+                   "span-inline-end" ];
+  const block = [ "block-start", "block-end", "span-block-start",
+                  "span-block-end" ];
+  const self_inline = [ "self-inline-start", "self-inline-end",
+                        "span-self-inline-start", "span-self-inline-end" ];
+  const self_block = [ "self-block-start", "self-block-end",
+                       "span-self-block-start", "span-self-block-end" ];
+  const start_end = [ "start", "end", "span-start", "span-end" ];
+  const self_start_end = [ "self-start", "self-end", "span-self-start",
+                           "span-self-end" ];
+
+  // Test initial value 'none'
+  test_valid_value("position-area", "none");
+  test_invalid_value("position-area", "none none");
+  test_invalid_value("position-area", "start none");
+  test_invalid_value("position-area", "none start");
+  test_invalid_value("position-area", "top left top");
+
+  // Test keywords allowed in all axes
+  test_valid_value("position-area", "center");
+  test_valid_value("position-area", "center center", "center")
+  test_valid_value("position-area", "span-all");
+  test_valid_value("position-area", "span-all span-all", "span-all");
+  test_valid_value("position-area", "center span-all");
+  test_valid_value("position-area", "span-all center");
+
+  test_valid_single_position_area_values(horizontal);
+  test_valid_single_position_area_values(vertical);
+  test_valid_single_position_area_values(inline);
+  test_valid_single_position_area_values(block);
+  test_valid_single_position_area_values(start_end);
+  test_valid_single_position_area_values(self_start_end);
+
+  // Used if the sets of valid keywords are serialized in a different order than
+  // the argument order
+  const flip_order = true;
+
+  // Test all valid combinations in both orders
+  test_valid_position_area_value_pairs(horizontal, vertical);
+  test_valid_position_area_value_pairs(vertical, horizontal, flip_order);
+  test_valid_position_area_value_pairs(block, inline);
+  test_valid_position_area_value_pairs(inline, block, flip_order);
+  test_valid_position_area_value_pairs(self_block, self_inline);
+  test_valid_position_area_value_pairs(self_inline, self_block, flip_order);
+  test_valid_position_area_value_pairs(start_end, start_end);
+  test_valid_position_area_value_pairs(self_start_end, self_start_end);
+
+  // Test all valid combinations with 'span-all' and 'center' in both orders
+  test_valid_position_area_value_pairs_with_span_all_center(horizontal);
+  test_valid_position_area_value_pairs_with_span_all_center(vertical, flip_order);
+  test_valid_position_area_value_pairs_with_span_all_center(block);
+  test_valid_position_area_value_pairs_with_span_all_center(inline, flip_order);
+  test_valid_position_area_value_pairs_with_span_all_center(self_block);
+  test_valid_position_area_value_pairs_with_span_all_center(self_inline, flip_order);
+  test_valid_position_area_value_start_end_pairs_with_span_all_center(start_end);
+  test_valid_position_area_value_start_end_pairs_with_span_all_center(self_start_end);
+
+  // Test all invalid combinations with incompatible axes in both orders
+  test_invalid_position_area_value_pairs(horizontal, inline);
+  test_invalid_position_area_value_pairs(horizontal, block);
+  test_invalid_position_area_value_pairs(horizontal, self_inline);
+  test_invalid_position_area_value_pairs(horizontal, self_block);
+  test_invalid_position_area_value_pairs(horizontal, start_end);
+  test_invalid_position_area_value_pairs(horizontal, self_start_end);
+  test_invalid_position_area_value_pairs(vertical, inline);
+  test_invalid_position_area_value_pairs(vertical, block);
+  test_invalid_position_area_value_pairs(vertical, self_inline);
+  test_invalid_position_area_value_pairs(vertical, self_block);
+  test_invalid_position_area_value_pairs(vertical, start_end);
+  test_invalid_position_area_value_pairs(vertical, self_start_end);
+  test_invalid_position_area_value_pairs(inline, self_inline);
+  test_invalid_position_area_value_pairs(inline, self_block);
+  test_invalid_position_area_value_pairs(inline, start_end);
+  test_invalid_position_area_value_pairs(inline, self_start_end);
+  test_invalid_position_area_value_pairs(block, self_inline);
+  test_invalid_position_area_value_pairs(block, self_block);
+  test_invalid_position_area_value_pairs(block, start_end);
+  test_invalid_position_area_value_pairs(block, self_start_end);
+  test_invalid_position_area_value_pairs(start_end, self_start_end);
+
+  // Test all invalid combinations of same axis
+  test_invalid_position_area_value_equal_pairs(horizontal);
+  test_invalid_position_area_value_equal_pairs(vertical);
+  test_invalid_position_area_value_equal_pairs(inline);
+  test_invalid_position_area_value_equal_pairs(block);
+  test_invalid_position_area_value_equal_pairs(self_inline);
+  test_invalid_position_area_value_equal_pairs(self_block);
+</script>
diff --git a/css/css-anchor-position/inset-area-scroll-adjust-ref.html b/css/css-anchor-position/position-area-scroll-adjust-ref.html
similarity index 100%
rename from css/css-anchor-position/inset-area-scroll-adjust-ref.html
rename to css/css-anchor-position/position-area-scroll-adjust-ref.html
diff --git a/css/css-anchor-position/inset-area-scroll-adjust.html b/css/css-anchor-position/position-area-scroll-adjust.html
similarity index 78%
rename from css/css-anchor-position/inset-area-scroll-adjust.html
rename to css/css-anchor-position/position-area-scroll-adjust.html
index 0d3cef4fc96310..497b526fb62b94 100644
--- a/css/css-anchor-position/inset-area-scroll-adjust.html
+++ b/css/css-anchor-position/position-area-scroll-adjust.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area anchored against scrolling anchor</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
-<link rel="match" href="inset-area-scroll-adjust-ref.html">
+<title>CSS Anchor Positioning: position-area anchored against scrolling anchor</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<link rel="match" href="position-area-scroll-adjust-ref.html">
 <style>
   #scroller {
     width: 400px;
@@ -14,7 +14,7 @@
     height: 100px;
   }
   #anchored {
-    inset-area: bottom;
+    position-area: bottom;
     margin: 0;
     padding: 0;
     border: none;
diff --git a/css/css-anchor-position/inset-area-value.html b/css/css-anchor-position/position-area-value.html
similarity index 62%
rename from css/css-anchor-position/inset-area-value.html
rename to css/css-anchor-position/position-area-value.html
index 27c5882fc6e181..dfe753427e6abc 100644
--- a/css/css-anchor-position/inset-area-value.html
+++ b/css/css-anchor-position/position-area-value.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: <'inset-area'> value</title>
+<title>CSS Anchor Positioning: <'position-area'> value</title>
 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -24,7 +24,7 @@
     width: 40px;
     height: 40px;
     background-color: skyblue;
-    inset-area: bottom right;
+    position-area: bottom right;
     position-anchor: --a;
   }
   #ref {
@@ -40,32 +40,32 @@
 </div>
 <script>
 
-// Test that a given <'inset-area'> produces the same result as a reference
-// element that is styled with an inset-area declaration directly.
-function test_inset_area_fn(inset_area) {
+// Test that a given <'position-area'> produces the same result as a reference
+// element that is styled with an position-area declaration directly.
+function test_position_area_fn(position_area) {
   test((t) => {
     t.add_cleanup(() => {
       style.textContent = '';
     });
     style.textContent = `
       #target {
-        position-try-fallbacks: ${inset_area};
+        position-try-fallbacks: ${position_area};
       }
       #ref {
-        inset-area: ${inset_area};
+        position-area: ${position_area};
       }
     `;
     assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
     assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
-  }, `${inset_area}`);
+  }, `${position_area}`);
 }
 
-test_inset_area_fn('top left');
-test_inset_area_fn('span-top left');
-test_inset_area_fn('top span-left');
-test_inset_area_fn('top center');
-test_inset_area_fn('left center');
-test_inset_area_fn('start center');
-test_inset_area_fn('center start');
+test_position_area_fn('top left');
+test_position_area_fn('span-top left');
+test_position_area_fn('top span-left');
+test_position_area_fn('top center');
+test_position_area_fn('left center');
+test_position_area_fn('start center');
+test_position_area_fn('center start');
 
 </script>
diff --git a/css/css-anchor-position/inset-area-with-insets.html b/css/css-anchor-position/position-area-with-insets.html
similarity index 69%
rename from css/css-anchor-position/inset-area-with-insets.html
rename to css/css-anchor-position/position-area-with-insets.html
index f6a4cd3665224e..6f6cf438ac1765 100644
--- a/css/css-anchor-position/inset-area-with-insets.html
+++ b/css/css-anchor-position/position-area-with-insets.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: inset-area positioning with additional insets</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
+<title>CSS Anchor Positioning: position-area positioning with additional insets</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <!-- The grid:
@@ -46,8 +46,8 @@
   <div id="anchor"></div>
 </div>
 <script>
-  function test_inset_area(inset_area, insets, expected_offsets) {
-    anchored.style.insetArea = inset_area;
+  function test_position_area(position_area, insets, expected_offsets) {
+    anchored.style.positionArea = position_area;
     for (const [prop, value] of Object.entries(insets)) {
       anchored.style[prop] = value;
     }
@@ -57,23 +57,23 @@
       assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
       assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
       assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
-    }, "Offsets for inset-area: " + inset_area + " and insets: " + JSON.stringify(insets));
+    }, "Offsets for position-area: " + position_area + " and insets: " + JSON.stringify(insets));
   }
 
-  test_inset_area("span-all", {top:"5px", bottom:"5px", left:"5px", right:"5px"},
+  test_position_area("span-all", {top:"5px", bottom:"5px", left:"5px", right:"5px"},
                   {left:5, top:5, width:390, height:390});
 
-  test_inset_area("center center", {top:"10px", bottom:"40px", left:"5px", right:"15px"},
+  test_position_area("center center", {top:"10px", bottom:"40px", left:"5px", right:"15px"},
                   {left:105, top:160, width:130, height:25});
 
-  test_inset_area("left bottom", {top:"10px", bottom:"40px", left:"5px", right:"15px"},
+  test_position_area("left bottom", {top:"10px", bottom:"40px", left:"5px", right:"15px"},
                   {left:5, top:235, width:80, height:125});
 
-  test_inset_area("span-right center", {top:"20%", bottom:"auto", left:"auto", right:"25%"},
+  test_position_area("span-right center", {top:"20%", bottom:"auto", left:"auto", right:"25%"},
                   {left:100, top:165, width:225, height:60});
 
-  // No implicit anchor means the inset-area should not apply, but the insets still should.
+  // No implicit anchor means the position-area should not apply, but the insets still should.
   anchored.style.positionAnchor = "auto";
-  test_inset_area("bottom right", {left:"50px", right:"100px", top:"30px" , bottom:"10px"},
+  test_position_area("bottom right", {left:"50px", right:"100px", top:"30px" , bottom:"10px"},
                   {left:50, top:30, width:250, height:360});
 </script>
diff --git a/css/css-anchor-position/position-area-wm-dir.html b/css/css-anchor-position/position-area-wm-dir.html
new file mode 100644
index 00000000000000..1ca0668067ca06
--- /dev/null
+++ b/css/css-anchor-position/position-area-wm-dir.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-area with writing-mode and direction</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<!-- The grid:
+
+          100      150      150
+      +--------+--------+--------+
+      |        |        |        |
+  150 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+      |        |        |        |
+   75 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+      |        |        |        |
+  175 |        |        |        |
+      |        |        |        |
+      +--------+--------+--------+
+
+  -->
+<style>
+  #container {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+  }
+  #anchored {
+    position: absolute;
+    align-self: stretch;
+    justify-self: stretch;
+    position-anchor: --anchor;
+  }
+  #anchor {
+    margin-top: 150px;
+    margin-bottom: 175px;
+    margin-left: 100px;
+    margin-right: 150px;
+    width: 150px;
+    height: 75px;
+    anchor-name: --anchor;
+  }
+</style>
+<div id="container">
+  <div id="anchored"></div>
+  <div id="anchor"></div>
+</div>
+<script>
+  function test_position_area(writing_direction, position_area, expected_offsets) {
+    anchored.style.positionArea = position_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: " + position_area + " with writing-mode / direction: " + writing_direction);
+  }
+
+  const top_left = {left:0, top:0, width:100, height:150};
+  const top_right = {left:250, top:0, width:150, height:150};
+  const bottom_left = {left:0, top:225, width:100, height:175};
+  const bottom_right = {left:250, top:225, width:150, height:175};
+
+  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_position_area(writing_direction, "start start", top_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_right);
+  test_position_area(writing_direction, "x-self-start y-self-start", top_left);
+  test_position_area(writing_direction, "inline-start block-end", bottom_right);
+  test_position_area(writing_direction, "self-inline-start self-block-end", bottom_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_area(writing_direction, "x-self-start y-self-start", top_left);
+  test_position_area(writing_direction, "inline-start block-end", top_right);
+  test_position_area(writing_direction, "self-inline-start self-block-end", bottom_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_position_area(writing_direction, "start start", bottom_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", bottom_left);
+  test_position_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_position_area(writing_direction, "start start", top_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_right);
+  test_position_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_position_area(writing_direction, "start start", bottom_right);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", bottom_right);
+  test_position_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", bottom_left);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", top_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_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_position_area(writing_direction, "start start", top_left);
+  test_position_area(writing_direction, "self-start self-start", bottom_right);
+  test_position_area(writing_direction, "x-start y-start", top_left);
+  test_position_area(writing_direction, "x-self-start y-self-start", bottom_right);
+
+</script>
diff --git a/css/css-anchor-position/position-try-order-inset-area.html b/css/css-anchor-position/position-try-order-position-area.html
similarity index 60%
rename from css/css-anchor-position/position-try-order-inset-area.html
rename to css/css-anchor-position/position-try-order-position-area.html
index 71ae5d78debe9e..3b7a3475c759d0 100644
--- a/css/css-anchor-position/position-try-order-inset-area.html
+++ b/css/css-anchor-position/position-try-order-position-area.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<title>CSS Anchor Positioning: position-try-order behavior with inset-area</title>
+<title>CSS Anchor Positioning: position-try-order behavior with position-area</title>
 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property">
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#inset-area">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <!--
-  Note: This test is the inset-area version of position-try-order-basic.html.
+  Note: This test is the position-area version of position-try-order-basic.html.
 -->
 <style>
   #cb {
@@ -58,19 +58,19 @@
 
   @position-try --right {
     inset: unset;
-    inset-area: right;
+    position-area: right;
   }
   @position-try --left {
     inset: unset;
-    inset-area: left;
+    position-area: left;
   }
   @position-try --top {
     inset: unset;
-    inset-area: top;
+    position-area: top;
   }
   @position-try --bottom {
     inset: unset;
-    inset-area: bottom;
+    position-area: bottom;
   }
 
 /*
@@ -92,22 +92,22 @@
 
   @position-try --right-sweep {
     inset: unset;
-    inset-area: right center;
+    position-area: right center;
   }
 
   @position-try --left-sweep {
     inset: unset;
-    inset-area: left center;
+    position-area: left center;
   }
 
   @position-try --bottom-sweep {
     inset: unset;
-    inset-area: bottom center;
+    position-area: bottom center;
   }
 
   @position-try --top-sweep {
     inset: unset;
-    inset-area: top center;
+    position-area: top center;
   }
 
 </style>
@@ -122,7 +122,7 @@
 
 // Test that an element with the specified `position_try` gets the same
 // position as a reference element with `position_try_expected`.
-function test_inset_area_order(position_try, position_try_expected) {
+function test_position_area_order(position_try, position_try_expected) {
   test((t) => {
     style.textContent = `
       #target {
@@ -141,54 +141,54 @@
 // Note: --right, --left, --top, and --bottom all fit, but have different
 // inset-modifed containing blocks.
 
-test_inset_area_order('--right', '--right');
-test_inset_area_order('--left', '--left');
-test_inset_area_order('--top', '--top');
-test_inset_area_order('--bottom', '--bottom');
+test_position_area_order('--right', '--right');
+test_position_area_order('--left', '--left');
+test_position_area_order('--top', '--top');
+test_position_area_order('--bottom', '--bottom');
 
 // position-try-order:normal just picks the first fallback.
-test_inset_area_order('--right, --left, --bottom, --top', '--right');
-test_inset_area_order('normal --right, --left, --bottom, --top', '--right');
-test_inset_area_order('normal --top, --left, --bottom, --right', '--top');
+test_position_area_order('--right, --left, --bottom, --top', '--right');
+test_position_area_order('normal --right, --left, --bottom, --top', '--right');
+test_position_area_order('normal --top, --left, --bottom, --right', '--top');
 
 // --right and --left have the same IMCB block-size.
-test_inset_area_order('most-block-size --right, --left', '--right');
-test_inset_area_order('most-height --right, --left', '--right');
+test_position_area_order('most-block-size --right, --left', '--right');
+test_position_area_order('most-height --right, --left', '--right');
 // --left has more inline-size than --right.
-test_inset_area_order('most-inline-size --right, --left', '--left');
-test_inset_area_order('most-width --right, --left', '--left');
+test_position_area_order('most-inline-size --right, --left', '--left');
+test_position_area_order('most-width --right, --left', '--left');
 
 // --bottom and --top have the same IMCB inline-size.
-test_inset_area_order('most-inline-size --bottom, --top', '--bottom');
-test_inset_area_order('most-width --bottom, --top', '--bottom');
+test_position_area_order('most-inline-size --bottom, --top', '--bottom');
+test_position_area_order('most-width --bottom, --top', '--bottom');
 // --top has more block-size than --bottom.
-test_inset_area_order('most-block-size --bottom, --top', '--top');
-test_inset_area_order('most-height --bottom, --top', '--top');
+test_position_area_order('most-block-size --bottom, --top', '--top');
+test_position_area_order('most-height --bottom, --top', '--top');
 
 // --bottom/--top has more IMBC inline-size than --right/--left.
-test_inset_area_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
-test_inset_area_order('most-inline-size --right, --left, --top, --bottom', '--top');
+test_position_area_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
+test_position_area_order('most-inline-size --right, --left, --top, --bottom', '--top');
 
 // --right/--left has more IMBC block-size than --bottom/--top.
-test_inset_area_order('most-block-size --bottom, --top, --right, --left', '--right');
-test_inset_area_order('most-block-size --bottom, --top, --left, --right', '--left');
+test_position_area_order('most-block-size --bottom, --top, --right, --left', '--right');
+test_position_area_order('most-block-size --bottom, --top, --left, --right', '--left');
 
 // --left-sweep and --bottom-sweep has the same IMBC inline-size ...
-test_inset_area_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
-test_inset_area_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
+test_position_area_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
+test_position_area_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
 // ... but not the same block-size.
-test_inset_area_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
-test_inset_area_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');
+test_position_area_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
+test_position_area_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');
 
-test_inset_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
-test_inset_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
+test_position_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
+test_position_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
 
-test_inset_area_order(`most-inline-size
+test_position_area_order(`most-inline-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
   --right, --left, --bottom, --top
   `, '--left-sweep');
 
-test_inset_area_order(`most-block-size
+test_position_area_order(`most-block-size
   --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
   --right, --left, --bottom, --top
   `, '--right');
diff --git a/css/css-anchor-position/position-try-switch-from-fixed-anchor.html b/css/css-anchor-position/position-try-switch-from-fixed-anchor.html
index df398e0090dd67..4c62dc9933283a 100644
--- a/css/css-anchor-position/position-try-switch-from-fixed-anchor.html
+++ b/css/css-anchor-position/position-try-switch-from-fixed-anchor.html
@@ -31,7 +31,7 @@
 }
 #anchored {
   position-anchor: --anchor1;
-  inset-area: top;
+  position-area: top;
   position-try-fallbacks: --fixed;
   position: fixed;
   width: 50px;
@@ -39,7 +39,7 @@
   background: blue;
 }
 @position-try --fixed {
-  inset-area: top left;
+  position-area: top left;
   position-anchor: --anchor2;
 }
 </style>
diff --git a/css/css-anchor-position/position-try-switch-to-fixed-anchor.html b/css/css-anchor-position/position-try-switch-to-fixed-anchor.html
index 469064e7e28730..5024f5bd48d891 100644
--- a/css/css-anchor-position/position-try-switch-to-fixed-anchor.html
+++ b/css/css-anchor-position/position-try-switch-to-fixed-anchor.html
@@ -30,7 +30,7 @@
 }
 #anchored {
   position-anchor: --anchor1;
-  inset-area: top;
+  position-area: top;
   position-try-fallbacks: --fixed;
   position: fixed;
   width: 50px;
@@ -38,7 +38,7 @@
   background: blue;
 }
 @position-try --fixed {
-  inset-area: top left;
+  position-area: top left;
   position-anchor: --anchor2;
 }
 </style>
diff --git a/css/css-anchor-position/position-visibility-add-no-overflow.html b/css/css-anchor-position/position-visibility-add-no-overflow.html
index de0647f88bedb9..a71327ba4ca792 100644
--- a/css/css-anchor-position/position-visibility-add-no-overflow.html
+++ b/css/css-anchor-position/position-visibility-add-no-overflow.html
@@ -21,7 +21,7 @@
 
   .target {
     position: absolute;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-valid.tentative.html b/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
index 4b069c253b8c41..d04bc7c4974f83 100644
--- a/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
+++ b/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
@@ -14,7 +14,7 @@
   .target {
     position: absolute;
     position-visibility: anchors-valid;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html b/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html
index f13c50091505f5..4a038f8de3e307 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html
@@ -28,7 +28,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html b/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html
index 4294091b899c77..2cf2fb3e225380 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html
@@ -28,7 +28,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html b/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html
index 3ea26c896e9179..c603288f0a70a1 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html
@@ -18,7 +18,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html b/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html
index 3f515a56868298..cdceba665eed95 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html
@@ -33,7 +33,7 @@
 
   .anchored {
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 50px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html b/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html
index aa1dcd0eb96326..cd34d07acc3411 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html
@@ -32,7 +32,7 @@
 
   .anchored {
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 50px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html b/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html
index 9a1e077de0896d..7b2766d2e5c783 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html
@@ -41,7 +41,7 @@
 
   .anchored {
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 50px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html b/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html
index 62ab7578a34da8..e76e4ff1600f1e 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html
@@ -33,7 +33,7 @@
 
   .anchored {
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 50px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html b/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html
index 117628e7dcaf8f..3fda2fa4371d50 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html
@@ -33,7 +33,7 @@
   #target {
     position-anchor: --a2;
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html b/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html
index f9c598374c1981..290de127a2321c 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html
@@ -22,7 +22,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html b/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html
index a6990253251e60..8ef4762818b081 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html
@@ -19,7 +19,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html b/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html
index 9c4d085b7ea78e..42597c4ccc2ad3 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html
@@ -36,7 +36,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: right;
+    position-area: right;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html b/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html
index 25665ae4668433..9c3495a635d2ea 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-position-fixed.tentative.html
@@ -18,7 +18,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html b/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html
index e563fecfed165d..84b5feb02fc7fb 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html
@@ -25,7 +25,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html b/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html
index 7c0d5dc6aadd36..4a9fcc0ae50d1b 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.tentative.html
@@ -25,7 +25,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible-with-position.html b/css/css-anchor-position/position-visibility-anchors-visible-with-position.html
index 43dd2cc7821207..8ad3eb7e31053a 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible-with-position.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible-with-position.html
@@ -27,7 +27,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-anchors-visible.html b/css/css-anchor-position/position-visibility-anchors-visible.html
index 78daffb11bbca5..db246311f94783 100644
--- a/css/css-anchor-position/position-visibility-anchors-visible.html
+++ b/css/css-anchor-position/position-visibility-anchors-visible.html
@@ -25,7 +25,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom right;
+    position-area: bottom right;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html b/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html
index 1ea5ff9a1eedbe..78a7b3e62025ba 100644
--- a/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html
+++ b/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html
@@ -21,7 +21,7 @@
   .target {
     position: absolute;
     position-visibility: no-overflow;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-no-overflow.html b/css/css-anchor-position/position-visibility-no-overflow.html
index ea3b2d0802651d..0569a9d179c025 100644
--- a/css/css-anchor-position/position-visibility-no-overflow.html
+++ b/css/css-anchor-position/position-visibility-no-overflow.html
@@ -21,7 +21,7 @@
   .target {
     position: absolute;
     position-visibility: no-overflow;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: red;
diff --git a/css/css-anchor-position/position-visibility-remove-anchors-visible.html b/css/css-anchor-position/position-visibility-remove-anchors-visible.html
index 95be15ca55bb0d..3408642ad2b401 100644
--- a/css/css-anchor-position/position-visibility-remove-anchors-visible.html
+++ b/css/css-anchor-position/position-visibility-remove-anchors-visible.html
@@ -28,7 +28,7 @@
   #target {
     position-anchor: --a1;
     position-visibility: anchors-visible;
-    inset-area: bottom;
+    position-area: bottom;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/position-visibility-remove-no-overflow.html b/css/css-anchor-position/position-visibility-remove-no-overflow.html
index 2cd2ed9fa30812..1761bbea0bf939 100644
--- a/css/css-anchor-position/position-visibility-remove-no-overflow.html
+++ b/css/css-anchor-position/position-visibility-remove-no-overflow.html
@@ -22,7 +22,7 @@
   .target {
     position: absolute;
     position-visibility: no-overflow;
-    inset-area: block-end;
+    position-area: block-end;
     width: 100px;
     height: 100px;
     background: green;
diff --git a/css/css-anchor-position/property-interpolations.html b/css/css-anchor-position/property-interpolations.html
index 5687e34cfd6dbb..4dc6c71ab2c25c 100644
--- a/css/css-anchor-position/property-interpolations.html
+++ b/css/css-anchor-position/property-interpolations.html
@@ -30,12 +30,12 @@
   });
 
   test_no_interpolation({
-    property: 'inset-area',
+    property: 'position-area',
     from: 'none',
     to: 'center',
   });
   test_no_interpolation({
-    property: 'inset-area',
+    property: 'position-area',
     from: 'left',
     to: 'right',
   });
diff --git a/css/css-anchor-position/try-tactic-inset-area.html b/css/css-anchor-position/try-tactic-inset-area.html
deleted file mode 100644
index 9e53fab91fc9f0..00000000000000
--- a/css/css-anchor-position/try-tactic-inset-area.html
+++ /dev/null
@@ -1,251 +0,0 @@
-<!DOCTYPE html>
-<title>CSS Anchor Positioning: try-tactic, inset-area</title>
-<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-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 {
-    position: absolute;
-    left: 450px; /* force fallback */
-    width: 40px;
-    height: 40px;
-    background-color: skyblue;
-  }
-</style>
-<style id=style>
-</style>
-<div id=cb>
-  <div id=target></div>
-</div>
-<script>
-
-function test_computed_value(try_tactic, property, value, expected, direction, writing_mode) {
-  if (direction==undefined) {
-    direction = 'ltr';
-  }
-  if (writing_mode==undefined) {
-    writing_mode = 'horizontal-tb';
-  }
-  test((t) => {
-    t.add_cleanup(() => {
-      style.textContent = '';
-      document.documentElement.style = '';
-    });
-    document.documentElement.style.direction = direction;
-    document.documentElement.style.writingMode = writing_mode;
-    style.textContent = `
-      @position-try --pf {
-        inset: initial;
-        ${property}:${value};
-      }
-      #target {
-        position-try-fallbacks: --pf ${try_tactic};
-      }
-    `;
-    assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
-  }, `${try_tactic}, ${property}:${value}, ${direction} ${writing_mode}`);
-}
-
-
-// Physical:
-
-test_computed_value('flip-inline', 'inset-area', 'left top', 'right top');
-test_computed_value('flip-inline', 'inset-area', 'left bottom', 'right bottom');
-test_computed_value('flip-inline', 'inset-area', 'right bottom', 'left bottom');
-test_computed_value('flip-inline', 'inset-area', 'right top', 'left top');
-
-test_computed_value('flip-block', 'inset-area', 'left top', 'left bottom');
-test_computed_value('flip-block', 'inset-area', 'left bottom', 'left top');
-test_computed_value('flip-block', 'inset-area', 'right bottom', 'right top');
-test_computed_value('flip-block', 'inset-area', 'right top', 'right bottom');
-
-test_computed_value('flip-block flip-inline', 'inset-area', 'left top', 'right bottom');
-test_computed_value('flip-block flip-inline', 'inset-area', 'left bottom', 'right top');
-test_computed_value('flip-block flip-inline', 'inset-area', 'right bottom', 'left top');
-test_computed_value('flip-block flip-inline', 'inset-area', 'right top', 'left bottom');
-
-test_computed_value('flip-start', 'inset-area', 'left top', 'left top');
-test_computed_value('flip-start', 'inset-area', 'left bottom', 'right top');
-test_computed_value('flip-start', 'inset-area', 'right bottom', 'right bottom');
-test_computed_value('flip-start', 'inset-area', 'right top', 'left bottom');
-
-test_computed_value('flip-block flip-start', 'inset-area', 'left top', 'right top');
-test_computed_value('flip-block flip-start', 'inset-area', 'left bottom', 'left top');
-test_computed_value('flip-block flip-start', 'inset-area', 'right bottom', 'left bottom');
-test_computed_value('flip-block flip-start', 'inset-area', 'right top', 'right bottom');
-
-test_computed_value('flip-inline flip-start', 'inset-area', 'left top', 'left bottom');
-test_computed_value('flip-inline flip-start', 'inset-area', 'left bottom', 'right bottom');
-test_computed_value('flip-inline flip-start', 'inset-area', 'right bottom', 'right top');
-test_computed_value('flip-inline flip-start', 'inset-area', 'right top', 'left top');
-
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left top', 'right bottom');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'left bottom', 'left bottom');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right bottom', 'left top');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'right top', 'right top');
-
-// Variations:
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-left span-top', 'span-right span-bottom');
-
-// XY:
-
-test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start');
-test_computed_value('flip-inline', 'inset-area', 'x-start y-end', 'x-end y-end');
-test_computed_value('flip-inline', 'inset-area', 'x-end y-end', 'x-start y-end');
-test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-start y-start');
-
-test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end');
-test_computed_value('flip-block', 'inset-area', 'x-start y-end', 'x-start y-start');
-test_computed_value('flip-block', 'inset-area', 'x-end y-end', 'x-end y-start');
-test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-end y-end');
-
-test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-start', 'x-end y-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'x-start y-end', 'x-end y-start');
-test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-end', 'x-start y-start');
-test_computed_value('flip-block flip-inline', 'inset-area', 'x-end y-start', 'x-start y-end');
-
-test_computed_value('flip-start', 'inset-area', 'x-start y-start', 'x-start y-start');
-test_computed_value('flip-start', 'inset-area', 'x-start y-end', 'x-end y-start');
-test_computed_value('flip-start', 'inset-area', 'x-end y-end', 'x-end y-end');
-test_computed_value('flip-start', 'inset-area', 'x-end y-start', 'x-start y-end');
-
-test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-start', 'x-end y-start');
-test_computed_value('flip-block flip-start', 'inset-area', 'x-start y-end', 'x-start y-start');
-test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-end', 'x-start y-end');
-test_computed_value('flip-block flip-start', 'inset-area', 'x-end y-start', 'x-end y-end');
-
-test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-start y-end');
-test_computed_value('flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-end y-end');
-test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-end y-start');
-test_computed_value('flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-start y-start');
-
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-start', 'x-end y-end');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-start y-end', 'x-start y-end');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-end', 'x-start y-start');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'x-end y-start', 'x-end y-start');
-
-// Variations:
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-start span-y-start', 'span-x-end span-y-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'x-self-start y-self-start', 'x-self-end y-self-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-x-self-start span-y-self-start', 'span-x-self-end span-y-self-end');
-
-// Logical:
-
-test_computed_value('flip-inline', 'inset-area', 'block-start inline-start', 'block-start inline-end');
-test_computed_value('flip-inline', 'inset-area', 'block-end inline-start', 'block-end inline-end');
-test_computed_value('flip-inline', 'inset-area', 'block-end inline-end', 'block-end inline-start');
-test_computed_value('flip-inline', 'inset-area', 'block-start inline-end', 'block-start inline-start');
-
-test_computed_value('flip-block', 'inset-area', 'block-start inline-start', 'block-end inline-start');
-test_computed_value('flip-block', 'inset-area', 'block-end inline-start', 'block-start inline-start');
-test_computed_value('flip-block', 'inset-area', 'block-end inline-end', 'block-start inline-end');
-test_computed_value('flip-block', 'inset-area', 'block-start inline-end', 'block-end inline-end');
-
-test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-start', 'block-end inline-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-start', 'block-start inline-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'block-end inline-end', 'block-start inline-start');
-test_computed_value('flip-block flip-inline', 'inset-area', 'block-start inline-end', 'block-end inline-start');
-
-test_computed_value('flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-start');
-test_computed_value('flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-end');
-test_computed_value('flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-end');
-test_computed_value('flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-start');
-
-test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-start', 'block-start inline-end');
-test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-start', 'block-start inline-start');
-test_computed_value('flip-block flip-start', 'inset-area', 'block-end inline-end', 'block-end inline-start');
-test_computed_value('flip-block flip-start', 'inset-area', 'block-start inline-end', 'block-end inline-end');
-
-test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-start');
-test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-end');
-test_computed_value('flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-end');
-test_computed_value('flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-start');
-
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-start', 'block-end inline-end');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-start', 'block-end inline-start');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-end inline-end', 'block-start inline-start');
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'block-start inline-end', 'block-start inline-end');
-
-// Variations:
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-block-start span-inline-start', 'span-block-end span-inline-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'self-block-start self-inline-start', 'self-block-end self-inline-end');
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-block-start span-self-inline-start', 'span-self-block-end span-self-inline-end');
-
-// start/end
-
-test_computed_value('', 'inset-area', 'start end', 'start end');
-
-test_computed_value('flip-block', 'inset-area', 'start end', 'end');
-
-test_computed_value('flip-inline', 'inset-area', 'start end', 'start');
-
-test_computed_value('flip-block flip-inline', 'inset-area', 'start end', 'end start');
-
-test_computed_value('flip-start', 'inset-area', 'start', 'start');
-test_computed_value('flip-start', 'inset-area', 'end', 'end');
-test_computed_value('flip-start', 'inset-area', 'start end', 'end start');
-
-test_computed_value('flip-block flip-start', 'inset-area', 'start end', 'end');
-
-test_computed_value('flip-inline flip-start', 'inset-area', 'start end', 'start');
-
-test_computed_value('flip-block flip-inline flip-start', 'inset-area', 'start end', 'start end');
-
-// Variations:
-
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-start span-end', 'span-end span-start');
-test_computed_value('flip-block flip-inline', 'inset-area', 'self-start self-end', 'self-end self-start');
-test_computed_value('flip-block flip-inline', 'inset-area', 'span-self-start span-self-end', 'span-self-end span-self-start');
-
-// center
-test_computed_value('flip-block', 'inset-area', 'left center', 'left center');
-test_computed_value('flip-block', 'inset-area', 'center top', 'center bottom');
-test_computed_value('flip-block', 'inset-area', 'center', 'center');
-test_computed_value('flip-block', 'inset-area', 'start center', 'end center');
-test_computed_value('flip-block', 'inset-area', 'center start', 'center start');
-test_computed_value('flip-inline', 'inset-area', 'center start', 'center end');
-test_computed_value('flip-start', 'inset-area', 'center start', 'start center');
-
-// span-all
-test_computed_value('flip-block', 'inset-area', 'left span-all', 'left');
-test_computed_value('flip-block', 'inset-area', 'span-all top', 'bottom');
-test_computed_value('flip-block', 'inset-area', 'span-all', 'span-all');
-test_computed_value('flip-block', 'inset-area', 'start span-all', 'end span-all');
-test_computed_value('flip-block', 'inset-area', 'span-all start', 'span-all start');
-test_computed_value('flip-inline', 'inset-area', 'span-all start', 'span-all end');
-test_computed_value('flip-start', 'inset-area', 'span-all start', 'start span-all');
-
-// Span mix:
-test_computed_value('flip-block', 'inset-area', 'left span-top', 'left span-bottom');
-test_computed_value('flip-inline', 'inset-area', 'left span-top', 'right span-top');
-test_computed_value('flip-start', 'inset-area', 'span-block-start inline-end', 'block-end span-inline-start');
-
-// Writing modes:
-test_computed_value('flip-block', 'inset-area', 'left top', 'right top', 'ltr', 'vertical-rl');
-
-test_computed_value('', 'inset-area', 'x-start y-start', 'x-start y-start', 'rtl');
-test_computed_value('flip-block', 'inset-area', 'x-start y-start', 'x-start y-end', 'rtl');
-test_computed_value('flip-inline', 'inset-area', 'x-start y-start', 'x-end y-start', 'rtl');
-test_computed_value('flip-block', 'inset-area', 'x-end y-start', 'x-start y-start', 'ltr', 'vertical-rl');
-test_computed_value('flip-inline', 'inset-area', 'x-end y-start', 'x-end y-end', 'ltr', 'vertical-rl');
-
-test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'rtl');
-test_computed_value('flip-inline', 'inset-area', 'start end', 'start', 'ltr', 'vertical-rl');
-test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'rtl');
-test_computed_value('flip-block', 'inset-area', 'start end', 'end', 'ltr', 'vertical-rl');
-
-</script>
diff --git a/css/css-anchor-position/try-tactic-position-area.html b/css/css-anchor-position/try-tactic-position-area.html
new file mode 100644
index 00000000000000..e050dbccef2b56
--- /dev/null
+++ b/css/css-anchor-position/try-tactic-position-area.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: try-tactic, position-area</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#typedef-position-try-fallbacks-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 {
+    position: absolute;
+    left: 450px; /* force fallback */
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+  }
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <div id=target></div>
+</div>
+<script>
+
+function test_computed_value(try_tactic, property, value, expected, direction, writing_mode) {
+  if (direction==undefined) {
+    direction = 'ltr';
+  }
+  if (writing_mode==undefined) {
+    writing_mode = 'horizontal-tb';
+  }
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+      document.documentElement.style = '';
+    });
+    document.documentElement.style.direction = direction;
+    document.documentElement.style.writingMode = writing_mode;
+    style.textContent = `
+      @position-try --pf {
+        inset: initial;
+        ${property}:${value};
+      }
+      #target {
+        position-try-fallbacks: --pf ${try_tactic};
+      }
+    `;
+    assert_equals(getComputedStyle(target).getPropertyValue(property), expected);
+  }, `${try_tactic}, ${property}:${value}, ${direction} ${writing_mode}`);
+}
+
+
+// Physical:
+
+test_computed_value('flip-inline', 'position-area', 'left top', 'right top');
+test_computed_value('flip-inline', 'position-area', 'left bottom', 'right bottom');
+test_computed_value('flip-inline', 'position-area', 'right bottom', 'left bottom');
+test_computed_value('flip-inline', 'position-area', 'right top', 'left top');
+
+test_computed_value('flip-block', 'position-area', 'left top', 'left bottom');
+test_computed_value('flip-block', 'position-area', 'left bottom', 'left top');
+test_computed_value('flip-block', 'position-area', 'right bottom', 'right top');
+test_computed_value('flip-block', 'position-area', 'right top', 'right bottom');
+
+test_computed_value('flip-block flip-inline', 'position-area', 'left top', 'right bottom');
+test_computed_value('flip-block flip-inline', 'position-area', 'left bottom', 'right top');
+test_computed_value('flip-block flip-inline', 'position-area', 'right bottom', 'left top');
+test_computed_value('flip-block flip-inline', 'position-area', 'right top', 'left bottom');
+
+test_computed_value('flip-start', 'position-area', 'left top', 'left top');
+test_computed_value('flip-start', 'position-area', 'left bottom', 'right top');
+test_computed_value('flip-start', 'position-area', 'right bottom', 'right bottom');
+test_computed_value('flip-start', 'position-area', 'right top', 'left bottom');
+
+test_computed_value('flip-block flip-start', 'position-area', 'left top', 'right top');
+test_computed_value('flip-block flip-start', 'position-area', 'left bottom', 'left top');
+test_computed_value('flip-block flip-start', 'position-area', 'right bottom', 'left bottom');
+test_computed_value('flip-block flip-start', 'position-area', 'right top', 'right bottom');
+
+test_computed_value('flip-inline flip-start', 'position-area', 'left top', 'left bottom');
+test_computed_value('flip-inline flip-start', 'position-area', 'left bottom', 'right bottom');
+test_computed_value('flip-inline flip-start', 'position-area', 'right bottom', 'right top');
+test_computed_value('flip-inline flip-start', 'position-area', 'right top', 'left top');
+
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'left top', 'right bottom');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'left bottom', 'left bottom');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'right bottom', 'left top');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'right top', 'right top');
+
+// Variations:
+test_computed_value('flip-block flip-inline', 'position-area', 'span-left span-top', 'span-right span-bottom');
+
+// XY:
+
+test_computed_value('flip-inline', 'position-area', 'x-start y-start', 'x-end y-start');
+test_computed_value('flip-inline', 'position-area', 'x-start y-end', 'x-end y-end');
+test_computed_value('flip-inline', 'position-area', 'x-end y-end', 'x-start y-end');
+test_computed_value('flip-inline', 'position-area', 'x-end y-start', 'x-start y-start');
+
+test_computed_value('flip-block', 'position-area', 'x-start y-start', 'x-start y-end');
+test_computed_value('flip-block', 'position-area', 'x-start y-end', 'x-start y-start');
+test_computed_value('flip-block', 'position-area', 'x-end y-end', 'x-end y-start');
+test_computed_value('flip-block', 'position-area', 'x-end y-start', 'x-end y-end');
+
+test_computed_value('flip-block flip-inline', 'position-area', 'x-start y-start', 'x-end y-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'x-start y-end', 'x-end y-start');
+test_computed_value('flip-block flip-inline', 'position-area', 'x-end y-end', 'x-start y-start');
+test_computed_value('flip-block flip-inline', 'position-area', 'x-end y-start', 'x-start y-end');
+
+test_computed_value('flip-start', 'position-area', 'x-start y-start', 'x-start y-start');
+test_computed_value('flip-start', 'position-area', 'x-start y-end', 'x-end y-start');
+test_computed_value('flip-start', 'position-area', 'x-end y-end', 'x-end y-end');
+test_computed_value('flip-start', 'position-area', 'x-end y-start', 'x-start y-end');
+
+test_computed_value('flip-block flip-start', 'position-area', 'x-start y-start', 'x-end y-start');
+test_computed_value('flip-block flip-start', 'position-area', 'x-start y-end', 'x-start y-start');
+test_computed_value('flip-block flip-start', 'position-area', 'x-end y-end', 'x-start y-end');
+test_computed_value('flip-block flip-start', 'position-area', 'x-end y-start', 'x-end y-end');
+
+test_computed_value('flip-inline flip-start', 'position-area', 'x-start y-start', 'x-start y-end');
+test_computed_value('flip-inline flip-start', 'position-area', 'x-start y-end', 'x-end y-end');
+test_computed_value('flip-inline flip-start', 'position-area', 'x-end y-end', 'x-end y-start');
+test_computed_value('flip-inline flip-start', 'position-area', 'x-end y-start', 'x-start y-start');
+
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'x-start y-start', 'x-end y-end');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'x-start y-end', 'x-start y-end');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'x-end y-end', 'x-start y-start');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'x-end y-start', 'x-end y-start');
+
+// Variations:
+test_computed_value('flip-block flip-inline', 'position-area', 'span-x-start span-y-start', 'span-x-end span-y-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'x-self-start y-self-start', 'x-self-end y-self-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'span-x-self-start span-y-self-start', 'span-x-self-end span-y-self-end');
+
+// Logical:
+
+test_computed_value('flip-inline', 'position-area', 'block-start inline-start', 'block-start inline-end');
+test_computed_value('flip-inline', 'position-area', 'block-end inline-start', 'block-end inline-end');
+test_computed_value('flip-inline', 'position-area', 'block-end inline-end', 'block-end inline-start');
+test_computed_value('flip-inline', 'position-area', 'block-start inline-end', 'block-start inline-start');
+
+test_computed_value('flip-block', 'position-area', 'block-start inline-start', 'block-end inline-start');
+test_computed_value('flip-block', 'position-area', 'block-end inline-start', 'block-start inline-start');
+test_computed_value('flip-block', 'position-area', 'block-end inline-end', 'block-start inline-end');
+test_computed_value('flip-block', 'position-area', 'block-start inline-end', 'block-end inline-end');
+
+test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-start', 'block-end inline-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-start', 'block-start inline-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'block-end inline-end', 'block-start inline-start');
+test_computed_value('flip-block flip-inline', 'position-area', 'block-start inline-end', 'block-end inline-start');
+
+test_computed_value('flip-start', 'position-area', 'block-start inline-start', 'block-start inline-start');
+test_computed_value('flip-start', 'position-area', 'block-end inline-start', 'block-start inline-end');
+test_computed_value('flip-start', 'position-area', 'block-end inline-end', 'block-end inline-end');
+test_computed_value('flip-start', 'position-area', 'block-start inline-end', 'block-end inline-start');
+
+test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-start', 'block-start inline-end');
+test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-start', 'block-start inline-start');
+test_computed_value('flip-block flip-start', 'position-area', 'block-end inline-end', 'block-end inline-start');
+test_computed_value('flip-block flip-start', 'position-area', 'block-start inline-end', 'block-end inline-end');
+
+test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-start', 'block-end inline-start');
+test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-start', 'block-end inline-end');
+test_computed_value('flip-inline flip-start', 'position-area', 'block-end inline-end', 'block-start inline-end');
+test_computed_value('flip-inline flip-start', 'position-area', 'block-start inline-end', 'block-start inline-start');
+
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-start', 'block-end inline-end');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-start', 'block-end inline-start');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-end inline-end', 'block-start inline-start');
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'block-start inline-end', 'block-start inline-end');
+
+// Variations:
+test_computed_value('flip-block flip-inline', 'position-area', 'span-block-start span-inline-start', 'span-block-end span-inline-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'self-block-start self-inline-start', 'self-block-end self-inline-end');
+test_computed_value('flip-block flip-inline', 'position-area', 'span-self-block-start span-self-inline-start', 'span-self-block-end span-self-inline-end');
+
+// start/end
+
+test_computed_value('', 'position-area', 'start end', 'start end');
+
+test_computed_value('flip-block', 'position-area', 'start end', 'end');
+
+test_computed_value('flip-inline', 'position-area', 'start end', 'start');
+
+test_computed_value('flip-block flip-inline', 'position-area', 'start end', 'end start');
+
+test_computed_value('flip-start', 'position-area', 'start', 'start');
+test_computed_value('flip-start', 'position-area', 'end', 'end');
+test_computed_value('flip-start', 'position-area', 'start end', 'end start');
+
+test_computed_value('flip-block flip-start', 'position-area', 'start end', 'end');
+
+test_computed_value('flip-inline flip-start', 'position-area', 'start end', 'start');
+
+test_computed_value('flip-block flip-inline flip-start', 'position-area', 'start end', 'start end');
+
+// Variations:
+
+test_computed_value('flip-block flip-inline', 'position-area', 'span-start span-end', 'span-end span-start');
+test_computed_value('flip-block flip-inline', 'position-area', 'self-start self-end', 'self-end self-start');
+test_computed_value('flip-block flip-inline', 'position-area', 'span-self-start span-self-end', 'span-self-end span-self-start');
+
+// center
+test_computed_value('flip-block', 'position-area', 'left center', 'left center');
+test_computed_value('flip-block', 'position-area', 'center top', 'center bottom');
+test_computed_value('flip-block', 'position-area', 'center', 'center');
+test_computed_value('flip-block', 'position-area', 'start center', 'end center');
+test_computed_value('flip-block', 'position-area', 'center start', 'center start');
+test_computed_value('flip-inline', 'position-area', 'center start', 'center end');
+test_computed_value('flip-start', 'position-area', 'center start', 'start center');
+
+// span-all
+test_computed_value('flip-block', 'position-area', 'left span-all', 'left');
+test_computed_value('flip-block', 'position-area', 'span-all top', 'bottom');
+test_computed_value('flip-block', 'position-area', 'span-all', 'span-all');
+test_computed_value('flip-block', 'position-area', 'start span-all', 'end span-all');
+test_computed_value('flip-block', 'position-area', 'span-all start', 'span-all start');
+test_computed_value('flip-inline', 'position-area', 'span-all start', 'span-all end');
+test_computed_value('flip-start', 'position-area', 'span-all start', 'start span-all');
+
+// Span mix:
+test_computed_value('flip-block', 'position-area', 'left span-top', 'left span-bottom');
+test_computed_value('flip-inline', 'position-area', 'left span-top', 'right span-top');
+test_computed_value('flip-start', 'position-area', 'span-block-start inline-end', 'block-end span-inline-start');
+
+// Writing modes:
+test_computed_value('flip-block', 'position-area', 'left top', 'right top', 'ltr', 'vertical-rl');
+
+test_computed_value('', 'position-area', 'x-start y-start', 'x-start y-start', 'rtl');
+test_computed_value('flip-block', 'position-area', 'x-start y-start', 'x-start y-end', 'rtl');
+test_computed_value('flip-inline', 'position-area', 'x-start y-start', 'x-end y-start', 'rtl');
+test_computed_value('flip-block', 'position-area', 'x-end y-start', 'x-start y-start', 'ltr', 'vertical-rl');
+test_computed_value('flip-inline', 'position-area', 'x-end y-start', 'x-end y-end', 'ltr', 'vertical-rl');
+
+test_computed_value('flip-inline', 'position-area', 'start end', 'start', 'rtl');
+test_computed_value('flip-inline', 'position-area', 'start end', 'start', 'ltr', 'vertical-rl');
+test_computed_value('flip-block', 'position-area', 'start end', 'end', 'rtl');
+test_computed_value('flip-block', 'position-area', 'start end', 'end', 'ltr', 'vertical-rl');
+
+</script>