1 files changed, 67 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
new file mode 100644
index 0000000000..79bc9b9f8f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that applicable media queries are updated in the Rule view after reloading
+// the page and resizing the window.
+
+const TEST_URI = `
+  <style type='text/css'>
+    @media all and (max-width: 500px) {
+      div {
+        color: red;
+      }
+    }
+    @media all and (min-width: 500px) {
+      div {
+        color: green;
+      }
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView, toolbox } = await openRuleView();
+  const hostWindow = toolbox.win.parent;
+
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for small viewports applies");
+  hostWindow.resizeTo(400, 400);
+
+  await waitForMediaRuleColor(ruleView, "red");
+  ok(true, "Small viewport media query inspected");
+
+  info("Reload the current page");
+  await reloadBrowser();
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for large viewports applies");
+  hostWindow.resizeTo(800, 800);
+
+  info("Reselect the rule after page reload.");
+  await waitForMediaRuleColor(ruleView, "green");
+  ok(true, "Large viewport media query inspected");
+
+  info("Resize window to original dimentions");
+  const onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+  await onResize;
+});
+
+function waitForMediaRuleColor(ruleView, color) {
+  return waitUntil(() => {
+    try {
+      const { value } = getTextProperty(ruleView, 1, { color });
+      return value === color;
+    } catch (e) {
+      return false;
+    }
+  });
+}