1 files changed, 109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html
new file mode 100644
index 0000000000..d50dd6c857
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
+<link rel=match href="popover-anchor-display-ref.html">
+<link rel=stylesheet href="/fonts/ahem.css">
+<script src="resources/popover-utils.js"></script>
+
+<p>There should be a green box attached to the right side of each orange box.</p>
+
+<!-- Example using the `anchor` implicit reference element -->
+<div class=ex>
+  <div class=anchor id=anchor1></div>
+  <div id=popover1 popover=manual anchor=anchor1 defaultopen></div>
+</div>
+
+<!-- Example with `anchor` attribute but not using it for anchor pos -->
+<div class=ex>
+  <div id=anchor2 class=anchor></div>
+  <div id=popover2 popover=manual anchor defaultopen></div>
+</div>
+
+<!-- Example using `anchor-name` plus inset, and no `anchor` attribute -->
+<div class=ex>
+  <div id=anchor3 class=anchor></div>
+  <div id=popover3 popover=manual defaultopen></div>
+</div>
+
+<!-- Example using implicit anchor reference and inline anchor element -->
+<div class=ex>
+  <span id=anchor4>X</span>
+  <div id=popover4 popover=manual anchor=anchor4 defaultopen></div>
+</div>
+
+<!-- Example using an implicit anchor which is not the default anchor -->
+<div class=ex>
+  <div class=anchor id=anchor5></div>
+  <div id=popover5 popover=manual anchor=anchor5 defaultopen></div>
+</div>
+
+<!-- Example using a default anchor which is not the implicit anchor -->
+<div class=ex>
+  <div class=anchor id=anchor6></div>
+  <div id=popover6 popover=manual anchor=anchor1 defaultopen></div>
+</div>
+
+<script>
+showDefaultopenPopoversOnLoad();
+</script>
+
+<style>
+  .ex {
+    margin: 15px;
+  }
+  .ex div {
+    width: 50px;
+    height: 50px;
+  }
+  .anchor {
+    background: orange;
+  }
+  [popover] {
+    background: lime;
+    padding:0;
+    border:0;
+  }
+  #popover1 {
+    left: anchor(right);
+    top: anchor(top);
+  }
+  #anchor2 {
+    anchor-name: --anchor2;
+  }
+  #popover2 {
+    left: anchor(--anchor2 right);
+    top: anchor(--anchor2 top);
+  }
+  #anchor3 {
+    anchor-name: --anchor3;
+  }
+  #popover3 {
+    inset:auto;
+    left: anchor(--anchor3 right);
+    top: anchor(--anchor3 top);
+  }
+  #anchor4 {
+    font-family: Ahem;
+    font-size: 50px;
+    color: orange;
+  }
+  #popover4 {
+    left: anchor(right);
+    top: anchor(top);
+  }
+  #popover5 {
+    anchor-default: --anchor1; /* shouldn't be used */
+    left: anchor(implicit right);
+    top: anchor(implicit top);
+  }
+  #anchor6 {
+    anchor-name: --anchor6;
+  }
+  #popover6 {
+    anchor-default: --anchor6;
+    left: anchor(right); /* shouldn't use the implicit anchor */
+    top: anchor(top);
+  }
+</style>