tor-browser

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

browser_boxmodel_editablemodel_bluronclick.js (2904B)

      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 inplace editors can be blurred by clicking outside of the editor.
      7 
      8 const TEST_URI = `<style>
      9    #div1 {
     10      margin: 10px;
     11      padding: 3px;
     12    }
     13  </style>
     14  <div id="div1"></div>`;
     15 
     16 add_task(async function () {
     17  // Make sure the toolbox is tall enough to have empty space below the
     18  // boxmodel-container.
     19  await pushPref("devtools.toolbox.footer.height", 500);
     20 
     21  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
     22  const { inspector, boxmodel } = await openLayoutView();
     23 
     24  await selectNode("#div1", inspector);
     25  await testClickingOutsideEditor(boxmodel);
     26  await testClickingBelowContainer(boxmodel);
     27 });
     28 
     29 async function testClickingOutsideEditor(boxmodel) {
     30  info("Test that clicking outside the editor blurs it");
     31  const span = boxmodel.document.querySelector(
     32    ".boxmodel-margin.boxmodel-top > span"
     33  );
     34  await waitForElementTextContent(span, "10");
     35 
     36  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
     37  const editor = boxmodel.document.querySelector(
     38    ".styleinspector-propertyeditor"
     39  );
     40  ok(editor, "Should have opened the editor.");
     41 
     42  info("Click next to the opened editor input.");
     43  const onBlur = once(editor, "blur");
     44  const rect = editor.getBoundingClientRect();
     45  EventUtils.synthesizeMouse(
     46    editor,
     47    rect.width + 10,
     48    rect.height / 2,
     49    {},
     50    boxmodel.document.defaultView
     51  );
     52  await onBlur;
     53 
     54  is(
     55    boxmodel.document.querySelector(".styleinspector-propertyeditor"),
     56    null,
     57    "Inplace editor has been removed."
     58  );
     59 }
     60 
     61 async function testClickingBelowContainer(boxmodel) {
     62  info("Test that clicking below the box-model container blurs it");
     63  const span = boxmodel.document.querySelector(
     64    ".boxmodel-margin.boxmodel-top > span"
     65  );
     66  await waitForElementTextContent(span, "10");
     67 
     68  info(
     69    "Test that clicking below the boxmodel-container blurs the opened editor"
     70  );
     71  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
     72  const editor = boxmodel.document.querySelector(
     73    ".styleinspector-propertyeditor"
     74  );
     75  ok(editor, "Should have opened the editor.");
     76 
     77  const onBlur = once(editor, "blur");
     78  const container = boxmodel.document.querySelector(".boxmodel-container");
     79  // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
     80  // use an erroneous height of ~50px for the boxmodel-container.
     81  const bounds = container
     82    .getBoxQuads({ relativeTo: boxmodel.document })[0]
     83    .getBounds();
     84  EventUtils.synthesizeMouseAtPoint(
     85    bounds.left + 10,
     86    bounds.top + bounds.height + 10,
     87    {},
     88    boxmodel.document.defaultView
     89  );
     90  await onBlur;
     91 
     92  is(
     93    boxmodel.document.querySelector(".styleinspector-propertyeditor"),
     94    null,
     95    "Inplace editor has been removed."
     96  );
     97 }