tor-browser

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

browser_inspector_highlighter-zoom.js (2535B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 // Test that the highlighter stays correctly positioned and has the right aspect
      8 // ratio even when the page is zoomed in or out.
      9 
     10 const TEST_URL = "data:text/html;charset=utf-8,<div>zoom me</div>";
     11 
     12 // TEST_LEVELS entries should contain the zoom level to test.
     13 const TEST_LEVELS = [2, 1, 0.5];
     14 
     15 // Returns the expected style attribute value to check for on the highlighter's elements
     16 // node, for the values given.
     17 const expectedStyle = (w, h, z) =>
     18  (z !== 1
     19    ? `transform-origin: left top 0px; transform: scale(${1 / z}); `
     20    : "") +
     21  `position: absolute; width: ${w * z}px; height: ${h * z}px; ` +
     22  "overflow: hidden;";
     23 
     24 add_task(async function () {
     25  const { inspector, highlighterTestFront } =
     26    await openInspectorForURL(TEST_URL);
     27 
     28  const div = await getNodeFront("div", inspector);
     29 
     30  for (const level of TEST_LEVELS) {
     31    info(`Zoom to level ${level}`);
     32    setContentPageZoomLevel(level);
     33 
     34    info("Highlight the test node");
     35    await inspector.highlighters.showHighlighterTypeForNode(
     36      inspector.highlighters.TYPES.BOXMODEL,
     37      div
     38    );
     39 
     40    const isVisible = await highlighterTestFront.isHighlighting();
     41    ok(isVisible, `The highlighter is visible at zoom level ${level}`);
     42 
     43    await isNodeCorrectlyHighlighted(highlighterTestFront, "div");
     44 
     45    info("Check that the highlighter root wrapper node was scaled down");
     46 
     47    const style = await getElementsNodeStyle(highlighterTestFront);
     48 
     49    const { width, height } = await SpecialPowers.spawn(
     50      gBrowser.selectedBrowser,
     51      [],
     52      () => {
     53        const { require } = ChromeUtils.importESModule(
     54          "resource://devtools/shared/loader/Loader.sys.mjs"
     55        );
     56        const {
     57          getWindowDimensions,
     58        } = require("resource://devtools/shared/layout/utils.js");
     59        return getWindowDimensions(content);
     60      }
     61    );
     62 
     63    is(
     64      style,
     65      expectedStyle(width, height, level),
     66      "The style attribute of the root element is correct"
     67    );
     68 
     69    info("Unhighlight the node");
     70    await inspector.highlighters.hideHighlighterType(
     71      inspector.highlighters.TYPES.BOXMODEL
     72    );
     73  }
     74 });
     75 
     76 async function getElementsNodeStyle(highlighterTestFront) {
     77  const value = await highlighterTestFront.getHighlighterNodeAttribute(
     78    "box-model-elements",
     79    "style"
     80  );
     81  return value;
     82 }