1 files changed, 65 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_headers-alignment.js b/devtools/client/netmonitor/test/browser_net_headers-alignment.js
new file mode 100644
index 0000000000..b6eaca9308
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_headers-alignment.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Bug 1360457 - Mis-alignment between headers and columns on overflow
+ */
+
+add_task(async function () {
+  requestLongerTimeout(4);
+
+  const { tab, monitor } = await initNetMonitor(INFINITE_GET_URL, {
+    enableCache: true,
+    requestCount: 1,
+  });
+  const { document, windowRequire, store } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Wait until the first request makes the empty notice disappear
+  await waitForRequestListToAppear();
+
+  const requestsContainerScroll = document.querySelector(
+    ".requests-list-scroll"
+  );
+  ok(requestsContainerScroll, "Container element exists as expected.");
+  const requestsContainer = document.querySelector(".requests-list-row-group");
+  const headers = document.querySelector(".requests-list-headers");
+  ok(headers, "Headers element exists as expected.");
+
+  await waitForRequestsToOverflowContainer(monitor, requestsContainerScroll);
+
+  testColumnsAlignment(headers, requestsContainer);
+
+  // Stop doing requests.
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.wrappedJSObject.stopRequests();
+  });
+
+  // Done: clean up.
+  return teardown(monitor);
+
+  function waitForRequestListToAppear() {
+    info(
+      "Waiting until the empty notice disappears and is replaced with the list"
+    );
+    return waitUntil(
+      () => !!document.querySelector(".requests-list-row-group")
+    );
+  }
+});
+
+async function waitForRequestsToOverflowContainer(monitor, requestList) {
+  info("Waiting for enough requests to overflow the container");
+  while (true) {
+    info("Waiting for one network request");
+    await waitForNetworkEvents(monitor, 1);
+    if (requestList.scrollHeight > requestList.clientHeight + 50) {
+      info("The list is long enough, returning");
+      return;
+    }
+  }
+}