Bug 1571653: Add a test for toggling subgrid. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 15 Aug 2019 05:01:40 +0000
changeset 488181 be174ffafb1d907a290e5838cca043ead0cd9443
parent 488180 b38497a0592a98311f29f80f68e23530356dd4cb
child 488182 a35f22f9d97ab8052dc49f378d0deb345c0276c9
push id36437
push userncsoregi@mozilla.com
push dateThu, 15 Aug 2019 19:33:18 +0000
treeherdermozilla-central@44aac6fc3352 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1571653
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1571653: Add a test for toggling subgrid. r=gl Differential Revision: https://phabricator.services.mozilla.com/D41701
devtools/client/inspector/grids/test/browser.ini
devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids.js
devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js
devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js
--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -22,17 +22,18 @@ support-files =
 [browser_grids_grid-list-color-picker-on-RETURN.js]
 [browser_grids_grid-list-element-rep.js]
 [browser_grids_grid-list-no-grids.js]
 [browser_grids_grid-list-on-iframe-reloaded.js]
 skip-if = (verify && (os == 'win' || os == 'linux'))
 [browser_grids_grid-list-on-mutation-element-added.js]
 skip-if = true #Bug 1557326
 [browser_grids_grid-list-on-mutation-element-removed.js]
-[browser_grids_grid-list-subgrids.js]
+[browser_grids_grid-list-subgrids_01.js]
+[browser_grids_grid-list-subgrids_02.js]
 [browser_grids_grid-list-toggle-grids_01.js]
 [browser_grids_grid-list-toggle-grids_02.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]
 [browser_grids_grid-outline-cannot-show-outline.js]
 [browser_grids_grid-outline-highlight-area.js]
 skip-if = (verify && (os == 'win')) || (os == "win" && os_version == "10.0" && !debug) #Bug 1501760
 [browser_grids_grid-outline-highlight-cell.js]
 skip-if = (verify && (os == 'win')) || (os == "win" && os_version == "10.0" && asan) #Bug 1501317
rename from devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids.js
rename to devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js
new file mode 100644
--- /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("#grid", 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;
+}