tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_device_pixel_ratio_change.js (3715B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Tests changing viewport device pixel ratio
      7 
      8 const TEST_URL = "data:text/html;charset=utf-8,DevicePixelRatio list test";
      9 const DEFAULT_DPPX = window.devicePixelRatio;
     10 const VIEWPORT_DPPX = DEFAULT_DPPX + 1;
     11 const Types = require("resource://devtools/client/responsive/types.js");
     12 
     13 const testDevice = {
     14  name: "Fake Phone RDM Test",
     15  width: 320,
     16  height: 470,
     17  pixelRatio: 5.5,
     18  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
     19  touch: true,
     20  firefoxOS: true,
     21  os: "custom",
     22  featured: true,
     23 };
     24 
     25 // Add the new device to the list
     26 addDeviceForTest(testDevice);
     27 
     28 addRDMTask(
     29  TEST_URL,
     30  async function ({ ui }) {
     31    await waitStartup(ui);
     32 
     33    await testDefaults(ui);
     34    await testChangingDevice(ui);
     35    await testResizingViewport(ui);
     36    await testChangingDevicePixelRatio(ui);
     37  },
     38  { waitForDeviceList: true }
     39 );
     40 
     41 async function waitStartup(ui) {
     42  const { store } = ui.toolWindow;
     43 
     44  // Wait until the viewport has been added and the device list has been loaded
     45  await waitUntilState(
     46    store,
     47    state =>
     48      state.viewports.length == 1 &&
     49      state.devices.listState == Types.loadableState.LOADED
     50  );
     51 }
     52 
     53 async function testDefaults(ui) {
     54  info("Test Defaults");
     55 
     56  const dppx = await getViewportDevicePixelRatio(ui);
     57  is(dppx, DEFAULT_DPPX, "Content has expected devicePixelRatio");
     58  testViewportDevicePixelRatioSelect(ui, {
     59    value: DEFAULT_DPPX,
     60    disabled: false,
     61  });
     62  testViewportDeviceMenuLabel(ui, "Responsive");
     63 }
     64 
     65 async function testChangingDevice(ui) {
     66  info("Test Changing Device");
     67 
     68  await selectDevice(ui, testDevice.name);
     69  await waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
     70  const dppx = await waitForDevicePixelRatio(ui, testDevice.pixelRatio);
     71  is(dppx, testDevice.pixelRatio, "Content has expected devicePixelRatio");
     72  testViewportDevicePixelRatioSelect(ui, {
     73    value: testDevice.pixelRatio,
     74    disabled: true,
     75  });
     76  testViewportDeviceMenuLabel(ui, testDevice.name);
     77 }
     78 
     79 async function testResizingViewport(ui) {
     80  info("Test resizing the viewport");
     81 
     82  await testViewportResize(
     83    ui,
     84    ".viewport-vertical-resize-handle",
     85    [-10, -10],
     86    [0, -10],
     87    {
     88      hasDevice: true,
     89    }
     90  );
     91 
     92  // Wait for a bit to let enough time to a change in dpr to happen
     93  await wait(1000);
     94 
     95  const dppx = await getViewportDevicePixelRatio(ui);
     96  is(dppx, testDevice.pixelRatio, "Content has expected devicePixelRatio");
     97 
     98  testViewportDevicePixelRatioSelect(ui, {
     99    value: testDevice.pixelRatio,
    100    disabled: false,
    101  });
    102  testViewportDeviceMenuLabel(ui, "Responsive");
    103 }
    104 
    105 async function testChangingDevicePixelRatio(ui) {
    106  info("Test changing device pixel ratio");
    107 
    108  await selectDevicePixelRatio(ui, VIEWPORT_DPPX);
    109  const dppx = await waitForDevicePixelRatio(ui, VIEWPORT_DPPX);
    110  is(dppx, VIEWPORT_DPPX, "Content has expected devicePixelRatio");
    111  testViewportDevicePixelRatioSelect(ui, {
    112    value: VIEWPORT_DPPX,
    113    disabled: false,
    114  });
    115  testViewportDeviceMenuLabel(ui, "Responsive");
    116 }
    117 
    118 function testViewportDevicePixelRatioSelect(ui, expected) {
    119  info("Test viewport's DevicePixelRatio Select");
    120 
    121  const button = ui.toolWindow.document.getElementById(
    122    "device-pixel-ratio-menu"
    123  );
    124  const title = ui.toolWindow.document.querySelector(
    125    "#device-pixel-ratio-menu .title"
    126  );
    127  is(
    128    title.textContent,
    129    `DPR: ${expected.value}`,
    130    `DevicePixelRatio Select value should be: ${expected.value}`
    131  );
    132  is(
    133    button.disabled,
    134    expected.disabled,
    135    `DevicePixelRatio Select should be ${
    136      expected.disabled ? "disabled" : "enabled"
    137    }.`
    138  );
    139 }