Bug 1501665 Part 13: Add a test of Responsive Design Mode resizing of meta viewports. r=gl
☠☠ backed out by af46b1e88998 ☠ ☠
authorBrad Werth <bwerth@mozilla.com>
Mon, 18 Mar 2019 15:00:17 +0000
changeset 464820 2fa518cb0dfc656c6f0c5d5dfbad38348be6f31f
parent 464819 afaf26d7df4235daef3157d74b3bcd69761c6393
child 464821 50fb3808da519a54d90da9fae63337b1e39c58e9
push id80720
push userbwerth@mozilla.com
push dateMon, 18 Mar 2019 15:02:22 +0000
treeherderautoland@2fa518cb0dfc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1501665
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1501665 Part 13: Add a test of Responsive Design Mode resizing of meta viewports. r=gl This test uses a Document with a fixed-width meta viewport. This test simulates resizing the RDM pane from a wide landscape size to a small square size, and back again. It does this again with meta viewport support turned on. Differential Revision: https://phabricator.services.mozilla.com/D22438
devtools/client/responsive.html/test/browser/browser.ini
devtools/client/responsive.html/test/browser/browser_viewport_resizing.js
--- a/devtools/client/responsive.html/test/browser/browser.ini
+++ b/devtools/client/responsive.html/test/browser/browser.ini
@@ -66,9 +66,10 @@ skip-if = true # Bug 1413765
 [browser_toolbox_rule_view_reload.js]
 skip-if = os == "linux" || os == "mac" # Bug 1498336
 [browser_toolbox_swap_browsers.js]
 [browser_toolbox_swap_inspector.js]
 [browser_touch_device.js]
 [browser_touch_simulation.js]
 [browser_user_agent_input.js]
 [browser_viewport_basics.js]
+[browser_viewport_resizing.js]
 [browser_window_close.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_viewport_resizing.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test viewport resizing, with and without meta viewport support.
+
+// We call this to switch between on/off support for meta viewports.
+async function setTouchAndMetaViewportSupport(ui, value) {
+  const reloadNeeded = await ui.updateTouchSimulation(value);
+  if (reloadNeeded) {
+    info("Reload is needed -- waiting for it.");
+    const reload = waitForViewportLoad(ui);
+    const browser = ui.getViewportBrowser();
+    browser.reload();
+    await reload;
+  }
+}
+
+// This function check that zoom, layout viewport width and height
+// are all as expected.
+async function testViewportZoomWidthAndHeight(message, ui, zoom, width, height) {
+  const resolution = await spawnViewportTask(ui, {}, function() {
+    return content.windowUtils.getResolution();
+  });
+  is(resolution, zoom, message + " should have expected zoom.");
+
+  const layoutSize = await spawnViewportTask(ui, {}, function() {
+    return {
+      width: content.screen.width,
+      height: content.screen.height,
+    };
+  });
+  is(layoutSize.width, width, message + " should have expected layout width.");
+  is(layoutSize.height, height, message + " should have expected layout height.");
+}
+
+const TEST_URL = "data:text/html;charset=utf-8," +
+  "<head><meta name=\"viewport\" content=\"width=300\"/></head>" +
+  "<body>meta viewport width 300</body>";
+addRDMTask(TEST_URL, async function({ ui, manager }) {
+  // Turn on the pref that allows meta viewport support.
+  await SpecialPowers.pushPrefEnv({
+    set: [["devtools.responsive.metaViewport.enabled", true]],
+  });
+
+  const store = ui.toolWindow.store;
+
+  // Wait until the viewport has been added.
+  await waitUntilState(store, state => state.viewports.length == 1);
+
+  info("--- Starting viewport test output ---");
+
+  // We're going to take a 600,300 viewport (before) and resize it
+  // to 50,50 (after) and then resize it back. At the before and
+  // after points, we'll measure zoom and the layout viewport width
+  // and height.
+  const expected = [
+    {
+      metaSupport: false,
+      before: [1.0, 600, 300],
+      after: [1.0, 50, 50], // Zoom is unaffected.
+    },
+    {
+      metaSupport: true,
+      before: [2.0, 300, 150],
+      after: [0.25, 200, 200], // This checks that min-zoom is active.
+    },
+  ];
+
+  for (const e of expected) {
+    const b = e.before;
+    const a = e.after;
+
+    const message = "Meta Viewport " + (e.metaSupport ? "ON" : "OFF");
+
+    // Ensure meta viewport is set.
+    info(message + " setting meta viewport support.");
+    await setTouchAndMetaViewportSupport(ui, e.metaSupport);
+
+    // Get to the initial size and check values.
+    await setViewportSize(ui, manager, 600, 300);
+    await testViewportZoomWidthAndHeight(
+      message + " before resize",
+      ui, b[0], b[1], b[2]);
+
+    // Move to the smaller size.
+    await setViewportSize(ui, manager, 50, 50);
+    await testViewportZoomWidthAndHeight(
+      message + " after resize",
+      ui, a[0], a[1], a[2]);
+
+    // Go back to the initial size and check again.
+    await setViewportSize(ui, manager, 600, 300);
+    await testViewportZoomWidthAndHeight(
+      message + " return to initial size",
+      ui, b[0], b[1], b[2]);
+  }
+});