tor-browser

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

browser_inspector_highlighter-geometry_01.js (3001B)

      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 the creation of the geometry highlighter elements.
      8 
      9 const TEST_URL = `data:text/html;charset=utf-8,
     10                  <span id='inline'></span>
     11                  <div id='positioned' style='
     12                    background:yellow;
     13                    position:absolute;
     14                    left:5rem;
     15                    top:30px;
     16                    right:300px;
     17                    bottom:10em;'></div>
     18                  <div id='sized' style='
     19                    background:red;
     20                    width:5em;
     21                    height:50%;'></div>`;
     22 
     23 const { TYPES } = ChromeUtils.importESModule(
     24  "resource://devtools/shared/highlighters.mjs"
     25 );
     26 const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
     27 
     28 const ID = "geometry-editor-";
     29 const SIDES = ["left", "right", "top", "bottom"];
     30 
     31 add_task(async function () {
     32  const helper = await openInspectorForURL(TEST_URL).then(
     33    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
     34  );
     35 
     36  const { finalize } = helper;
     37 
     38  helper.prefix = ID;
     39 
     40  await hasArrowsAndLabelsAndHandlers(helper);
     41  await isHiddenForNonPositionedNonSizedElement(helper);
     42  await sideArrowsAreDisplayedForPositionedNode(helper);
     43 
     44  finalize();
     45 });
     46 
     47 async function hasArrowsAndLabelsAndHandlers({ getElementAttribute }) {
     48  info("Checking that the highlighter has the expected arrows and labels");
     49 
     50  for (const name of [...SIDES]) {
     51    let value = await getElementAttribute("arrow-" + name, "class");
     52    is(value, ID + "arrow " + name, "The " + name + " arrow exists");
     53 
     54    value = await getElementAttribute("label-text-" + name, "class");
     55    is(value, ID + "label-text", "The " + name + " label exists");
     56 
     57    value = await getElementAttribute("handler-" + name, "class");
     58    is(value, ID + "handler-" + name, "The " + name + " handler exists");
     59  }
     60 }
     61 
     62 async function isHiddenForNonPositionedNonSizedElement({
     63  show,
     64  isElementHidden,
     65 }) {
     66  info("Asking to show the highlighter on an inline, non p  ositioned element");
     67 
     68  await show("#inline");
     69 
     70  for (const name of [...SIDES]) {
     71    let hidden = await isElementHidden("arrow-" + name);
     72    ok(hidden, "The " + name + " arrow is hidden");
     73 
     74    hidden = await isElementHidden("handler-" + name);
     75    ok(hidden, "The " + name + " handler is hidden");
     76  }
     77 }
     78 
     79 async function sideArrowsAreDisplayedForPositionedNode({
     80  show,
     81  hide,
     82  isElementHidden,
     83 }) {
     84  info("Asking to show the highlighter on the positioned node");
     85 
     86  await show("#positioned");
     87 
     88  for (const name of SIDES) {
     89    let hidden = await isElementHidden("arrow-" + name);
     90    ok(!hidden, "The " + name + " arrow is visible for the positioned node");
     91 
     92    hidden = await isElementHidden("handler-" + name);
     93    ok(!hidden, "The " + name + " handler is visible for the positioned node");
     94  }
     95 
     96  info("Hiding the highlighter");
     97  await hide();
     98 }