diff --git a/css/css-anchor-position/anchored-transition-display-none-ref.html b/css/css-anchor-position/anchored-transition-display-none-001-ref.html
similarity index 100%
rename from css/css-anchor-position/anchored-transition-display-none-ref.html
rename to css/css-anchor-position/anchored-transition-display-none-001-ref.html
diff --git a/css/css-anchor-position/anchored-transition-display-none.html b/css/css-anchor-position/anchored-transition-display-none-001.html
similarity index 88%
rename from css/css-anchor-position/anchored-transition-display-none.html
rename to css/css-anchor-position/anchored-transition-display-none-001.html
index 8628d5311f08f6..0ff9eb3b370416 100644
--- a/css/css-anchor-position/anchored-transition-display-none.html
+++ b/css/css-anchor-position/anchored-transition-display-none-001.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html id=html class="reftest-wait">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1">
-<link rel="match" href="anchored-transition-display-none-ref.html">
+<link rel="match" href="anchored-transition-display-none-001-ref.html">
 This is visible.
 <div>FAIL if this is visible</div>
 
diff --git a/css/css-anchor-position/anchored-transition-display-none-002-ref.html b/css/css-anchor-position/anchored-transition-display-none-002-ref.html
new file mode 100644
index 00000000000000..4fb6257019d358
--- /dev/null
+++ b/css/css-anchor-position/anchored-transition-display-none-002-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+<style>
+  #containing-block {
+    width: 300px;
+    height: 300px;
+    position: relative;
+    outline: 1px black solid;
+  }
+
+  #anchor {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+    background: cyan;
+  }
+
+  .anchored {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+  }
+
+  #anchored-anchor-function {
+    top: 200px;
+    left: 100px;
+    background: green;
+  }
+
+  #anchored-position-area {
+    top: 0px;
+    left: 100px;
+    background: blue;
+  }
+</style>
+
+<div id="containing-block">
+  <div id="anchor"></div>
+  <div class="anchored" id="anchored-anchor-function"></div>
+  <div class="anchored" id="anchored-position-area"></div>
+</div>
\ No newline at end of file
diff --git a/css/css-anchor-position/anchored-transition-display-none-002.html b/css/css-anchor-position/anchored-transition-display-none-002.html
new file mode 100644
index 00000000000000..5589754df7d775
--- /dev/null
+++ b/css/css-anchor-position/anchored-transition-display-none-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+<html class="reftest-wait">
+
+<title>When anchor-positioned elements transition from display: block to none, it should keep its position until transition end</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1">
+<link rel="author" href="mailto:kiet.ho@apple.com">
+<link rel="match" href="anchored-transition-display-none-002-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+
+<style>
+  #containing-block {
+    width: 300px;
+    height: 300px;
+    position: relative;
+    outline: 1px black solid;
+  }
+
+  #anchor {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+    background: cyan;
+    anchor-name: --anchor;
+  }
+
+  .anchored {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    transition: display 99999s allow-discrete;
+  }
+
+  #anchored-anchor-function {
+    top: anchor(--anchor bottom);
+    left: anchor(--anchor right);
+    background: green;
+  }
+
+  #anchored-position-area {
+    position-anchor: --anchor;
+    position-area: top right;
+    background: blue;
+  }
+</style>
+
+<body onload="onLoad()">
+  <div id="containing-block">
+    <div id="anchor"></div>
+    <div class="anchored" id="anchored-anchor-function"></div>
+    <div class="anchored" id="anchored-position-area"></div>
+  </div>
+
+  <script>
+    function onLoad() {
+      document.getElementById("anchored-anchor-function").style.display = "none";
+      document.getElementById("anchored-position-area").style.display = "none";
+
+      waitForAtLeastOneFrame().then(takeScreenshot);
+    }
+  </script>
+</body>
+
+</html>
