1 files changed, 18 insertions, 2 deletions
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html
index 8e077e220b..88611d6633 100644
--- a/devtools/client/inspector/rules/test/doc_pseudoelement.html
+++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html
@@ -110,7 +110,11 @@ p:first-letter {
     color: purple;
 }
 
-dialog::backdrop {
+:is(
+    dialog,
+    [popover],
+    :fullscreen,
+)::backdrop {
     background-color: transparent;
 }
 
@@ -142,6 +146,10 @@ input::slider-thumb {
 input::slider-track {
     background: seagreen;
 }
+
+.url-fragment-text-directives::target-text {
+    background-color: salmon;
+}
     </style>
   </head>
   <body>
@@ -167,7 +175,10 @@ input::slider-track {
         <li id="list" class="box">List element</li>
     </ol>
 
-    <dialog>In dialog</dialog>
+    <dialog>
+        In dialog
+        <div id="in-dialog" popover>hello</div>
+    </dialog>
 
     <label>Range <input type="range" class="slider"></label>
     <label>Not range <input type="text" class="slider"></label>
@@ -177,10 +188,15 @@ input::slider-track {
         You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
     </section>
 
+    <section class="url-fragment-text-directives">May the fox be with you</section>
+
+    <canvas></canvas>
+
     <script>
         "use strict";
         // This is the only way to have the ::backdrop style to be applied
         document.querySelector("dialog").showModal()
+        document.querySelector("#in-dialog").showPopover()
 
         // Register highlights for ::highlight pseudo elements
         const highlightsContainer = document.querySelector(".highlights-container");