tor-browser

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

browser_inspector_highlighter-geometry_02.js (3706B)

      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 /* Globals defined in: devtools/client/inspector/test/head.js */
      6 
      7 "use strict";
      8 
      9 // Test that the geometry highlighter labels are correct.
     10 
     11 const TEST_URL = `data:text/html;charset=utf-8,
     12                  <div id='positioned' style='
     13                    background:yellow;
     14                    position:absolute;
     15                    left:5rem;
     16                    top:30px;
     17                    right:300px;
     18                    bottom:10em;'></div>
     19                  <div id='positioned2' style='
     20                    background:blue;
     21                    position:absolute;
     22                    right:10%;
     23                    top:5vmin;'>test element</div>
     24                 <div id='relative' style='
     25                    background:green;
     26                    position:relative;
     27                    top:10px;
     28                    left:20px;
     29                    bottom:30px;
     30                    right:40px;
     31                    width:100px;
     32                    height:100px;'></div>
     33                 <div id='relative2' style='
     34                    background:grey;
     35                    position:relative;
     36                    top:0;bottom:-50px;
     37                    height:3em;'>relative</div>`;
     38 
     39 const ID = "geometry-editor-";
     40 const { TYPES } = ChromeUtils.importESModule(
     41  "resource://devtools/shared/highlighters.mjs"
     42 );
     43 const HIGHLIGHTER_TYPE = TYPES.GEOMETRY;
     44 
     45 const POSITIONED_ELEMENT_TESTS = [
     46  {
     47    selector: "#positioned",
     48    expectedLabels: [
     49      { side: "left", visible: true, label: "5rem" },
     50      { side: "top", visible: true, label: "30px" },
     51      { side: "right", visible: true, label: "300px" },
     52      { side: "bottom", visible: true, label: "10em" },
     53    ],
     54  },
     55  {
     56    selector: "#positioned2",
     57    expectedLabels: [
     58      { side: "left", visible: false },
     59      { side: "top", visible: true, label: "5vmin" },
     60      { side: "right", visible: true, label: "10%" },
     61      { side: "bottom", visible: false },
     62    ],
     63  },
     64  {
     65    selector: "#relative",
     66    expectedLabels: [
     67      { side: "left", visible: true, label: "20px" },
     68      { side: "top", visible: true, label: "10px" },
     69      { side: "right", visible: false },
     70      { side: "bottom", visible: false },
     71    ],
     72  },
     73  {
     74    selector: "#relative2",
     75    expectedLabels: [
     76      { side: "left", visible: false },
     77      { side: "top", visible: true, label: "0px" },
     78      { side: "right", visible: false },
     79      { side: "bottom", visible: false },
     80    ],
     81  },
     82 ];
     83 
     84 add_task(async function () {
     85  const helper = await openInspectorForURL(TEST_URL).then(
     86    getHighlighterHelperFor(HIGHLIGHTER_TYPE)
     87  );
     88 
     89  helper.prefix = ID;
     90 
     91  const { finalize } = helper;
     92 
     93  await positionLabelsAreCorrect(helper);
     94 
     95  await finalize();
     96 });
     97 
     98 async function positionLabelsAreCorrect({
     99  show,
    100  hide,
    101  isElementHidden,
    102  getElementTextContent,
    103 }) {
    104  info("Highlight nodes and check position labels");
    105 
    106  for (const { selector, expectedLabels } of POSITIONED_ELEMENT_TESTS) {
    107    info("Testing node " + selector);
    108 
    109    await show(selector);
    110 
    111    for (const { side, visible, label } of expectedLabels) {
    112      const id = "label-" + side;
    113 
    114      const hidden = await isElementHidden(id);
    115      if (visible) {
    116        ok(!hidden, "The " + side + " label is visible");
    117 
    118        const value = await getElementTextContent(id);
    119        is(value, label, "The " + side + " label textcontent is correct");
    120      } else {
    121        ok(hidden, "The " + side + " label is hidden");
    122      }
    123    }
    124 
    125    info("Hiding the highlighter");
    126    await hide();
    127  }
    128 }