Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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");
}