1 files changed, 117 insertions, 0 deletions
diff --git a/devtools/server/tests/browser/inspector-shadow.html b/devtools/server/tests/browser/inspector-shadow.html
new file mode 100644
index 0000000000..eb600548e2
--- /dev/null
+++ b/devtools/server/tests/browser/inspector-shadow.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Inspector (empty page)</title>
+  <script>
+  "use strict";
+
+  window.onload = function() {
+    customElements.define("test-empty", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "open"});
+      }
+    });
+
+    customElements.define("test-empty-closed", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "closed"});
+      }
+    });
+
+    customElements.define("test-children", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "open"});
+        this.shadowRoot.innerHTML = `
+          <h1>One child</h1>
+          <p>A second child</p>`;
+      }
+    });
+
+    customElements.define("test-named-slot", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "open"});
+        this.shadowRoot.innerHTML = `
+          <h1>With slot</h1>
+          <slot name="slot1"></slot>`;
+      }
+    });
+
+    customElements.define("test-slot", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({mode: "open"});
+        this.shadowRoot.innerHTML = `
+        <style>
+          slot::before { content: "[SLOT BEFORE]"; color: red; }
+          slot::after { content: "[SLOT AFTER]"; color: blue; }
+        </style>
+        <slot></slot>`;
+      }
+    });
+
+    customElements.define("test-simple-slot", class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open"});
+        this.shadowRoot.innerHTML = "<slot></slot>";
+      }
+    });
+  };
+  </script>
+  <style>
+    #host-pseudo::before { content: "[HOST BEFORE]"; color: red; }
+    #host-pseudo::after { content: "[HOST AFTER]"; color: blue; }
+  </style>
+</head>
+<body>
+  <test-empty id="empty"></test-empty>
+
+  <hr>
+
+  <test-empty id="one-child">
+    <h1>One child</h1>
+  </test-empty>
+
+  <hr>
+
+  <test-children id="shadow-children"></test-children>
+
+  <hr>
+
+  <test-named-slot id="named-slot">
+    <p class="slotted" slot="slot1">Slotted</p>
+  </test-named-slot>
+
+  <hr>
+
+  <test-slot id="slot-pseudo">
+    <span class="has-before">Slotted</span>
+  </test-slot>
+
+  <hr>
+
+  <test-empty id="host-pseudo"></test-empty>
+
+  <hr>
+
+  <test-empty id="mode-open"></test-empty>
+  <test-empty-closed id="mode-closed"></test-empty-closed>
+
+  <hr>
+
+  <test-simple-slot id="slot-inline-text">
+    Lorem ipsum
+  </test-simple-slot>
+
+  <hr>
+  <video id="video-controls" controls></video>
+  <video id="video-controls-with-children" controls>
+    <div>some content</div>
+  </video>
+</body>
+</html>