1 files changed, 51 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_viewport_state_after_close.js b/devtools/client/responsive/test/browser/browser_viewport_state_after_close.js
new file mode 100644
index 0000000000..3bac3b3e01
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_viewport_state_after_close.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that after closing RDM the page goes back to its original state
+
+const TEST_URL =
+  "data:text/html;charset=utf-8,<style>h1 {width: 200px;} @media (hover:none) { h1 {width: 400px;background: tomato;}</style><h1>Hello</h1>";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URL);
+
+  reloadOnTouchChange(false);
+  reloadOnUAChange(false);
+  await pushPref("devtools.responsive.touchSimulation.enabled", true);
+
+  is(await getH1Width(), 200, "<h1> has expected initial width");
+
+  for (let i = 0; i < 10; i++) {
+    info("Open responsive design mode");
+    await openRDM(tab);
+
+    await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
+      const mql = content.matchMedia("(hover:none)");
+      if (mql.matches) {
+        return;
+      }
+      await new Promise(res =>
+        mql.addEventListener("change", res, { once: true })
+      );
+    });
+
+    is(
+      await getH1Width(),
+      400,
+      "<h1> has expected width when RDM and touch simulation are enabled"
+    );
+
+    info("Close responsive design mode");
+    await closeRDM(tab);
+
+    is(await getH1Width(), 200, "<h1> has expected width after closing RDM");
+  }
+});
+
+function getH1Width() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    return content.document.querySelector("h1").getBoundingClientRect().width;
+  });
+}