Bug 1468402 - Part 3: Add test for subgrids in the grid list. r=pbro
☠☠ backed out by 0647eae6a6e6 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 09 May 2019 11:28:53 -0400
changeset 532493 6685fd95730257d69b3e9169a1d84c7336a8ce74
parent 532492 63f40ac370c63ec1aae568a569a25f768998b998
child 532494 0647eae6a6e6abd91ebd206b2db15a6766d2d3ef
push id11268
push usercsabou@mozilla.com
push dateTue, 14 May 2019 15:24:22 +0000
treeherdermozilla-beta@5fb7fcd568d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1468402
milestone68.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 1468402 - Part 3: Add test for subgrids in the grid list. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D30512
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/test/browser.ini
devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids.js
devtools/client/inspector/grids/test/doc_subgrid.html
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -102,16 +102,17 @@ class GridItem extends PureComponent {
     }
 
     const subgrids = grids.filter(g => grid.subgrids.includes(g.id));
 
     return (
       dom.ul({},
         subgrids.map(g => {
           return createElement(GridItem, {
+            key: g.id,
             getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip,
             grid: g,
             grids,
             onHideBoxModelHighlighter: this.props.onHideBoxModelHighlighter,
             onSetGridOverlayColor: this.props.onSetGridOverlayColor,
             onShowBoxModelHighlighterForNode: this.props.onShowBoxModelHighlighterForNode,
             onToggleGridHighlighter: this.props.onToggleGridHighlighter,
             setSelectedNode: this.props.setSelectedNode,
--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -1,13 +1,14 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
   doc_iframe_reloaded.html
+  doc_subgrid.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/shared-redux-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
@@ -20,16 +21,17 @@ support-files =
 [browser_grids_grid-list-color-picker-on-ESC.js]
 [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]
 [browser_grids_grid-list-on-mutation-element-removed.js]
+[browser_grids_grid-list-subgrids.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
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids.js
@@ -0,0 +1,61 @@
+/* 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, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(store, state => state.grids[1].highlighted);
+  const checkbox = containerSubgridListEl.children[0].querySelector("input");
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is created.");
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(store, state => !state.grids[1].highlighted);
+  checkbox.click();
+  await onHighlighterHidden;
+  await onCheckboxChange;
+
+  info("Checking the CSS grid highlighter is not shown.");
+  ok(!highlighters.gridHighlighters.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");
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/doc_subgrid.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    .container {
+      display: grid;
+      grid-gap: 5px;
+      grid-template: auto / 1fr 3fr 1fr;
+      background: lightyellow;
+    }
+
+    .subgrid {
+      display: grid;
+      grid: subgrid;
+    }
+
+    header, aside, section, footer {
+      background: lightblue;
+      font-family: sans-serif;
+      font-size: 3em;
+    }
+
+    header, footer {
+      grid-column: span 3;
+    }
+
+    main {
+      grid-column: span 3;
+    }
+
+    .aside1 {
+      grid-column: 1;
+    }
+
+    .aside2 {
+      grid-column: 3;
+    }
+
+    section {
+      grid-column: 2;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header class="subgrid">Header</header>
+    <main class="subgrid">
+      <aside class="aside1 subgrid">aside</aside>
+      <section>section</section>
+      <aside class="aside2 subgrid">aside2</aside>
+    </main>
+    <footer>footer</footer>
+  </div>
+</body>
+</html>