tor-browser

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

browser_inspector_highlighter-cssshape_02.js (4755B)

      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 attributes.
      8 
      9 const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
     10 const { TYPES } = ChromeUtils.importESModule(
     11  "resource://devtools/shared/highlighters.mjs"
     12 );
     13 const HIGHLIGHTER_TYPE = TYPES.SHAPES;
     14 
     15 add_task(async function () {
     16  const { inspector, highlighterTestFront } =
     17    await openInspectorForURL(TEST_URL);
     18  const front = inspector.inspectorFront;
     19  const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
     20 
     21  await polygonHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
     22  await circleHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
     23  await ellipseHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
     24  await insetHasCorrectAttrs(highlighterTestFront, inspector, highlighter);
     25 
     26  await highlighter.finalize();
     27 });
     28 
     29 async function polygonHasCorrectAttrs(
     30  highlighterTestFront,
     31  inspector,
     32  highlighterFront
     33 ) {
     34  info("Checking polygon highlighter has correct points");
     35 
     36  const polygonNode = await getNodeFront("#polygon", inspector);
     37  await highlighterFront.show(polygonNode, { mode: "cssClipPath" });
     38 
     39  const points = await highlighterTestFront.getHighlighterNodeAttribute(
     40    "shapes-polygon",
     41    "points",
     42    highlighterFront
     43  );
     44  const realPoints =
     45    "0,0 12.5,50 25,0 37.5,50 50,0 62.5,50 " +
     46    "75,0 87.5,50 100,0 90,100 50,60 10,100";
     47  is(points, realPoints, "Polygon highlighter has correct points");
     48 }
     49 
     50 async function circleHasCorrectAttrs(
     51  highlighterTestFront,
     52  inspector,
     53  highlighterFront
     54 ) {
     55  info("Checking circle highlighter has correct attributes");
     56 
     57  const circleNode = await getNodeFront("#circle", inspector);
     58  await highlighterFront.show(circleNode, { mode: "cssClipPath" });
     59 
     60  const rx = await highlighterTestFront.getHighlighterNodeAttribute(
     61    "shapes-ellipse",
     62    "rx",
     63    highlighterFront
     64  );
     65  const ry = await highlighterTestFront.getHighlighterNodeAttribute(
     66    "shapes-ellipse",
     67    "ry",
     68    highlighterFront
     69  );
     70  const cx = await highlighterTestFront.getHighlighterNodeAttribute(
     71    "shapes-ellipse",
     72    "cx",
     73    highlighterFront
     74  );
     75  const cy = await highlighterTestFront.getHighlighterNodeAttribute(
     76    "shapes-ellipse",
     77    "cy",
     78    highlighterFront
     79  );
     80 
     81  is(rx, "25", "Circle highlighter has correct rx");
     82  is(ry, "25", "Circle highlighter has correct ry");
     83  is(cx, "30", "Circle highlighter has correct cx");
     84  is(cy, "40", "Circle highlighter has correct cy");
     85 }
     86 
     87 async function ellipseHasCorrectAttrs(
     88  highlighterTestFront,
     89  inspector,
     90  highlighterFront
     91 ) {
     92  info("Checking ellipse highlighter has correct attributes");
     93 
     94  const ellipseNode = await getNodeFront("#ellipse", inspector);
     95  await highlighterFront.show(ellipseNode, { mode: "cssClipPath" });
     96 
     97  const rx = await highlighterTestFront.getHighlighterNodeAttribute(
     98    "shapes-ellipse",
     99    "rx",
    100    highlighterFront
    101  );
    102  const ry = await highlighterTestFront.getHighlighterNodeAttribute(
    103    "shapes-ellipse",
    104    "ry",
    105    highlighterFront
    106  );
    107  const cx = await highlighterTestFront.getHighlighterNodeAttribute(
    108    "shapes-ellipse",
    109    "cx",
    110    highlighterFront
    111  );
    112  const cy = await highlighterTestFront.getHighlighterNodeAttribute(
    113    "shapes-ellipse",
    114    "cy",
    115    highlighterFront
    116  );
    117 
    118  is(rx, "40", "Ellipse highlighter has correct rx");
    119  is(ry, "30", "Ellipse highlighter has correct ry");
    120  is(cx, "25", "Ellipse highlighter has correct cx");
    121  is(cy, "30", "Ellipse highlighter has correct cy");
    122 }
    123 
    124 async function insetHasCorrectAttrs(
    125  highlighterTestFront,
    126  inspector,
    127  highlighterFront
    128 ) {
    129  info("Checking rect highlighter has correct attributes");
    130 
    131  const insetNode = await getNodeFront("#inset", inspector);
    132  await highlighterFront.show(insetNode, { mode: "cssClipPath" });
    133 
    134  const x = await highlighterTestFront.getHighlighterNodeAttribute(
    135    "shapes-rect",
    136    "x",
    137    highlighterFront
    138  );
    139  const y = await highlighterTestFront.getHighlighterNodeAttribute(
    140    "shapes-rect",
    141    "y",
    142    highlighterFront
    143  );
    144  const width = await highlighterTestFront.getHighlighterNodeAttribute(
    145    "shapes-rect",
    146    "width",
    147    highlighterFront
    148  );
    149  const height = await highlighterTestFront.getHighlighterNodeAttribute(
    150    "shapes-rect",
    151    "height",
    152    highlighterFront
    153  );
    154 
    155  is(x, "15", "Rect highlighter has correct x");
    156  is(y, "25", "Rect highlighter has correct y");
    157  is(width, "72.5", "Rect highlighter has correct width");
    158  is(height, "45", "Rect highlighter has correct height");
    159 }