1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js
new file mode 100644
index 0000000000..83f07e339a
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the state of grid highlighters after toggling the checkbox of subgrids.
+
+const TEST_URI = URL_ROOT + "doc_subgrid.html";
+
+add_task(async () => {
+  await addTab(TEST_URI);
+  const { gridInspector, inspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode(".container", inspector);
+  const parentEl = doc.getElementById("grid-list");
+  // Input for .container
+  const parentInput = parentEl.children[0].querySelector("input");
+  const subgridEl = parentEl.children[1];
+  // Input for <main>
+  const subgridInput = subgridEl.children[1].querySelector("input");
+  const grandSubgridEl = subgridEl.children[2];
+  // Input for .aside1
+  const grandSubgridInput = grandSubgridEl.children[0].querySelector("input");
+
+  info(
+    "Toggling ON the CSS grid highlighters for .container, <main> and .aside1"
+  );
+  await toggleHighlighter(parentInput, highlighters);
+  await toggleHighlighter(subgridInput, highlighters);
+  await toggleHighlighter(grandSubgridInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 3
+  );
+
+  info("Check the state of highlighters");
+  is(
+    highlighters.gridHighlighters.size,
+    3,
+    "All highlighters are use as normal highlighter"
+  );
+
+  info("Toggling OFF the CSS grid highlighter for <main>");
+  await toggleHighlighter(subgridInput, highlighters);
+  await waitUntilState(
+    store,
+    state => state.grids.filter(g => g.highlighted).length === 2
+  );
+
+  info("Check the state of highlighters after hiding subgrid for <main>");
+  is(
+    highlighters.gridHighlighters.size,
+    2,
+    "2 highlighters are use as normal highlighter"
+  );
+  is(
+    highlighters.parentGridHighlighters.size,
+    1,
+    "The highlighter for <main> is used as parent highlighter"
+  );
+});
+
+async function toggleHighlighter(input, highlighters) {
+  const eventName = input.checked
+    ? "grid-highlighter-hidden"
+    : "grid-highlighter-shown";
+  const onHighlighterEvent = highlighters.once(eventName);
+  input.click();
+  await onHighlighterEvent;
+}