tor-browser

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

browser_inspector_highlighter-cssshape_06-translate.js (4569B)

      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 shapes are updated correctly on mouse events in transform mode.
      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 const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
     15 
     16 add_task(async function () {
     17  const env = await openInspectorForURL(TEST_URL);
     18  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
     19  const { highlighterTestFront, inspector } = env;
     20  const view = selectRuleView(inspector);
     21  const highlighters = view.highlighters;
     22  const config = {
     23    inspector,
     24    view,
     25    highlighters,
     26    highlighterTestFront,
     27    helper,
     28  };
     29 
     30  await testTranslate(config);
     31 });
     32 
     33 async function setup(config) {
     34  const { inspector, view, selector, property, options } = config;
     35  await selectNode(selector, inspector);
     36  await toggleShapesHighlighter(view, selector, property, true, options);
     37 }
     38 
     39 async function teardown(config) {
     40  const { view, selector, property } = config;
     41  info(`Turn off shapes highlighter for ${selector}`);
     42  await toggleShapesHighlighter(view, selector, property, false);
     43 }
     44 
     45 async function testTranslate(config) {
     46  const { helper, highlighters } = config;
     47  const options = { transformMode: true };
     48  const property = "clip-path";
     49 
     50  for (const selector of SHAPE_SELECTORS) {
     51    await setup({ selector, property, options, ...config });
     52    const { mouse } = helper;
     53 
     54    const { center, width, height } = await getBoundingBoxInPx({
     55      selector,
     56      ...config,
     57    });
     58    const [x, y] = center;
     59    const dx = width / 10;
     60    const dy = height / 10;
     61    let onShapeChangeApplied;
     62 
     63    info(`Translating ${selector}`);
     64    onShapeChangeApplied = highlighters.once(
     65      "shapes-highlighter-changes-applied"
     66    );
     67    await mouse.down(x, y, selector);
     68    await mouse.move(x + dx, y + dy, selector);
     69    await mouse.up(x + dx, y + dy, selector);
     70    await reflowContentPage();
     71    await onShapeChangeApplied;
     72 
     73    let newBB = await getBoundingBoxInPx({ selector, ...config });
     74    isnot(newBB.center[0], x, `${selector} translated on y axis`);
     75    isnot(newBB.center[1], y, `${selector} translated on x axis`);
     76 
     77    info(`Translating ${selector} back`);
     78    onShapeChangeApplied = highlighters.once(
     79      "shapes-highlighter-changes-applied"
     80    );
     81    await mouse.down(x + dx, y + dy, selector);
     82    await mouse.move(x, y, selector);
     83    await mouse.up(x, y, selector);
     84    await reflowContentPage();
     85    await onShapeChangeApplied;
     86 
     87    newBB = await getBoundingBoxInPx({ selector, ...config });
     88    is(newBB.center[0], x, `${selector} translated back on x axis`);
     89    is(newBB.center[1], y, `${selector} translated back on y axis`);
     90 
     91    await teardown({ selector, property, ...config });
     92  }
     93 }
     94 
     95 async function getBoundingBoxInPx(config) {
     96  const { highlighterTestFront, selector, inspector } = config;
     97  const quads = await getAllAdjustedQuadsForContentPageElement(selector);
     98  const { width, height } = quads.content[0].bounds;
     99  const highlightedNode = await getNodeFront(selector, inspector);
    100  const highlighterFront =
    101    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE);
    102  const computedStyle =
    103    await highlightedNode.inspectorFront.pageStyle.getComputed(highlightedNode);
    104  const paddingTop = parseFloat(computedStyle["padding-top"].value);
    105  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
    106  // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers
    107  const path = await highlighterTestFront.getHighlighterNodeAttribute(
    108    "shapes-bounding-box",
    109    "d",
    110    highlighterFront
    111  );
    112  const coords = path
    113    .replace(/[MLZ]/g, "")
    114    .split(" ")
    115    .map((n, i) => {
    116      return i % 2 === 0
    117        ? paddingLeft + (width * n) / 100
    118        : paddingTop + (height * n) / 100;
    119    });
    120 
    121  const nw = [coords[0], coords[1]];
    122  const ne = [coords[2], coords[3]];
    123  const se = [coords[4], coords[5]];
    124  const sw = [coords[6], coords[7]];
    125  const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2];
    126  const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2);
    127  const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2);
    128 
    129  return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight };
    130 }