diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js new file mode 100644 index 0000000000..7274092a1a --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_navigation.js @@ -0,0 +1,200 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"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.` + ); + }); +} |