devtools/client/shared/test/browser_inplace-editor_maxwidth.js

   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 }