Bug 1752262 - [devtools] Check media query element in rule view in simulation test. r=jdescottes.

Differential Revision: https://phabricator.services.mozilla.com/D137108

devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js

@@ -58,9 +58,10 @@ add_task(async function() {
   );
 
   await waitFor(() => divHasDarkSchemeStyling());
-  ok(
-    true,
-    "The rules view was updated with the rule view from the dark scheme media query"
+  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");
@@ -70,6 +71,11 @@ add_task(async function() {
     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);
@@ -113,10 +119,20 @@ add_task(async function() {
     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();

devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js

@@ -28,6 +28,11 @@ add_task(async function() {
   info("Select a div that will change according to print simulation");
   await selectNode("div", inspector);
   ok(ruleViewHasColor("#f00"), "The rule view shows the expected initial rule");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "No media query information are displayed initially"
+  );
 
   info("Click on the button and wait for print media to be applied");
   button.click();
@@ -40,6 +45,11 @@ add_task(async function() {
     true,
     "The rules view was updated with the rule view from the print media query"
   );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print",
+    "Media queries information are displayed"
+  );
 
   info("Select the node from the remote iframe");
   await selectNodeInFrames(["iframe", "html"], inspector);
@@ -48,6 +58,11 @@ add_task(async function() {
     ruleViewHasColor("#0ff"),
     "The simulation is also applied on the remote iframe"
   );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print",
+    "Media queries information are displayed for the node on the remote iframe as well"
+  );
 
   info("Select the top level div again");
   await selectNode("div", inspector);
@@ -59,10 +74,20 @@ add_task(async function() {
   ok(true, "The button is no longer checked");
 
   await waitFor(() => ruleViewHasColor("#f00"));
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed"
+  );
 
   info("Select the node from the remote iframe again");
   await selectNodeInFrames(["iframe", "html"], inspector);
 
   await waitFor(() => ruleViewHasColor("#ff0"));
   ok(true, "The simulation stopped on the remote iframe as well");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed on the remote iframe as well"
+  );
 });