1 files changed, 50 insertions, 0 deletions
diff --git a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js
new file mode 100644
index 0000000000..9218022b02
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_updates_on_change.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox sizing info updates on changes to the flex item properties.
+
+const TEST_URI = `
+  <style>
+    #container {
+      display: flex;
+    }
+  </style>
+  <div id="container">
+    <div id="item"></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;
+
+  const onFlexItemSizingRendered = waitForDOM(doc, "ul.flex-item-sizing");
+  await selectNode("#item", inspector);
+  const [flexItemSizingContainer] = await onFlexItemSizingRendered;
+
+  info("Checking the initial state of the flex item list.");
+  is(
+    flexItemSizingContainer.querySelectorAll("li").length,
+    2,
+    "Got the correct number of flex item sizing properties in the list."
+  );
+
+  info("Changing the flexbox in the page.");
+  const onFlexItemSizingChanged = waitForDOM(
+    doc,
+    "ul.flex-item-sizing > li",
+    3
+  );
+  SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => (content.document.getElementById("item").style.minWidth = "100px")
+  );
+  const elements = await onFlexItemSizingChanged;
+
+  info("Checking the flex item sizing info is correct.");
+  is(elements.length, 3, "Flex item sizing info was changed.");
+});