diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js new file mode 100644 index 0000000000..c8f6d029cb --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_slotupdate.js @@ -0,0 +1,68 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that slotted elements are correctly updated when the slot attribute is modified +// on already slotted elements. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component> + <div slot="slot1">slot1-1</div> + <div slot="slot1">slot1-2</div> + <div slot="slot2" id="to-update">slot2-1</div> + <div slot="slot2">slot2-2</div> + </test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<slot name="slot1"></slot><slot name="slot2"></slot>'; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + + const tree = ` + test-component + #shadow-root + name="slot1" + div!slotted + div!slotted + name="slot2" + div!slotted + div!slotted + slot1-1 + slot1-2 + slot2-1 + slot2-2`; + await assertMarkupViewAsTree(tree, "test-component", inspector); + + info("Listening for the markupmutation event"); + const mutated = inspector.once("markupmutation"); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { + content.document.getElementById("to-update").setAttribute("slot", "slot1"); + }); + await mutated; + + // After mutation we expect slot1 to have one more slotted node, and slot2 one less. + const mutatedTree = ` + test-component + #shadow-root + name="slot1" + div!slotted + div!slotted + div!slotted + name="slot2" + div!slotted + slot1-1 + slot1-2 + slot2-1 + slot2-2`; + await assertMarkupViewAsTree(mutatedTree, "test-component", inspector); +}); |