tor-browser

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

browser_boxmodel_editablemodel_stylerules.js (4728B)

      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 units are displayed correctly when editing values in the box model
      7 // and that values are retrieved and parsed correctly from the back-end
      8 
      9 const TEST_URI =
     10  "<style>" +
     11  "div { margin: 10px; padding: 3px }" +
     12  "#div1 { margin-top: 5px }" +
     13  "#div2 { border-bottom: 1em solid black; }" +
     14  "#div3 { padding: 2em; }" +
     15  "</style>" +
     16  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
     17 
     18 add_task(async function () {
     19  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
     20  const browser = tab.linkedBrowser;
     21  const { inspector, boxmodel } = await openLayoutView();
     22 
     23  await testUnits(inspector, boxmodel, browser);
     24  await testValueComesFromStyleRule(inspector, boxmodel, browser);
     25  await testShorthandsAreParsed(inspector, boxmodel, browser);
     26 });
     27 
     28 async function testUnits(inspector, boxmodel, browser) {
     29  info("Test that entering units works");
     30 
     31  is(
     32    await getStyle(browser, "#div1", "padding-top"),
     33    "",
     34    "Should have the right padding"
     35  );
     36  await selectNode("#div1", inspector);
     37 
     38  const span = boxmodel.document.querySelector(
     39    ".boxmodel-padding.boxmodel-top > span"
     40  );
     41  await waitForElementTextContent(span, "3");
     42 
     43  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
     44  const editor = boxmodel.document.querySelector(
     45    ".styleinspector-propertyeditor"
     46  );
     47  ok(editor, "Should have opened the editor.");
     48  is(editor.value, "3px", "Should have the right value in the editor.");
     49 
     50  EventUtils.synthesizeKey("1", {}, boxmodel.document.defaultView);
     51  await waitForUpdate(inspector);
     52  EventUtils.synthesizeKey("e", {}, boxmodel.document.defaultView);
     53  await waitForUpdate(inspector);
     54 
     55  is(
     56    await getStyle(browser, "#div1", "padding-top"),
     57    "",
     58    "An invalid value is handled cleanly"
     59  );
     60 
     61  EventUtils.synthesizeKey("m", {}, boxmodel.document.defaultView);
     62  await waitForUpdate(inspector);
     63 
     64  is(editor.value, "1em", "Should have the right value in the editor.");
     65  is(
     66    await getStyle(browser, "#div1", "padding-top"),
     67    "1em",
     68    "Should have updated the padding."
     69  );
     70 
     71  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
     72 
     73  is(
     74    await getStyle(browser, "#div1", "padding-top"),
     75    "1em",
     76    "Should be the right padding."
     77  );
     78  await waitForElementTextContent(span, "16");
     79 }
     80 
     81 async function testValueComesFromStyleRule(inspector, boxmodel, browser) {
     82  info("Test that we pick up the value from a higher style rule");
     83 
     84  is(
     85    await getStyle(browser, "#div2", "border-bottom-width"),
     86    "",
     87    "Should have the right border-bottom-width"
     88  );
     89  await selectNode("#div2", inspector);
     90 
     91  const span = boxmodel.document.querySelector(
     92    ".boxmodel-border.boxmodel-bottom > span"
     93  );
     94  await waitForElementTextContent(span, "16");
     95 
     96  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
     97  const editor = boxmodel.document.querySelector(
     98    ".styleinspector-propertyeditor"
     99  );
    100  ok(editor, "Should have opened the editor.");
    101  is(editor.value, "1em", "Should have the right value in the editor.");
    102 
    103  EventUtils.synthesizeKey("0", {}, boxmodel.document.defaultView);
    104  await waitForUpdate(inspector);
    105 
    106  is(editor.value, "0", "Should have the right value in the editor.");
    107  is(
    108    await getStyle(browser, "#div2", "border-bottom-width"),
    109    "0px",
    110    "Should have updated the border."
    111  );
    112 
    113  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
    114 
    115  is(
    116    await getStyle(browser, "#div2", "border-bottom-width"),
    117    "0px",
    118    "Should be the right border-bottom-width."
    119  );
    120  await waitForElementTextContent(span, "0");
    121 }
    122 
    123 async function testShorthandsAreParsed(inspector, boxmodel, browser) {
    124  info("Test that shorthand properties are parsed correctly");
    125 
    126  is(
    127    await getStyle(browser, "#div3", "padding-right"),
    128    "",
    129    "Should have the right padding"
    130  );
    131  await selectNode("#div3", inspector);
    132 
    133  const span = boxmodel.document.querySelector(
    134    ".boxmodel-padding.boxmodel-right > span"
    135  );
    136  await waitForElementTextContent(span, "32");
    137 
    138  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
    139  const editor = boxmodel.document.querySelector(
    140    ".styleinspector-propertyeditor"
    141  );
    142  ok(editor, "Should have opened the editor.");
    143  is(editor.value, "2em", "Should have the right value in the editor.");
    144 
    145  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
    146 
    147  is(
    148    await getStyle(browser, "#div3", "padding-right"),
    149    "",
    150    "Should be the right padding."
    151  );
    152  await waitForElementTextContent(span, "32");
    153 }