1 files changed, 53 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js
new file mode 100644
index 0000000000..f26ca751cd
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_column.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item outline is rotated for flex items in a column flexbox layout.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  // Select a flex item in the row flexbox layout.
+  let onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".container .item", inspector);
+  let [flexOutline] = await onFlexItemOutlineRendered;
+
+  ok(
+    flexOutline.classList.contains("horizontal-lr"),
+    "The flex outline has the horizontal-lr class"
+  );
+
+  // Check that the outline is wider than it is tall in the configuration.
+  let bounds = flexOutline.getBoxQuads()[0].getBounds();
+  Assert.greater(bounds.width, bounds.height, "The outline looks like a row");
+
+  // Select a flex item in the column flexbox layout.
+  onFlexItemOutlineRendered = waitForDOM(
+    doc,
+    ".flex-outline-container .flex-outline"
+  );
+  await selectNode(".container.column .item", inspector);
+  await waitUntil(() => {
+    flexOutline = doc.querySelector(
+      ".flex-outline-container .flex-outline.vertical-tb"
+    );
+    return flexOutline;
+  });
+  ok(true, "The flex outline has the vertical-tb class");
+
+  // Check that the outline is taller than it is wide in the configuration.
+  bounds = flexOutline.getBoxQuads()[0].getBounds();
+  Assert.greater(
+    bounds.height,
+    bounds.width,
+    "The outline looks like a column"
+  );
+});