tor-browser

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

browser_boxmodel_guides.js (2347B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that hovering over regions in the box-model shows the highlighter with
      7 // the right options.
      8 // Tests that actually check the highlighter is displayed and correct are in the
      9 // devtools/inspector/test folder. This test only cares about checking that the
     10 // box model view does call the highlighter, and it does so by mocking it.
     11 
     12 const STYLE =
     13  "div { position: absolute; top: 50px; left: 50px; " +
     14  "height: 10px; width: 10px; border: 10px solid black; " +
     15  "padding: 10px; margin: 10px;}";
     16 const HTML = "<style>" + STYLE + "</style><div></div>";
     17 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
     18 
     19 add_task(async function () {
     20  await addTab(TEST_URL);
     21  const { inspector, boxmodel } = await openLayoutView();
     22  await selectNode("div", inspector);
     23 
     24  let elt = boxmodel.document.querySelector(".boxmodel-margins");
     25  await testGuideOnLayoutHover(elt, "margin", inspector);
     26 
     27  elt = boxmodel.document.querySelector(".boxmodel-borders");
     28  await testGuideOnLayoutHover(elt, "border", inspector);
     29 
     30  elt = boxmodel.document.querySelector(".boxmodel-paddings");
     31  await testGuideOnLayoutHover(elt, "padding", inspector);
     32 
     33  elt = boxmodel.document.querySelector(".boxmodel-content");
     34  await testGuideOnLayoutHover(elt, "content", inspector);
     35 });
     36 
     37 async function testGuideOnLayoutHover(elt, expectedRegion, inspector) {
     38  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
     39  const onHighlighterShown = waitForHighlighterTypeShown(
     40    inspector.highlighters.TYPES.BOXMODEL
     41  );
     42 
     43  info("Synthesizing mouseover on the boxmodel-view");
     44  EventUtils.synthesizeMouse(
     45    elt,
     46    50,
     47    2,
     48    { type: "mouseover" },
     49    elt.ownerDocument.defaultView
     50  );
     51 
     52  info("Waiting for the node-highlight event from the toolbox");
     53  const { nodeFront, options } = await onHighlighterShown;
     54 
     55  // Wait for the next event tick to make sure the remaining part of the
     56  // test is executed after finishing synthesizing mouse event.
     57  await new Promise(executeSoon);
     58 
     59  is(
     60    nodeFront,
     61    inspector.selection.nodeFront,
     62    "The right nodeFront was highlighted"
     63  );
     64  is(
     65    options.region,
     66    expectedRegion,
     67    "Region " + expectedRegion + " was highlighted"
     68  );
     69 }