1 files changed, 78 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_touch_does_not_trigger_hover_states.js b/devtools/client/responsive/test/browser/browser_touch_does_not_trigger_hover_states.js
new file mode 100644
index 0000000000..b19e64dc2b
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_touch_does_not_trigger_hover_states.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that element hover states are not triggered when touch is enabled.
+
+const TEST_URL = `${URL_ROOT}hover.html`;
+
+addRDMTask(TEST_URL, async function ({ ui }) {
+  reloadOnTouchChange(true);
+
+  await toggleTouchSimulation(ui);
+
+  info("Test element hover states when touch is enabled.");
+  await testButtonHoverState(ui, "rgb(255, 0, 0)");
+  await testDropDownHoverState(ui, "none");
+
+  await toggleTouchSimulation(ui);
+
+  info("Test element hover states when touch is disabled.");
+  await testButtonHoverState(ui, "rgb(0, 0, 0)");
+  await testDropDownHoverState(ui, "block");
+
+  reloadOnTouchChange(false);
+});
+
+async function testButtonHoverState(ui, expected) {
+  await SpecialPowers.spawn(
+    ui.getViewportBrowser(),
+    [{ expected }],
+    async function (args) {
+      let button = content.document.querySelector("button");
+      const { expected: contentExpected } = args;
+
+      info("Move mouse into the button element.");
+      await EventUtils.synthesizeMouseAtCenter(
+        button,
+        { type: "mousemove", isSynthesized: false },
+        content
+      );
+      button = content.document.querySelector("button");
+      const win = content.document.defaultView;
+
+      is(
+        win.getComputedStyle(button).getPropertyValue("background-color"),
+        contentExpected,
+        `Button background color is ${contentExpected}.`
+      );
+    }
+  );
+}
+
+async function testDropDownHoverState(ui, expected) {
+  await SpecialPowers.spawn(
+    ui.getViewportBrowser(),
+    [{ expected }],
+    async function (args) {
+      const dropDownMenu = content.document.querySelector(".drop-down-menu");
+      const { expected: contentExpected } = args;
+
+      info("Move mouse into the drop down menu.");
+      await EventUtils.synthesizeMouseAtCenter(
+        dropDownMenu,
+        { type: "mousemove", isSynthesized: false },
+        content
+      );
+      const win = content.document.defaultView;
+      const menuItems = content.document.querySelector(".menu-items-list");
+
+      is(
+        win.getComputedStyle(menuItems).getPropertyValue("display"),
+        contentExpected,
+        `Menu items is display: ${contentExpected}.`
+      );
+    }
+  );
+}