diff --git a/html/semantics/popovers/popover-anchor-change-display-ref.tentative.html b/html/semantics/popovers/popover-anchor-change-display-ref.tentative.html
new file mode 100644
index 00000000000000..9530e7d3c4b98d
--- /dev/null
+++ b/html/semantics/popovers/popover-anchor-change-display-ref.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<p>There should be a green box attached to the right side of each orange box.</p>
+<div class=ex><div class=anchor></div><div class=popover></div></div>
+<div class=ex><div class=anchor></div><div class=popover></div></div>
+
+<style>
+  .ex {
+    margin: 25px;
+    font-size: 0;
+  }
+  .ex div {
+    display:inline-block;
+    width: 100px;
+    height: 100px;
+  }
+  .anchor {
+    background: orange;
+  }
+  .popover {
+    background: lime;
+  }
+</style>
diff --git a/html/semantics/popovers/popover-anchor-change-display.tentative.html b/html/semantics/popovers/popover-anchor-change-display.tentative.html
new file mode 100644
index 00000000000000..a10331b2ae9393
--- /dev/null
+++ b/html/semantics/popovers/popover-anchor-change-display.tentative.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=author href="mailto:xiaochengh@chromium.org">
+<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<link rel=match href="popover-anchor-change-display-ref.tentative.html">
+<script src="resources/popover-utils.js"></script>
+
+<p>There should be a green box attached to the right side of each orange box.</p>
+
+<div class=ex>
+  <div class=anchor id=anchor1></div>
+  <div id=popover1 popover=manual defaultopen></div>
+</div>
+
+<div class=ex>
+  <div class=anchor id=will-be-anchor2></div>
+  <div id=popover2 popover=manual anchor=anchor2 defaultopen></div>
+</div>
+
+<script>
+showDefaultopenPopoversOnLoad();
+
+function runTest() {
+  document.body.offsetLeft; // Force layout
+
+  document.getElementById('popover1').setAttribute('anchor', 'anchor1');
+  document.getElementById('will-be-anchor2').setAttribute('id', 'anchor2');
+}
+window.addEventListener('load', runTest);
+</script>
+
+<style>
+  .ex {
+    margin: 25px;
+  }
+  .ex div {
+    width: 100px;
+    height: 100px;
+  }
+  .anchor {
+    background: orange;
+  }
+  [popover] {
+    background: lime;
+    padding:0;
+    border:0;
+    left: anchor(right);
+    top: anchor(top);
+  }
+</style>
diff --git a/html/semantics/popovers/popover-anchor-display.tentative.html b/html/semantics/popovers/popover-anchor-display.tentative.html
index 103bc9849fdbd6..b7079279edab6b 100644
--- a/html/semantics/popovers/popover-anchor-display.tentative.html
+++ b/html/semantics/popovers/popover-anchor-display.tentative.html
@@ -10,7 +10,7 @@
 <!-- Example using the `anchor` implicit reference element -->
 <div class=ex>
   <div class=anchor id=anchor1></div>
-  <div popover=manual anchor=anchor1 defaultopen></div>
+  <div id=popover1 popover=manual anchor=anchor1 defaultopen></div>
 </div>
 
 <!-- Example with `anchor` attribute but not using it for anchor pos -->
