1 files changed, 63 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
new file mode 100644
index 0000000000..b025bcda2f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
@@ -0,0 +1,63 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="auto-html-class-1 auto-html-class-2 auto-bold">
+<head>
+  <title>Class panel autocomplete test</title>
+
+  <link href="./doc_class_panel_autocomplete_stylesheet.css" rel="stylesheet" type="text/css">
+  <style>
+    .auto-inline-class-1 {
+      padding: 1em;
+    }
+    .auto-inline-class-2 {
+      padding: 2em;
+    }
+    .auto-inline-class-3 {
+      padding: 3em;
+    }
+
+    .auto-inline-class-1,
+    div.auto-inline-class-2,
+    p:first-of-type.auto-inline-class-3,
+    .auto-inline-class-4 {
+      background-color: blue;
+    }
+
+    :root .auto-bold .auto-inline-class-5 {
+      font-size: 1em;
+
+      & .auto-inline-nested-class-1,
+      &:is(.auto-inline-nested-class-2),
+      &:has(.auto-inline-nested-class-3) {
+        font-weight: bold;
+      }
+    }
+
+    @media (min-width: 1000px) {
+      .auto-inline-nested-class-4 {
+        color: black;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .auto-inline-nested-class-5 {
+          color: white;
+
+          &.auto-inline-nested-class-6 {
+            outline: 1px solid;
+          }
+        }
+      }
+    }
+  </style>
+  <script defer>
+    "use strict";
+      const x = document.styleSheets[0];
+      x.insertRule(".auto-cssom-primary-color { color: tomato; }", 1);
+  </script>
+</head>
+<body class="auto-body-class-1 auto-body-class-2 auto-bold">
+  <div id="auto-div-id-1" class="auto-div-class-1 auto-div-class-2 auto-bold"> the ocean </div>
+  <div id="auto-div-id-2" class="auto-div-class-1 auto-div-class-2 auto-bold"> roaring </div>
+  <div id="auto-div-id-3"> ahead </div>
+</body>
+</html>