tor-browser

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

browser_inplace-editor_maxwidth.js (3791B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 /* import-globals-from helper_inplace_editor.js */
      4 
      5 "use strict";
      6 
      7 loadHelperScript("helper_inplace_editor.js");
      8 
      9 const MAX_WIDTH = 300;
     10 const START_TEXT = "Start text";
     11 const LONG_TEXT =
     12  "I am a long text and I will not fit in a 300px container. " +
     13  "I expect the inplace editor to wrap over more than two lines.";
     14 
     15 // Test the inplace-editor behavior with a maxWidth configuration option
     16 // defined.
     17 
     18 add_task(async function () {
     19  await addTab("data:text/html;charset=utf-8,inplace editor max width tests");
     20  const { host, doc } = await createHost();
     21 
     22  info("Testing the maxWidth option in pixels, to precisely check the size");
     23  await new Promise(resolve => {
     24    createInplaceEditorAndClick(
     25      {
     26        multiline: true,
     27        maxWidth: MAX_WIDTH,
     28        start: testMaxWidth,
     29        done: resolve,
     30      },
     31      doc,
     32      START_TEXT
     33    );
     34  });
     35 
     36  host.destroy();
     37  gBrowser.removeCurrentTab();
     38 });
     39 
     40 const testMaxWidth = async function (editor) {
     41  is(editor.input.value, START_TEXT, "Span text content should be used");
     42  Assert.less(
     43    editor.input.offsetWidth,
     44    MAX_WIDTH,
     45    "Input width should be strictly smaller than MAX_WIDTH"
     46  );
     47  is(getLines(editor.input), 1, "Input should display 1 line of text");
     48 
     49  info("Check a text is on several lines if it does not fit MAX_WIDTH");
     50  for (const key of LONG_TEXT) {
     51    EventUtils.sendChar(key);
     52    checkScrollbars(editor.input);
     53  }
     54 
     55  is(editor.input.value, LONG_TEXT, "Long text should be the input value");
     56  is(
     57    editor.input.offsetWidth,
     58    MAX_WIDTH,
     59    "Input width should be the same as MAX_WIDTH"
     60  );
     61  is(getLines(editor.input), 3, "Input should display 3 lines of text");
     62  checkScrollbars(editor.input);
     63 
     64  info("Delete all characters on line 3.");
     65  while (getLines(editor.input) === 3) {
     66    EventUtils.sendKey("BACK_SPACE");
     67    checkScrollbars(editor.input);
     68  }
     69 
     70  is(
     71    editor.input.offsetWidth,
     72    MAX_WIDTH,
     73    "Input width should be the same as MAX_WIDTH"
     74  );
     75  is(getLines(editor.input), 2, "Input should display 2 lines of text");
     76  checkScrollbars(editor.input);
     77 
     78  info("Delete all characters on line 2.");
     79  while (getLines(editor.input) === 2) {
     80    EventUtils.sendKey("BACK_SPACE");
     81    checkScrollbars(editor.input);
     82  }
     83 
     84  is(getLines(editor.input), 1, "Input should display 1 line of text");
     85  checkScrollbars(editor.input);
     86 
     87  info("Delete all characters.");
     88  while (editor.input.value !== "") {
     89    EventUtils.sendKey("BACK_SPACE");
     90    checkScrollbars(editor.input);
     91  }
     92 
     93  Assert.less(
     94    editor.input.offsetWidth,
     95    MAX_WIDTH,
     96    "Input width should again be strictly smaller than MAX_WIDTH"
     97  );
     98  Assert.greater(
     99    editor.input.offsetWidth,
    100    0,
    101    "Even with no content, the input has a non-zero width"
    102  );
    103  is(getLines(editor.input), 1, "Input should display 1 line of text");
    104  checkScrollbars(editor.input);
    105 
    106  info("Leave the inplace-editor");
    107  EventUtils.sendKey("RETURN");
    108 };
    109 
    110 /**
    111 * Retrieve the current number of lines displayed in the provided textarea.
    112 *
    113 * @param {DOMNode} textarea
    114 * @return {number} the number of lines
    115 */
    116 function getLines(textarea) {
    117  const win = textarea.ownerDocument.defaultView;
    118  const style = win.getComputedStyle(textarea);
    119  return Math.floor(textarea.clientHeight / parseFloat(style.fontSize));
    120 }
    121 
    122 /**
    123 * Verify that the provided textarea has no vertical or horizontal scrollbar.
    124 *
    125 * @param {DOMNode} textarea
    126 */
    127 function checkScrollbars(textarea) {
    128  is(
    129    textarea.scrollHeight,
    130    textarea.clientHeight,
    131    "Textarea should never have vertical scrollbars"
    132  );
    133  is(
    134    textarea.scrollWidth,
    135    textarea.clientWidth,
    136    "Textarea should never have horizontal scrollbars"
    137  );
    138 }