diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js new file mode 100644 index 0000000000..4c4a9c2e90 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_noslot.js @@ -0,0 +1,107 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the markup view is correctly displayed when a component has children but no +// slots are available under the shadow root. + +const TEST_URL = `data:text/html;charset=utf-8, + <style> + .has-before::before { content: "before-content" } + </style> + + <div class="root"> + <no-slot-component> + <div class="not-nested">light</div> + <div class="nested"> + <div class="has-before"></div> + <div>dummy for Bug 1441863</div> + </div> + </no-slot-component> + <slot-component> + <div class="not-nested">light</div> + <div class="nested"> + <div class="has-before"></div> + </div> + </slot-component> + </div> + + <script> + 'use strict'; + customElements.define('no-slot-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<div class="no-slot-div"></div>'; + } + }); + customElements.define('slot-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<slot></slot>'; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + + // We expect that host children are correctly displayed when no slots are defined. + const beforeTree = ` + class="root" + no-slot-component + #shadow-root + no-slot-div + class="not-nested" + class="nested" + class="has-before" + dummy for Bug 1441863 + slot-component + #shadow-root + slot + div!slotted + div!slotted + class="not-nested" + class="nested" + class="has-before" + ::before`; + await assertMarkupViewAsTree(beforeTree, ".root", inspector); + + info( + "Move the non-slotted element with class has-before and check the pseudo appears" + ); + const mutated = waitForNMutations(inspector, "childList", 3); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { + const root = content.document.querySelector(".root"); + const hasBeforeEl = content.document.querySelector( + "no-slot-component .has-before" + ); + root.appendChild(hasBeforeEl); + }); + await mutated; + + // As the non-slotted has-before is moved into the tree, the before pseudo is expected + // to appear. + const afterTree = ` + class="root" + no-slot-component + #shadow-root + no-slot-div + class="not-nested" + class="nested" + dummy for Bug 1441863 + slot-component + #shadow-root + slot + div!slotted + div!slotted + class="not-nested" + class="nested" + class="has-before" + ::before + class="has-before" + ::before`; + await assertMarkupViewAsTree(afterTree, ".root", inspector); +}); |