diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js new file mode 100644 index 0000000000..ee7fde1584 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_nested_pick_inspect.js @@ -0,0 +1,132 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the markup view is correctly expanded when inspecting an element nested +// in several shadow roots: +// - when using the context-menu "Inspect element" +// - when using the element picker + +const TEST_URL = + `data:text/html;charset=utf-8,` + + encodeURIComponent(` + <test-outer></test-outer> + <script> + (function() { + 'use strict'; + + function defineComponent(name, html) { + customElements.define(name, class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = html; + } + }); + } + + defineComponent('test-outer', \` + <test-inner> + <test-image></test-image> + </test-inner>\`); + + defineComponent('test-inner', \` + <div> + <div> + <div> + <slot></slot> + </div> + </div> + </div>\`); + + defineComponent('test-image', + \`<div style="display:block; height: 200px; width: 100%; background:red"></div>\`); + })(); + </script>`); + +add_task(async function () { + const { inspector, toolbox } = await openInspectorForURL(TEST_URL); + + info("Waiting for element picker to become active"); + await startPicker(toolbox); + info("Click and pick the pick-target"); + await pickElement(inspector, "test-outer", 10, 10); + info("Check that the markup view is displayed as expected"); + await assertMarkupView(inspector); + + info("Close DevTools before testing Inspect Element"); + await toolbox.destroy(); + + info("Click on Inspect Element for our test-image <div>"); + // Note: we click on test-outer, because we can't find the <div> using a simple + // querySelector. However the click is simulated in the middle of the <test-outer> + // component, and will always hit the test <div> which takes all the space. + const newInspector = await clickOnInspectMenuItem("test-outer"); + info("Check again that the markup view is displayed as expected"); + await assertMarkupView(newInspector); +}); + +async function assertMarkupView(inspector) { + const outerFront = await getNodeFront("test-outer", inspector); + const outerContainer = inspector.markup.getContainer(outerFront); + assertContainer(outerContainer, { + expanded: true, + text: "test-outer", + children: 1, + }); + + const outerShadowContainer = outerContainer.getChildContainers()[0]; + assertContainer(outerShadowContainer, { + expanded: true, + text: "#shadow-root", + children: 1, + }); + + const innerContainer = outerShadowContainer.getChildContainers()[0]; + assertContainer(innerContainer, { + expanded: true, + text: "test-inner", + children: 2, + }); + + const innerShadowContainer = innerContainer.getChildContainers()[0]; + const imageContainer = innerContainer.getChildContainers()[1]; + assertContainer(innerShadowContainer, { + expanded: false, + text: "#shadow-root", + }); + assertContainer(imageContainer, { + expanded: true, + text: "test-image", + children: 1, + }); + + const imageShadowContainer = imageContainer.getChildContainers()[0]; + assertContainer(imageShadowContainer, { + expanded: true, + text: "#shadow-root", + children: 1, + }); + + const redDivContainer = imageShadowContainer.getChildContainers()[0]; + assertContainer(redDivContainer, { expanded: false, text: "div" }); + is(redDivContainer.selected, true, "Div element is selected as expected"); +} + +/** + * Check if the provided markup container is expanded, has the expected text and the + * expected number of children. + */ +function assertContainer(container, { expanded, text, children }) { + is(container.expanded, expanded, "Container is expanded"); + assertContainerHasText(container, text); + if (expanded) { + const childContainers = container.getChildContainers(); + is( + childContainers.length, + children, + "Container has expected number of children" + ); + } +} |