1 files changed, 159 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
new file mode 100644
index 0000000000..172acebcaf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
@@ -0,0 +1,159 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation.
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view, toolbox } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(lightButton, "The light color scheme simulation button exists");
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  is(
+    isButtonChecked(lightButton),
+    false,
+    "At first, the light button isn't checked"
+  );
+  is(
+    isButtonChecked(darkButton),
+    false,
+    "At first, the dark button isn't checked"
+  );
+
+  // Define functions checking if the rule view display the expected property.
+  const divHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+  const divHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+  const iframeElHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:cyan");
+  const iframeHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:darkred");
+
+  info(
+    "Select the div that will change according to conditions in prefered color scheme"
+  );
+  await selectNode("div", inspector);
+  ok(
+    await divHasDefaultStyling(),
+    "The rule view shows the expected initial rule"
+  );
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(() => isButtonChecked(darkButton));
+  ok(true, "The dark button is checked");
+  is(
+    isButtonChecked(lightButton),
+    false,
+    "the light button state didn't change when enabling dark mode"
+  );
+
+  await waitFor(() => divHasDarkSchemeStyling());
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The rules view was updated with the rule from the dark scheme media query"
+  );
+
+  info("Select the node from the remote iframe");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  ok(
+    await iframeHasDarkSchemeStyling(),
+    "The simulation is also applied on the remote iframe"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is displayed"
+  );
+
+  info("Select the top level div again");
+  await selectNode("div", inspector);
+
+  info("Click the light button simulate light mode");
+  lightButton.click();
+  await waitFor(() => isButtonChecked(lightButton));
+  ok(true, "The button has the expected light state");
+  // TODO: Actually simulate light mode. This might require to set the OS-level preference
+  // to dark as the default state might consume the rule from the like scheme media query.
+
+  is(
+    isButtonChecked(darkButton),
+    false,
+    "the dark button was unchecked when enabling light mode"
+  );
+
+  await waitFor(() => divHasDefaultStyling());
+
+  info("Click the light button to disable simulation");
+  lightButton.click();
+  await waitFor(() => !isButtonChecked(lightButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Select the node from the remote iframe again");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeElHasDefaultStyling());
+  ok(true, "The simulation stopped on the remote iframe as well");
+
+  info("Check that reloading keep the selected simulation");
+  await selectNode("div", inspector);
+  darkButton.click();
+  await waitFor(() => divHasDarkSchemeStyling());
+
+  await navigateTo(TEST_URI);
+  await selectNode("div", inspector);
+  await waitFor(() => view.element.children[1]);
+  ok(
+    await divHasDarkSchemeStyling(),
+    "dark mode is still simulated after reloading the page"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is displayed on the rule after reloading"
+  );
+
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeHasDarkSchemeStyling());
+  ok(true, "simulation is still applied to the iframe after reloading");
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is still displayed on the rule for the element in iframe after reloading"
+  );
+
+  info("Check that closing DevTools reset the simulation");
+  await toolbox.destroy();
+  const matchesPrefersDarkColorSchemeMedia = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
+      return matches;
+    }
+  );
+  is(
+    matchesPrefersDarkColorSchemeMedia,
+    false,
+    "color scheme simulation is disabled after closing DevTools"
+  );
+});
+
+function isButtonChecked(el) {
+  return el.classList.contains("checked");
+}