diff --git a/css/css-anchor-position/inset-area-abs-inline-container.html b/css/css-anchor-position/inset-area-abs-inline-container.html
new file mode 100644
index 00000000000000..368a227d731730
--- /dev/null
+++ b/css/css-anchor-position/inset-area-abs-inline-container.html
@@ -0,0 +1,38 @@
+<!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">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+  #in-flow {
+    font-family: Ahem;
+    font-size: 100px;
+    color: orange;
+  }
+  #inline-container {
+    position: absolute;
+  }
+  #anchor {
+    position: absolute;
+    top: 25px;
+    left: 100px;
+    width: 200px;
+    height: 50px;
+    anchor-name: --anchor;
+    background-color: cyan;
+  }
+  .anchored {
+    position: absolute;
+    anchor-default: --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; }
+</style>
+<div id="in-flow">
+  <br>
+  <br>
+  &nbsp;&nbsp;<span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span>
+</div>
diff --git a/css/css-anchor-position/inset-area-inline-container-ref.html b/css/css-anchor-position/inset-area-inline-container-ref.html
new file mode 100644
index 00000000000000..ecf54f1a9ac2d7
--- /dev/null
+++ b/css/css-anchor-position/inset-area-inline-container-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<div style="position:relative">
+  <!-- The Ahem 'XXXX' text: -->
+  <div style="position:absolute; background-color:orange; left:200px; top:200px; width:400px; height:100px"></div>
+  <!-- The #anchor -->
+  <div style="position:absolute; background-color:cyan; left:300px; top:225px; width:200px; height:50px"></div>
+  <!-- top / left -->
+  <div style="position:absolute; background-color:blue; left:200px; top:200px; width:100px; height:25px"></div>
+  <!-- top / right -->
+  <div style="position:absolute; background-color:blue; left:500px; top:200px; width:100px; height:25px"></div>
+  <!-- bottom / left -->
+  <div style="position:absolute; background-color:blue; left:200px; top:275px; width:100px; height:25px"></div>
+  <!-- bottom / right -->
+  <div style="position:absolute; background-color:blue; left:500px; top:275px; width:100px; height:25px"></div>
+</div>
diff --git a/css/css-anchor-position/inset-area-inline-container.html b/css/css-anchor-position/inset-area-inline-container.html
new file mode 100644
index 00000000000000..91c9b09735118e
--- /dev/null
+++ b/css/css-anchor-position/inset-area-inline-container.html
@@ -0,0 +1,38 @@
+<!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">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+  #in-flow {
+    font-family: Ahem;
+    font-size: 100px;
+    color: orange;
+  }
+  #inline-container {
+    position: relative;
+  }
+  #anchor {
+    position: absolute;
+    top: 25px;
+    left: 100px;
+    width: 200px;
+    height: 50px;
+    anchor-name: --anchor;
+    background-color: cyan;
+  }
+  .anchored {
+    position: absolute;
+    anchor-default: --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; }
+</style>
+<div id="in-flow">
+  <br>
+  <br>
+  &nbsp;&nbsp;<span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span>
+</div>
