1 files changed, 53 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js b/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js
new file mode 100644
index 0000000000..73ae4b211b
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the viewport's ICB width will use the simulated screen width
+// if the simulated width is larger than the desktop viewport width default
+// (980px).
+
+// The HTML below sets up the test such that the "inner" div is aligned to the end
+// (right-side) of the viewport. By doing this, it makes it easier to have our test
+// target an element whose bounds are outside of the desktop viewport width default
+// for device screens greater than 980px.
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  `<div id="outer" style="display: grid; justify-items: end; font-size: 64px">
+    <div id="inner">Click me!</div>
+  </div>`;
+
+addRDMTask(TEST_URL, async function ({ ui, manager }) {
+  info("Toggling on touch simulation.");
+  reloadOnTouchChange(true);
+  await toggleTouchSimulation(ui);
+  // It's important we set a viewport width larger than 980px for this test to be correct.
+  // So let's choose viewport width: 1280x600
+  await setViewportSizeAndAwaitReflow(ui, manager, 1280, 600);
+
+  await testICBWidth(ui);
+
+  info("Toggling off touch simulation.");
+  await toggleTouchSimulation(ui);
+  reloadOnTouchChange(false);
+});
+
+async function testICBWidth(ui) {
+  await SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () {
+    const innerDiv = content.document.getElementById("inner");
+
+    innerDiv.addEventListener("click", () => {
+      innerDiv.style.color = "green"; //rgb(0,128,0)
+    });
+
+    info("Check that touch point (via click) registers on inner div.");
+    const mousedown = ContentTaskUtils.waitForEvent(innerDiv, "click");
+    await EventUtils.synthesizeClick(innerDiv);
+    await mousedown;
+
+    const win = content.document.defaultView;
+    const bg = win.getComputedStyle(innerDiv).getPropertyValue("color");
+
+    is(bg, "rgb(0, 128, 0)", "inner div's background color changed to green.");
+  });
+}