tor-browser

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

browser_inspector_highlighter-cssshape_03.js (4151B)

      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 // Make sure that the CSS shapes highlighters have the correct size
      8 // in different zoom levels and with different geometry-box.
      9 
     10 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
     11 const { TYPES } = ChromeUtils.importESModule(
     12  "resource://devtools/shared/highlighters.mjs"
     13 );
     14 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     15 const TEST_LEVELS = [0.5, 1, 2];
     16 
     17 add_task(async function () {
     18  const inspector = await openInspectorForURL(TEST_URL);
     19  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(inspector);
     20  const { highlighterTestFront } = inspector;
     21 
     22  await testZoomSize(highlighterTestFront, helper);
     23  await testGeometryBox(helper);
     24  await testStrokeBox(helper);
     25 
     26  await helper.finalize();
     27 });
     28 
     29 async function testZoomSize(highlighterTestFront, helper) {
     30  await helper.show("#polygon", { mode: "cssClipPath" });
     31  const quads = await getAllAdjustedQuadsForContentPageElement("#polygon");
     32  const { top, left, width, height } = quads.border[0].bounds;
     33  const expectedStyle = `top:${top}px;left:${left}px;width:${width}px;height:${height}px;`;
     34 
     35  // The top/left/width/height of the highlighter should not change at any zoom level.
     36  // It should always match the element being highlighted.
     37  for (const zoom of TEST_LEVELS) {
     38    info(`Setting zoom level to ${zoom}.`);
     39 
     40    const onHighlighterUpdated = highlighterTestFront.once(
     41      "highlighter-updated"
     42    );
     43    // we need to await here to ensure the event listener was registered.
     44    await highlighterTestFront.registerOneTimeHighlighterUpdate(helper.actorID);
     45 
     46    setContentPageZoomLevel(zoom);
     47    await onHighlighterUpdated;
     48    const style = await helper.getElementAttribute(
     49      "shapes-shape-container",
     50      "style"
     51    );
     52 
     53    is(
     54      style,
     55      expectedStyle,
     56      `Highlighter has correct quads at zoom level ${zoom}`
     57    );
     58  }
     59  // reset zoom
     60  setContentPageZoomLevel(1);
     61 }
     62 
     63 async function testGeometryBox(helper) {
     64  await helper.show("#ellipse", { mode: "cssClipPath" });
     65  let quads = await getAllAdjustedQuadsForContentPageElement("#ellipse");
     66  const {
     67    top: cTop,
     68    left: cLeft,
     69    width: cWidth,
     70    height: cHeight,
     71  } = quads.content[0].bounds;
     72  let expectedStyle =
     73    `top:${cTop}px;left:${cLeft}px;` + `width:${cWidth}px;height:${cHeight}px;`;
     74  let style = await helper.getElementAttribute(
     75    "shapes-shape-container",
     76    "style"
     77  );
     78  is(style, expectedStyle, "Highlighter has correct quads for content-box");
     79 
     80  await helper.show("#ellipse-padding-box", { mode: "cssClipPath" });
     81  quads = await getAllAdjustedQuadsForContentPageElement(
     82    "#ellipse-padding-box"
     83  );
     84  const {
     85    top: pTop,
     86    left: pLeft,
     87    width: pWidth,
     88    height: pHeight,
     89  } = quads.padding[0].bounds;
     90  expectedStyle =
     91    `top:${pTop}px;left:${pLeft}px;` + `width:${pWidth}px;height:${pHeight}px;`;
     92  style = await helper.getElementAttribute("shapes-shape-container", "style");
     93  is(style, expectedStyle, "Highlighter has correct quads for padding-box");
     94 }
     95 
     96 async function testStrokeBox(helper) {
     97  // #rect has a stroke and doesn't have the clip-path option stroke-box,
     98  // so we must adjust the quads to reflect the object bounding box.
     99  await helper.show("#rect", { mode: "cssClipPath" });
    100  const quads = await getAllAdjustedQuadsForContentPageElement("#rect");
    101  const { top, left, width, height } = quads.border[0].bounds;
    102  const { highlightedNode } = helper;
    103  const computedStyle = await highlightedNode.getComputedStyle();
    104  const strokeWidth = computedStyle["stroke-width"].value;
    105  const delta = parseFloat(strokeWidth) / 2;
    106 
    107  const expectedStyle =
    108    `top:${top + delta}px;left:${left + delta}px;` +
    109    `width:${width - 2 * delta}px;height:${height - 2 * delta}px;`;
    110  const style = await helper.getElementAttribute(
    111    "shapes-shape-container",
    112    "style"
    113  );
    114  is(
    115    style,
    116    expectedStyle,
    117    "Highlighter has correct quads for SVG rect with stroke and stroke-box"
    118  );
    119 }