Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 117 insertions, 0 deletions

diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
new file mode 100644
index 0000000000..4462671354
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(1);
+
+// Test a few static pages using webcomponents with ::marker and ::before
+// pseudos and check that they are displayed as expected in the markup view.
+
+const TEST_DATA = [
+  {
+    // Test that ::before on an empty shadow host is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item; }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        'use strict';
+        customElements.define('test-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+        ::marker
+        ::before`,
+  },
+  {
+    // Test ::before on a shadow host with content is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, non-empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component>
+        <div class="light-dom"></div>
+      </test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "<slot>default content</slot>";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          slot
+            div!slotted
+            default content
+        ::marker
+        ::before
+        class="light-dom"`,
+  },
+  {
+    // Test just ::marker on a shadow host
+    title: "just ::marker, no ::before",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+        ::marker`,
+  },
+];
+
+for (const { url, tree, title } of TEST_DATA) {
+  // Test each configuration in both open and closed modes
+  add_task(async function () {
+    info(`Testing: [${title}] in OPEN mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "open")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+  add_task(async function () {
+    info(`Testing: [${title}] in CLOSED mode`);
+    const { inspector, tab } = await openInspectorForURL(
+      url.replace(/#MODE#/g, "closed")
+    );
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+}