diff options
Diffstat (limited to 'devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js')
-rw-r--r-- | devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js new file mode 100644 index 0000000000..bcb0faeef8 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js @@ -0,0 +1,138 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the list of grids show the subgrids in the correct nested list and toggling +// the CSS grid highlighter for a subgrid. + +const TEST_URI = URL_ROOT + "doc_subgrid.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode(".container", inspector); + const gridListEl = doc.getElementById("grid-list"); + const containerSubgridListEl = gridListEl.children[1]; + const mainSubgridListEl = containerSubgridListEl.querySelector("ul"); + + info("Checking the initial state of the Grid Inspector."); + is( + getGridItemElements(gridListEl).length, + 1, + "One grid container is listed." + ); + is( + getGridItemElements(containerSubgridListEl).length, + 2, + "Got the correct number of subgrids in div.container" + ); + is( + getGridItemElements(mainSubgridListEl).length, + 2, + "Got the correct number of subgrids in main.subgrid" + ); + ok( + !highlighters.gridHighlighters.size && + !highlighters.parentGridHighlighters.size, + "No CSS grid highlighter is shown." + ); + + info("Toggling ON the CSS grid highlighter for header."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted + ); + let checkbox = containerSubgridListEl.children[0].querySelector("input"); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info( + "Checking the CSS grid highlighter and parent grid highlighter are created." + ); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + is( + highlighters.parentGridHighlighters.size, + 1, + "CSS grid highlighter for parent grid container is shown." + ); + + info("Toggling ON the CSS grid highlighter for main."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted && state.grids[2].highlighted + ); + checkbox = containerSubgridListEl.children[1].querySelector("input"); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the number of CSS grid highlighters present."); + is( + highlighters.gridHighlighters.size, + 2, + "Got the correct number of CSS grid highlighter shown." + ); + is( + highlighters.parentGridHighlighters.size, + 1, + "Only 1 parent grid highlighter should be shown for the same subgrid parent." + ); + + info("Toggling OFF the CSS grid highlighter for main."); + let onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted && !state.grids[2].highlighted + ); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the number of CSS grid highlighters present."); + is( + highlighters.gridHighlighters.size, + 1, + "Got the correct number of CSS grid highlighter shown." + ); + is( + highlighters.parentGridHighlighters.size, + 1, + "Got the correct number of CSS grid parent highlighter shown." + ); + + info("Toggling OFF the CSS grid highlighter for header."); + onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => !state.grids[1].highlighted + ); + checkbox = containerSubgridListEl.children[0].querySelector("input"); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok( + !highlighters.gridHighlighters.size && + !highlighters.parentGridHighlighters.size, + "No CSS grid highlighter is shown." + ); +}); + +/** + * Returns the grid item elements <li> from the grid list element <ul>. + * + * @param {Element} gridListEl + * The grid list element <ul>. + * @return {Array<Element>} containing the grid item elements <li>. + */ +function getGridItemElements(gridListEl) { + return [...gridListEl.children].filter(node => node.nodeName === "li"); +} |