diff options
Diffstat (limited to 'devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js')
-rw-r--r-- | devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js new file mode 100644 index 0000000000..0339845618 --- /dev/null +++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item_accordion_state.js @@ -0,0 +1,107 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test the order in which accordion items are shown for container-item elements. +// For those combined types, the container accordion is shown first if the selection came +// from the markup-view, because we assume in this case that users do want to see the +// element selected as a container first. +// However when users select an item in the list of items in the container accordion (or +// in the item selector dropdown), then the item accordion should be shown first. + +const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, flexboxInspector } = await openLayoutView(); + const { document: doc } = flexboxInspector; + + info("Select a flex container-only node"); + await selectNode("#container-only", inspector); + await waitUntil( + () => doc.querySelectorAll(".flex-header-container-properties").length + ); + + info("Check that there is only 1 accordion for displayed"); + let accordions = doc.querySelectorAll(".flex-accordion"); + is(accordions.length, 1, "There's only 1 accordion"); + is( + accordions[0].id, + "layout-section-flex-container", + "The accordion is the container type" + ); + + info("Select a flex container+item node by clicking in the markup-view"); + await clickOnNodeInMarkupView("#container-and-item", inspector); + await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 2); + + info( + "Check that the 2 accordions are displayed, with container type being first" + ); + accordions = doc.querySelectorAll(".flex-accordion"); + is(accordions.length, 2, "There are 2 accordions"); + is( + accordions[0].id, + "layout-section-flex-container", + "The first accordion is the container type" + ); + is( + accordions[1].id, + "layout-section-flex-item", + "The second accordion is the item type" + ); + + info("Select the container-only node again"); + await selectNode("#container-only", inspector); + await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 1); + + info("Wait until the accordion item list points to the correct item"); + await waitUntil(() => + doc + .querySelector(".flex-item-list button") + .textContent.includes("container-and-item") + ); + info( + "Click on the container+item node right there in the accordion item list" + ); + doc.querySelector(".flex-item-list button").click(); + await waitUntil(() => doc.querySelectorAll(".flex-accordion").length === 2); + + info( + "Check that the 2 accordions are displayed again, with item type being first" + ); + accordions = doc.querySelectorAll(".flex-accordion"); + is(accordions.length, 2, "There are 2 accordions again"); + is( + accordions[0].id, + "layout-section-flex-item", + "The first accordion is the item type" + ); + is( + accordions[1].id, + "layout-section-flex-container", + "The second accordion is the container type" + ); +}); + +async function clickOnNodeInMarkupView(selector, inspector) { + const { selection, markup } = inspector; + + await markup.expandAll(selection.nodeFront); + const nodeFront = await getNodeFront(selector, inspector); + const markupContainer = markup.getContainer(nodeFront); + + const onSelected = inspector.once("inspector-updated"); + EventUtils.synthesizeMouseAtCenter( + markupContainer.tagLine, + { type: "mousedown" }, + markup.doc.defaultView + ); + EventUtils.synthesizeMouseAtCenter( + markupContainer.tagLine, + { type: "mouseup" }, + markup.doc.defaultView + ); + await onSelected; +} |