tor-browser

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

browser_boxmodel_editablemodel.js (8575B)

      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 editing the box-model values works as expected and test various
      7 // key bindings
      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  "#div4 { margin: 1px; }" +
     16  "</style>" +
     17  "<div id='div1'></div><div id='div2'></div>" +
     18  "<div id='div3'></div><div id='div4'></div>";
     19 
     20 add_task(async function () {
     21  // Make sure the toolbox is tall enough to have empty space below the
     22  // boxmodel-container.
     23  await pushPref("devtools.toolbox.footer.height", 500);
     24 
     25  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
     26  const { inspector, boxmodel } = await openLayoutView();
     27 
     28  const browser = tab.linkedBrowser;
     29  await testEditingMargins(inspector, boxmodel, browser);
     30  await testKeyBindings(inspector, boxmodel, browser);
     31  await testEscapeToUndo(inspector, boxmodel, browser);
     32  await testDeletingValue(inspector, boxmodel, browser);
     33  await testRefocusingOnClick(inspector, boxmodel, browser);
     34 });
     35 
     36 async function testEditingMargins(inspector, boxmodel, browser) {
     37  info(
     38    "Test that editing margin dynamically updates the document, pressing " +
     39      "escape cancels the changes"
     40  );
     41 
     42  is(
     43    await getStyle(browser, "#div1", "margin-top"),
     44    "",
     45    "Should be no margin-top on the element."
     46  );
     47  await selectNode("#div1", inspector);
     48 
     49  const span = boxmodel.document.querySelector(
     50    ".boxmodel-margin.boxmodel-top > span"
     51  );
     52  await waitForElementTextContent(span, "5");
     53 
     54  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
     55  const editor = boxmodel.document.querySelector(
     56    ".styleinspector-propertyeditor"
     57  );
     58  ok(editor, "Should have opened the editor.");
     59  is(editor.value, "5px", "Should have the right value in the editor.");
     60 
     61  EventUtils.synthesizeKey("3", {}, boxmodel.document.defaultView);
     62  await waitForUpdate(inspector);
     63 
     64  is(
     65    await getStyle(browser, "#div1", "margin-top"),
     66    "3px",
     67    "Should have updated the margin."
     68  );
     69 
     70  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
     71  await waitForUpdate(inspector);
     72 
     73  is(
     74    await getStyle(browser, "#div1", "margin-top"),
     75    "",
     76    "Should be no margin-top on the element."
     77  );
     78 
     79  await waitForElementTextContent(span, "5");
     80 }
     81 
     82 async function testKeyBindings(inspector, boxmodel, browser) {
     83  info(
     84    "Test that arrow keys work correctly and pressing enter commits the " +
     85      "changes"
     86  );
     87 
     88  is(
     89    await getStyle(browser, "#div1", "margin-left"),
     90    "",
     91    "Should be no margin-top on the element."
     92  );
     93  await selectNode("#div1", inspector);
     94 
     95  const span = boxmodel.document.querySelector(
     96    ".boxmodel-margin.boxmodel-left > span"
     97  );
     98  is(span.textContent, "10", "Should have the right value in the box model.");
     99 
    100  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
    101  const editor = boxmodel.document.querySelector(
    102    ".styleinspector-propertyeditor"
    103  );
    104  ok(editor, "Should have opened the editor.");
    105  is(editor.value, "10px", "Should have the right value in the editor.");
    106 
    107  EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
    108  await waitForUpdate(inspector);
    109 
    110  is(editor.value, "11px", "Should have the right value in the editor.");
    111  is(
    112    await getStyle(browser, "#div1", "margin-left"),
    113    "11px",
    114    "Should have updated the margin."
    115  );
    116 
    117  EventUtils.synthesizeKey("VK_DOWN", {}, boxmodel.document.defaultView);
    118  await waitForUpdate(inspector);
    119 
    120  is(editor.value, "10px", "Should have the right value in the editor.");
    121  is(
    122    await getStyle(browser, "#div1", "margin-left"),
    123    "10px",
    124    "Should have updated the margin."
    125  );
    126 
    127  EventUtils.synthesizeKey(
    128    "VK_UP",
    129    { shiftKey: true },
    130    boxmodel.document.defaultView
    131  );
    132  await waitForUpdate(inspector);
    133 
    134  is(editor.value, "20px", "Should have the right value in the editor.");
    135  is(
    136    await getStyle(browser, "#div1", "margin-left"),
    137    "20px",
    138    "Should have updated the margin."
    139  );
    140  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
    141 
    142  is(
    143    await getStyle(browser, "#div1", "margin-left"),
    144    "20px",
    145    "Should be the right margin-top on the element."
    146  );
    147 
    148  await waitForElementTextContent(span, "20");
    149 }
    150 
    151 async function testEscapeToUndo(inspector, boxmodel, browser) {
    152  info(
    153    "Test that deleting the value removes the property but escape undoes " +
    154      "that"
    155  );
    156 
    157  is(
    158    await getStyle(browser, "#div1", "margin-left"),
    159    "20px",
    160    "Should be the right margin-top on the element."
    161  );
    162  await selectNode("#div1", inspector);
    163 
    164  const span = boxmodel.document.querySelector(
    165    ".boxmodel-margin.boxmodel-left > span"
    166  );
    167  is(span.textContent, "20", "Should have the right value in the box model.");
    168 
    169  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
    170  const editor = boxmodel.document.querySelector(
    171    ".styleinspector-propertyeditor"
    172  );
    173  ok(editor, "Should have opened the editor.");
    174  is(editor.value, "20px", "Should have the right value in the editor.");
    175 
    176  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
    177  await waitForUpdate(inspector);
    178 
    179  is(editor.value, "", "Should have the right value in the editor.");
    180  is(
    181    await getStyle(browser, "#div1", "margin-left"),
    182    "",
    183    "Should have updated the margin."
    184  );
    185 
    186  EventUtils.synthesizeKey("VK_ESCAPE", {}, boxmodel.document.defaultView);
    187  await waitForUpdate(inspector);
    188 
    189  is(
    190    await getStyle(browser, "#div1", "margin-left"),
    191    "20px",
    192    "Should be the right margin-top on the element."
    193  );
    194  is(span.textContent, "20", "Should have the right value in the box model.");
    195 }
    196 
    197 async function testDeletingValue(inspector, boxmodel, browser) {
    198  info("Test that deleting the value removes the property");
    199 
    200  await setStyle(browser, "#div1", "marginRight", "15px");
    201  await waitForUpdate(inspector);
    202 
    203  await selectNode("#div1", inspector);
    204 
    205  const span = boxmodel.document.querySelector(
    206    ".boxmodel-margin.boxmodel-right > span"
    207  );
    208  is(span.textContent, "15", "Should have the right value in the box model.");
    209 
    210  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
    211  const editor = boxmodel.document.querySelector(
    212    ".styleinspector-propertyeditor"
    213  );
    214  ok(editor, "Should have opened the editor.");
    215  is(editor.value, "15px", "Should have the right value in the editor.");
    216 
    217  EventUtils.synthesizeKey("VK_DELETE", {}, boxmodel.document.defaultView);
    218  await waitForUpdate(inspector);
    219 
    220  is(editor.value, "", "Should have the right value in the editor.");
    221  is(
    222    await getStyle(browser, "#div1", "margin-right"),
    223    "",
    224    "Should have updated the margin."
    225  );
    226 
    227  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
    228 
    229  is(
    230    await getStyle(browser, "#div1", "margin-right"),
    231    "",
    232    "Should be the right margin-top on the element."
    233  );
    234  await waitForElementTextContent(span, "10");
    235 }
    236 
    237 async function testRefocusingOnClick(inspector, boxmodel, browser) {
    238  info("Test that clicking in the editor input does not remove focus");
    239 
    240  await selectNode("#div4", inspector);
    241 
    242  const span = boxmodel.document.querySelector(
    243    ".boxmodel-margin.boxmodel-top > span"
    244  );
    245  is(span.textContent, "1", "Should have the right value in the box model.");
    246 
    247  EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
    248  const editor = boxmodel.document.querySelector(
    249    ".styleinspector-propertyeditor"
    250  );
    251  ok(editor, "Should have opened the editor.");
    252 
    253  info("Click in the already opened editor input");
    254  EventUtils.synthesizeMouseAtCenter(editor, {}, boxmodel.document.defaultView);
    255  is(
    256    editor,
    257    boxmodel.document.activeElement,
    258    "Inplace editor input should still have focus."
    259  );
    260 
    261  info("Check the input can still be used as expected");
    262  EventUtils.synthesizeKey("VK_UP", {}, boxmodel.document.defaultView);
    263  await waitForUpdate(inspector);
    264 
    265  is(editor.value, "2px", "Should have the right value in the editor.");
    266  is(
    267    await getStyle(browser, "#div4", "margin-top"),
    268    "2px",
    269    "Should have updated the margin."
    270  );
    271  EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView);
    272 
    273  is(
    274    await getStyle(browser, "#div4", "margin-top"),
    275    "2px",
    276    "Should be the right margin-top on the element."
    277  );
    278  await waitForElementTextContent(span, "2");
    279 }