diff options
Diffstat (limited to 'devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js | 117 |
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); + }); +} |