зеркало из https://github.com/mozilla/gecko-dev.git
232 строки
7.3 KiB
JavaScript
232 строки
7.3 KiB
JavaScript
"use strict";
|
|
|
|
const URL = MAIN_DOMAIN + "inspector-shadow.html";
|
|
|
|
add_task(async function() {
|
|
info("Test that a shadow host has a shadow root");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#empty");
|
|
const children = await walker.children(el);
|
|
|
|
is(el.displayName, "test-empty", "#empty exists");
|
|
ok(el.isShadowHost, "#empty is a shadow host");
|
|
|
|
const shadowRoot = children.nodes[0];
|
|
ok(shadowRoot.isShadowRoot, "#empty has a shadow-root child");
|
|
is(children.nodes.length, 1, "#empty has no other children");
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test that a shadow host has its children too");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#one-child");
|
|
const children = await walker.children(el);
|
|
|
|
is(
|
|
children.nodes.length,
|
|
2,
|
|
"#one-child has two children " + "(shadow root + another child)"
|
|
);
|
|
ok(children.nodes[0].isShadowRoot, "First child is a shadow-root");
|
|
is(children.nodes[1].displayName, "h1", "Second child is <h1>");
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test that shadow-root has its children");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#shadow-children");
|
|
ok(el.isShadowHost, "#shadow-children is a shadow host");
|
|
|
|
const children = await walker.children(el);
|
|
ok(
|
|
children.nodes.length === 1 && children.nodes[0].isShadowRoot,
|
|
"#shadow-children has only one child and it's a shadow-root"
|
|
);
|
|
|
|
const shadowRoot = children.nodes[0];
|
|
const shadowChildren = await walker.children(shadowRoot);
|
|
is(shadowChildren.nodes.length, 2, "shadow-root has two children");
|
|
is(shadowChildren.nodes[0].displayName, "h1", "First child is <h1>");
|
|
is(shadowChildren.nodes[1].displayName, "p", "Second child is <p>");
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test that shadow root has its children and slotted nodes");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#named-slot");
|
|
ok(el.isShadowHost, "#named-slot is a shadow host");
|
|
|
|
const children = await walker.children(el);
|
|
is(children.nodes.length, 2, "#named-slot has two children");
|
|
const shadowRoot = children.nodes[0];
|
|
ok(shadowRoot.isShadowRoot, "#named-slot has a shadow-root child");
|
|
|
|
const slotted = children.nodes[1];
|
|
is(
|
|
slotted.getAttribute("slot"),
|
|
"slot1",
|
|
"#named-slot as a child that is slotted"
|
|
);
|
|
|
|
const shadowChildren = await walker.children(shadowRoot);
|
|
is(
|
|
shadowChildren.nodes[0].displayName,
|
|
"h1",
|
|
"shadow-root first child is a regular <h1> tag"
|
|
);
|
|
is(
|
|
shadowChildren.nodes[1].displayName,
|
|
"slot",
|
|
"shadow-root second child is a slot"
|
|
);
|
|
|
|
const slottedChildren = await walker.children(shadowChildren.nodes[1]);
|
|
is(
|
|
slottedChildren.nodes[0],
|
|
slotted,
|
|
"The slot has the slotted node as a child"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test pseudoelements in shadow host");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#host-pseudo");
|
|
const children = await walker.children(el);
|
|
|
|
ok(children.nodes[0].isShadowRoot, "#host-pseudo 1st child is a shadow root");
|
|
ok(
|
|
children.nodes[1].isBeforePseudoElement,
|
|
"#host-pseudo 2nd child is ::before"
|
|
);
|
|
ok(
|
|
children.nodes[2].isAfterPseudoElement,
|
|
"#host-pseudo 3rd child is ::after"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test pseudoelements in slotted nodes");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#slot-pseudo");
|
|
const shadowRoot = (await walker.children(el)).nodes[0];
|
|
ok(shadowRoot.isShadowRoot, "#slot-pseudo has a shadow-root child");
|
|
|
|
const shadowChildren = await walker.children(shadowRoot);
|
|
is(shadowChildren.nodes[1].displayName, "slot", "shadow-root has a slot");
|
|
|
|
const slottedChildren = await walker.children(shadowChildren.nodes[1]);
|
|
ok(slottedChildren.nodes[0].isBeforePseudoElement, "slot has ::before");
|
|
ok(
|
|
slottedChildren.nodes[slottedChildren.nodes.length - 1]
|
|
.isAfterPseudoElement,
|
|
"slot has ::after"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test open/closed modes in shadow roots");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const openEl = await walker.querySelector(walker.rootNode, "#mode-open");
|
|
const openShadowRoot = (await walker.children(openEl)).nodes[0];
|
|
const closedEl = await walker.querySelector(walker.rootNode, "#mode-closed");
|
|
const closedShadowRoot = (await walker.children(closedEl)).nodes[0];
|
|
|
|
is(
|
|
openShadowRoot.shadowRootMode,
|
|
"open",
|
|
"#mode-open has a shadow root with open mode"
|
|
);
|
|
is(
|
|
closedShadowRoot.shadowRootMode,
|
|
"closed",
|
|
"#mode-closed has a shadow root with closed mode"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test that slotted inline text nodes appear in the Shadow DOM tree");
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
const el = await walker.querySelector(walker.rootNode, "#slot-inline-text");
|
|
const hostChildren = await walker.children(el);
|
|
const originalSlot = hostChildren.nodes[1];
|
|
is(
|
|
originalSlot.displayName,
|
|
"#text",
|
|
"Shadow host as a text node to be slotted"
|
|
);
|
|
|
|
const shadowRoot = hostChildren.nodes[0];
|
|
const shadowChildren = await walker.children(shadowRoot);
|
|
const slot = shadowChildren.nodes[0];
|
|
is(slot.displayName, "slot", "shadow-root has a slot child");
|
|
ok(!slot._form.inlineTextChild, "Slotted node is not an inline text");
|
|
|
|
const slotChildren = await walker.children(slot);
|
|
const slotted = slotChildren.nodes[0];
|
|
is(slotted.displayName, "#text", "Slotted node is a text node");
|
|
is(
|
|
slotted._form.nodeValue,
|
|
originalSlot._form.nodeValue,
|
|
"Slotted content is the same as original's"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test UA widgets when showAllAnonymousContent is true");
|
|
await SpecialPowers.pushPrefEnv({
|
|
set: [["devtools.inspector.showAllAnonymousContent", true]],
|
|
});
|
|
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
let el = await walker.querySelector(walker.rootNode, "#video-controls");
|
|
let hostChildren = await walker.children(el);
|
|
is(hostChildren.nodes.length, 3, "#video-controls tag has 3 children");
|
|
const shadowRoot = hostChildren.nodes[0];
|
|
ok(shadowRoot.isShadowRoot, "#video-controls has a shadow-root child");
|
|
|
|
el = await walker.querySelector(
|
|
walker.rootNode,
|
|
"#video-controls-with-children"
|
|
);
|
|
hostChildren = await walker.children(el);
|
|
is(
|
|
hostChildren.nodes.length,
|
|
4,
|
|
"#video-controls-with-children has 4 children"
|
|
);
|
|
});
|
|
|
|
add_task(async function() {
|
|
info("Test UA widgets when showAllAnonymousContent is false");
|
|
await SpecialPowers.pushPrefEnv({
|
|
set: [["devtools.inspector.showAllAnonymousContent", false]],
|
|
});
|
|
|
|
const { walker } = await initInspectorFront(URL);
|
|
|
|
let el = await walker.querySelector(walker.rootNode, "#video-controls");
|
|
let hostChildren = await walker.children(el);
|
|
is(hostChildren.nodes.length, 0, "#video-controls tag has no children");
|
|
|
|
el = await walker.querySelector(
|
|
walker.rootNode,
|
|
"#video-controls-with-children"
|
|
);
|
|
hostChildren = await walker.children(el);
|
|
is(
|
|
hostChildren.nodes.length,
|
|
1,
|
|
"#video-controls-with-children has one child"
|
|
);
|
|
});
|