tor-browser

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

browser_boxmodel_editablemodel_pseudo.js (2168B)

      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 pseudo elements have no side effect on the box model widget for their
      7 // container. See bug 1350499.
      8 
      9 const TEST_URI = `<style>
     10    .test::before {
     11      content: 'before';
     12      margin-top: 5px;
     13      padding-top: 5px;
     14      width: 5px;
     15    }
     16  </style>
     17  <div style='width:200px;'>
     18    <div class=test></div>
     19  </div>`;
     20 
     21 add_task(async function () {
     22  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
     23  const { inspector, boxmodel } = await openLayoutView();
     24  const browser = tab.linkedBrowser;
     25 
     26  await selectNode(".test", inspector);
     27 
     28  // No margin-top defined.
     29  info("Test that margins are not impacted by a pseudo element");
     30  is(
     31    await getStyle(browser, ".test", "margin-top"),
     32    "",
     33    "margin-top is correct"
     34  );
     35  await checkValueInBoxModel(
     36    ".boxmodel-margin.boxmodel-top",
     37    "0",
     38    boxmodel.document
     39  );
     40 
     41  // No padding-top defined.
     42  info("Test that paddings are not impacted by a pseudo element");
     43  is(
     44    await getStyle(browser, ".test", "padding-top"),
     45    "",
     46    "padding-top is correct"
     47  );
     48  await checkValueInBoxModel(
     49    ".boxmodel-padding.boxmodel-top",
     50    "0",
     51    boxmodel.document
     52  );
     53 
     54  // Width should be driven by the parent div.
     55  info("Test that dimensions are not impacted by a pseudo element");
     56  is(await getStyle(browser, ".test", "width"), "", "width is correct");
     57  await checkValueInBoxModel(
     58    ".boxmodel-content.boxmodel-width",
     59    "200",
     60    boxmodel.document
     61  );
     62 });
     63 
     64 async function checkValueInBoxModel(selector, expectedValue, doc) {
     65  const span = doc.querySelector(selector + " > span");
     66  await waitForElementTextContent(span, expectedValue);
     67 
     68  EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
     69  const editor = doc.querySelector(".styleinspector-propertyeditor");
     70  ok(editor, "Should have opened the editor.");
     71  is(editor.value, expectedValue, "Should have the right value in the editor.");
     72 
     73  const onBlur = once(editor, "blur");
     74  EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
     75  await onBlur;
     76 }