1 files changed, 91 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_01.js b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
new file mode 100644
index 0000000000..6082d586c1
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_01.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that markup display node shows for only for grid and flex containers.
+
+const TEST_URI = `
+  <style type="text/css">
+    #grid {
+      display: grid;
+    }
+    #subgrid {
+      display: grid;
+      grid: subgrid / subgrid;
+    }
+    #flex {
+      display: flex;
+    }
+    #block {
+      display: block;
+    }
+  </style>
+  <div id="grid">
+    <div id="subgrid"></div>
+  </div>
+  <div id="flex">Flex</div>
+  <div id="block">Block</div>
+  <span>HELLO WORLD</span>
+`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  info("Check the display node is shown and the value of #grid.");
+  await selectNode("#grid", inspector);
+  const gridContainer = await getContainerForSelector("#grid", inspector);
+  const gridDisplayNode = gridContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(gridDisplayNode, "#grid display node is shown.");
+  is(
+    gridDisplayNode.textContent,
+    "grid",
+    "Got the correct display type for #grid."
+  );
+
+  info("Check the display node is shown and the value of #subgrid.");
+  await selectNode("#subgrid", inspector);
+  const subgridContainer = await getContainerForSelector("#subgrid", inspector);
+  const subgridDisplayNode = subgridContainer.elt.querySelector(
+    ".inspector-badge[data-display]"
+  );
+  ok(subgridDisplayNode, "#subgrid display node is shown");
+  is(
+    subgridDisplayNode.textContent,
+    "subgrid",
+    "Got the correct display type for #subgrid"
+  );
+
+  info("Check the display node is shown and the value of #flex.");
+  await selectNode("#flex", inspector);
+  const flexContainer = await getContainerForSelector("#flex", inspector);
+  const flexDisplayNode = flexContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(flexDisplayNode, "#flex display node is shown.");
+  is(
+    flexDisplayNode.textContent,
+    "flex",
+    "Got the correct display type for #flex"
+  );
+
+  info("Check the display node is hidden for #block.");
+  await selectNode("#block", inspector);
+  const blockContainer = await getContainerForSelector("#block", inspector);
+  const blockDisplayNode = blockContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!blockDisplayNode, "#block display node is hidden.");
+
+  info("Check the display node is hidden for span.");
+  await selectNode("span", inspector);
+  const spanContainer = await getContainerForSelector("span", inspector);
+  const spanDisplayNode = spanContainer.elt.querySelector(
+    ".inspector-badge.interactive[data-display]"
+  );
+  ok(!spanDisplayNode, "span display node is hidden.");
+});