1 files changed, 55 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js b/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js
new file mode 100644
index 0000000000..8617def08b
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_grand_parent_flex.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flex container is not shown as a flex item of its grandparent flex
+// container.
+
+const TEST_URI = `
+<style>
+.flex {
+  display: flex;
+}
+</style>
+<div class="flex">
+  <div>
+    <div id="grandchild" class="flex">
+      This is a flex item of a flex container.
+      Its parent isn't a flex container, but its grandparent is.
+    </div>
+  </div>
+</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  info("Select the flex container's grandchild.");
+  const onFlexContainerHeaderRendered = waitForDOM(
+    doc,
+    ".flex-header-container-label"
+  );
+  await selectNode("#grandchild", inspector);
+  await onFlexContainerHeaderRendered;
+
+  info("Check that only the Flex Container accordion item is showing.");
+  const flexPanes = doc.querySelectorAll(".flex-accordion");
+  is(
+    flexPanes.length,
+    1,
+    "There should only be one flex accordion item showing."
+  );
+
+  info("Check that the container header shows Flex Container.");
+  const flexAccordionHeader = flexPanes[0].querySelector(
+    ".accordion-header-label"
+  );
+  is(
+    flexAccordionHeader.textContent,
+    "Flex Container",
+    "The flexbox pane shows a flex container accordion item."
+  );
+});