Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that keyboard and mouse navigation updates aria-active and focus
// of elements.
const TEST_URI = `
<style>
div { position: absolute; top: 42px; left: 42px;
height: 100.111px; width: 100px; border: 10px solid black;
padding: 20px; margin: 30px auto;}
</style><div></div>
`;
add_task(async function () {
await addTab("data:text/html," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel } = await openLayoutView();
await selectNode("div", inspector);
await testInitialFocus(inspector, boxmodel);
await testChangingLevels(inspector, boxmodel);
await testTabbingThroughItems(inspector, boxmodel);
await testChangingLevelsByClicking(inspector, boxmodel);
});
function testInitialFocus(inspector, boxmodel) {
info("Test that the focus is(on margin layout.");
const doc = boxmodel.document;
const container = doc.querySelector(".boxmodel-container");
container.focus();
EventUtils.synthesizeKey("KEY_Enter");
is(
container.dataset.activeDescendantClassName,
"boxmodel-main devtools-monospace",
"Should be set to the position layout."
);
}
function testChangingLevels(inspector, boxmodel) {
info("Test that using arrow keys updates level.");
const doc = boxmodel.document;
const container = doc.querySelector(".boxmodel-container");
container.focus();
EventUtils.synthesizeKey("KEY_Enter");
EventUtils.synthesizeKey("KEY_Escape");
EventUtils.synthesizeKey("KEY_ArrowDown");
is(
container.dataset.activeDescendantClassName,
"boxmodel-margins",
"Should be set to the margin layout."
);
EventUtils.synthesizeKey("KEY_ArrowDown");
is(
container.dataset.activeDescendantClassName,
"boxmodel-borders",
"Should be set to the border layout."
);
EventUtils.synthesizeKey("KEY_ArrowDown");
is(
container.dataset.activeDescendantClassName,
"boxmodel-paddings",
"Should be set to the padding layout."
);
EventUtils.synthesizeKey("KEY_ArrowDown");
is(
container.dataset.activeDescendantClassName,
"boxmodel-contents",
"Should be set to the content layout."
);
EventUtils.synthesizeKey("KEY_ArrowUp");
is(
container.dataset.activeDescendantClassName,
"boxmodel-paddings",
"Should be set to the padding layout."
);
EventUtils.synthesizeKey("KEY_ArrowUp");
is(
container.dataset.activeDescendantClassName,
"boxmodel-borders",
"Should be set to the border layout."
);
EventUtils.synthesizeKey("KEY_ArrowUp");
is(
container.dataset.activeDescendantClassName,
"boxmodel-margins",
"Should be set to the margin layout."
);
EventUtils.synthesizeKey("KEY_ArrowUp");
is(
container.dataset.activeDescendantClassName,
"boxmodel-main devtools-monospace",
"Should be set to the position layout."
);
}
function testTabbingThroughItems(inspector, boxmodel) {
info("Test that using Tab key moves focus to next/previous input field.");
const doc = boxmodel.document;
const container = doc.querySelector(".boxmodel-container");
container.focus();
EventUtils.synthesizeKey("KEY_Enter");
const editBoxes = [...doc.querySelectorAll("[data-box].boxmodel-editable")];
const editBoxesInfo = [
{ name: "position-top", itemId: "position-top-id" },
{ name: "position-right", itemId: "position-right-id" },
{ name: "position-bottom", itemId: "position-bottom-id" },
{ name: "position-left", itemId: "position-left-id" },
{ name: "margin-top", itemId: "margin-top-id" },
{ name: "margin-right", itemId: "margin-right-id" },
{ name: "margin-bottom", itemId: "margin-bottom-id" },
{ name: "margin-left", itemId: "margin-left-id" },
{ name: "border-top-width", itemId: "border-top-width-id" },
{ name: "border-right-width", itemId: "border-right-width-id" },
{ name: "border-bottom-width", itemId: "border-bottom-width-id" },
{ name: "border-left-width", itemId: "border-left-width-id" },
{ name: "padding-top", itemId: "padding-top-id" },
{ name: "padding-right", itemId: "padding-right-id" },
{ name: "padding-bottom", itemId: "padding-bottom-id" },
{ name: "padding-left", itemId: "padding-left-id" },
{ name: "width", itemId: "width-id" },
{ name: "height", itemId: "height-id" },
];
// Check whether tabbing through box model items works
// Note that the test checks whether wrapping around the box model works
// by letting the loop run beyond the number of indexes to start with
// the first item again.
for (let i = 0; i <= editBoxesInfo.length; i++) {
const itemIndex = i % editBoxesInfo.length;
const editBoxInfo = editBoxesInfo[itemIndex];
is(
editBoxes[itemIndex].parentElement.id,
editBoxInfo.itemId,
`${editBoxInfo.name} item is current`
);
is(
editBoxes[itemIndex].previousElementSibling?.localName,
"input",
`Input shown for ${editBoxInfo.name} item`
);
// Pressing Tab should not be synthesized for the last item to
// wrap to the very last item again when tabbing in reversed order.
if (i < editBoxesInfo.length) {
EventUtils.synthesizeKey("KEY_Tab");
}
}
// Check whether reversed tabbing through box model items works
for (let i = editBoxesInfo.length; i >= 0; i--) {
const itemIndex = i % editBoxesInfo.length;
const editBoxInfo = editBoxesInfo[itemIndex];
is(
editBoxes[itemIndex].parentElement.id,
editBoxInfo.itemId,
`${editBoxInfo.name} item is current`
);
is(
editBoxes[itemIndex].previousElementSibling?.localName,
"input",
`Input shown for ${editBoxInfo.name} item`
);
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
}
}
function testChangingLevelsByClicking(inspector, boxmodel) {
info("Test that clicking on levels updates level.");
const doc = boxmodel.document;
const container = doc.querySelector(".boxmodel-container");
container.focus();
const marginLayout = doc.querySelector(".boxmodel-margins");
const borderLayout = doc.querySelector(".boxmodel-borders");
const paddingLayout = doc.querySelector(".boxmodel-paddings");
const contentLayout = doc.querySelector(".boxmodel-contents");
const layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];
layouts.forEach(layout => {
layout.click();
is(
container.dataset.activeDescendantClassName,
layout.className,
`Should be set to ${layout.getAttribute("data-box")} layout.`
);
});
}