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