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_navigation.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 'devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js new file mode 100644 index 0000000000..ece16815ad --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_navigation.js @@ -0,0 +1,97 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the markup-view navigation works correctly with shadow dom slotted nodes. +// Each slotted nodes has two containers representing the same node front in the markup +// view, we need to make sure that navigating to the slotted version selects the slotted +// container, and navigating to the non-slotted element selects the non-slotted container. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component class="test-component"> + <div slot="slot1" class="slotted1"><div class="slot1-child">slot1-1</div></div> + <div slot="slot1" class="slotted2">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 = '<slot class="slot1" name="slot1"></slot>'; + } + }); + </script>`; + +const TEST_DATA = [ + ["KEY_PageUp", "html"], + ["KEY_ArrowDown", "head"], + ["KEY_ArrowDown", "body"], + ["KEY_ArrowDown", "test-component"], + ["KEY_ArrowRight", "test-component"], + ["KEY_ArrowDown", "shadow-root"], + ["KEY_ArrowRight", "shadow-root"], + ["KEY_ArrowDown", "slot1"], + ["KEY_ArrowRight", "slot1"], + ["KEY_ArrowDown", "div", "slotted1"], + ["KEY_ArrowDown", "div", "slotted2"], + ["KEY_ArrowDown", "slotted1"], + ["KEY_ArrowRight", "slotted1"], + ["KEY_ArrowDown", "slot1-child"], + ["KEY_ArrowDown", "slotted2"], +]; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + + info("Making sure the markup-view frame is focused"); + inspector.markup._frame.focus(); + + info("Starting to iterate through the test data"); + for (const [key, expected, slottedClassName] of TEST_DATA) { + info("Testing step: " + key + " to navigate to " + expected); + EventUtils.synthesizeKey(key); + + info("Making sure markup-view children get updated"); + await waitForChildrenUpdated(inspector); + + info("Checking the right node is selected"); + checkSelectedNode(key, expected, slottedClassName, inspector); + } + + // Same as in browser_markup_navigation.js, use a single catch-call event listener. + await inspector.once("inspector-updated"); +}); + +function checkSelectedNode(key, expected, slottedClassName, inspector) { + const selectedContainer = inspector.markup.getSelectedContainer(); + const slotted = !!slottedClassName; + + is( + selectedContainer.isSlotted(), + slotted, + `Selected container is ${slotted ? "slotted" : "not slotted"} as expected` + ); + is( + inspector.selection.isSlotted(), + slotted, + `Inspector selection is also ${slotted ? "slotted" : "not slotted"}` + ); + ok( + selectedContainer.elt.textContent.includes(expected), + "Found expected content: " + + expected + + " in container after pressing " + + key + ); + + if (slotted) { + is( + selectedContainer.node.className, + slottedClassName, + "Slotted has the expected classname " + slottedClassName + ); + } +} |