Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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"
);
}
}