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 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
);
}
}