browser_grids_grid-list-subgrids.js

/* 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("#grid", 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");
}