tor-browser

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

browser_inspector_highlighter-cssshape_percent.js (3296B)

      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 inset() highlighter displays correctly when using pixels
      8 // on top of screen %.
      9 
     10 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes-percent.html";
     11 const { TYPES } = ChromeUtils.importESModule(
     12  "resource://devtools/shared/highlighters.mjs"
     13 );
     14 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     15 
     16 add_task(async function () {
     17  const { inspector, highlighterTestFront } =
     18    await openInspectorForURL(TEST_URL);
     19  const front = inspector.inspectorFront;
     20  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
     21 
     22  await insetHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
     23 
     24  await highlighter.finalize();
     25 });
     26 
     27 async function insetHasCorrectAttrs(
     28  highlighterTestFront,
     29  inspector,
     30  highlighterFront
     31 ) {
     32  info("Testing inset() editor using pixels on page %");
     33 
     34  const top = 10;
     35  const right = 20;
     36  const bottom = 30;
     37  const left = 40;
     38 
     39  // Set the clip-path property
     40  await SpecialPowers.spawn(
     41    gBrowser.selectedBrowser,
     42    [top, right, bottom, left],
     43    (t, r, b, l) => {
     44      content.document.querySelector("#inset").style.clipPath =
     45        `inset(${t}px ${r}px ${b}px ${l}px)`;
     46    }
     47  );
     48 
     49  // Get width and height of page
     50  const { innerWidth, innerHeight } = await SpecialPowers.spawn(
     51    gBrowser.selectedBrowser,
     52    [],
     53    () => {
     54      return {
     55        innerWidth: content.innerWidth,
     56        innerHeight: content.innerHeight,
     57      };
     58    }
     59  );
     60 
     61  const insetNode = await getNodeFront("#inset", inspector);
     62  await highlighterFront.show(insetNode, { mode: "cssClipPath" });
     63 
     64  const x = parseFloat(
     65    await highlighterTestFront.getHighlighterNodeAttribute(
     66      "shapes-rect",
     67      "x",
     68      highlighterFront
     69    )
     70  );
     71  const y = parseFloat(
     72    await highlighterTestFront.getHighlighterNodeAttribute(
     73      "shapes-rect",
     74      "y",
     75      highlighterFront
     76    )
     77  );
     78  const width = parseFloat(
     79    await highlighterTestFront.getHighlighterNodeAttribute(
     80      "shapes-rect",
     81      "width",
     82      highlighterFront
     83    )
     84  );
     85  const height = parseFloat(
     86    await highlighterTestFront.getHighlighterNodeAttribute(
     87      "shapes-rect",
     88      "height",
     89      highlighterFront
     90    )
     91  );
     92 
     93  // Convert pixels to screen percentage
     94  const expectedX = (left / innerWidth) * 100;
     95  const expectedY = (top / innerHeight) * 100;
     96  const expectedWidth = ((innerWidth - (left + right)) / innerWidth) * 100;
     97  const expectedHeight = ((innerHeight - (top + bottom)) / innerHeight) * 100;
     98 
     99  ok(
    100    floatEq(x, expectedX),
    101    `Rect highlighter has correct x (got ${x}, expected ${expectedX})`
    102  );
    103  ok(
    104    floatEq(y, expectedY),
    105    `Rect highlighter has correct y (got ${y}, expected ${expectedY})`
    106  );
    107  ok(
    108    floatEq(width, expectedWidth),
    109    `Rect highlighter has correct width (got ${width}, expected ${expectedWidth})`
    110  );
    111  ok(
    112    floatEq(height, expectedHeight),
    113    `Rect highlighter has correct height (got ${height}, expected ${expectedHeight})`
    114  );
    115 }
    116 
    117 /**
    118 * Compare two floats with a tolerance of 0.1
    119 */
    120 function floatEq(f1, f2) {
    121  return Math.abs(f1 - f2) < 0.1;
    122 }