diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js new file mode 100644 index 0000000000..5e8a967c27 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_mutations_shadow.js @@ -0,0 +1,85 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the markup view is correctly updated when elements under a shadow root are +// deleted or updated. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component> + <div slot="slot1" id="el1">slot1-1</div> + <div slot="slot1" id="el2">slot1-2</div> + </test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = \`<div id="slot1-container"> + <slot name="slot1"></slot> + </div> + <div id="another-div"></div>\`; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + + const tree = ` + test-component + #shadow-root + slot1-container + slot + div!slotted + div!slotted + another-div + div + div`; + await assertMarkupViewAsTree(tree, "test-component", inspector); + + info("Delete a shadow dom element and check the updated markup view"); + let mutated = waitForMutation(inspector, "childList"); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { + const shadowRoot = + content.document.querySelector("test-component").shadowRoot; + const slotContainer = shadowRoot.getElementById("slot1-container"); + slotContainer.remove(); + }); + await mutated; + + const treeAfterDelete = ` + test-component + #shadow-root + another-div + div + div`; + await assertMarkupViewAsTree(treeAfterDelete, "test-component", inspector); + + mutated = inspector.once("markupmutation"); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { + const shadowRoot = + content.document.querySelector("test-component").shadowRoot; + const shadowDiv = shadowRoot.getElementById("another-div"); + shadowDiv.setAttribute("random-attribute", "1"); + }); + await mutated; + + info( + "Add an attribute on a shadow dom element and check the updated markup view" + ); + const treeAfterAttrChange = ` + test-component + #shadow-root + random-attribute + div + div`; + await assertMarkupViewAsTree( + treeAfterAttrChange, + "test-component", + inspector + ); +}); |