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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
</head>
<body>
<span id="text" style="font-size: 40px;">Some Text</span>
<input id="input" value="Drag Me">
<textarea id="textarea">Some Text To Drag</textarea>
<p id="contenteditable" contenteditable="true">This is some <b id="bold">editable</b> text.</p>
<p id="nestedce" contenteditable="true"><span id="first"> </span>First letter <span id="noneditable" contenteditable="false">Middle</span> Last part</p>
<script type="application/javascript">
SimpleTest.waitForExplicitFinish();
// This listener allows us to clear the default data for the selection added for the drag.
var shouldClear = false;
window.addEventListener("dragstart", function (event) { if (shouldClear) event.dataTransfer.clearData() }, true);
function doTest()
{
const htmlContextData = { type: 'text/_moz_htmlcontext',
data: '<html><body></body></html>' };
const htmlInfoData = { type: 'text/_moz_htmlinfo', data: '0,0' };
const htmlData = { type: 'text/html', data: '<span id="text" style="font-size: 40px;">Some Text</span>' };
const htmlContextDataEditable = { type: 'text/_moz_htmlcontext',
data: '<html><body><p id="contenteditable" contenteditable="true"></p></body></html>' };
var text = document.getElementById("text");
var input = document.getElementById("input");
var contenteditable = document.getElementById("contenteditable");
var selection = window.getSelection();
// -------- Test dragging regular text
selection.selectAllChildren(text);
var result = synthesizeDragStart(text, [[htmlContextData, htmlInfoData, htmlData,
{type: "text/plain", data: "Some Text"}]], window, 40, 10);
is(result, null, "Test dragging regular text");
// -------- Test dragging text from an <input>
input.setSelectionRange(1, 4);
result = synthesizeDragStart(input, [[{type: "text/plain", data: "rag"}]], window, 25, 6);
is(result, null, "Test dragging input");
// -------- Test dragging text from a <textarea>
textarea.setSelectionRange(1, 7);
result = synthesizeDragStart(textarea, [[{type: "text/plain", data: "ome Te"}]], window, 25, 6);
is(result, null, "Test dragging textarea");
textarea.blur();
// -------- Test dragging text from a contenteditable
selection.selectAllChildren(contenteditable.childNodes[1]);
result = synthesizeDragStart(contenteditable.childNodes[1],
[[htmlContextDataEditable, htmlInfoData,
{type: 'text/html', data: '<b id="bold">editable</b>' },
{type: "text/plain", data: "editable"}]], window, 5, 6);
is(result, null, "Test dragging contenteditable");
contenteditable.blur();
// -------- Test dragging regular text of text/html to <input>
selection.selectAllChildren(text);
input.value = "";
synthesizeDrop(text, input, [], "copy");
is(input.value, "Some Text", "Drag text/html onto input");
// -------- Test dragging regular text of text/html to disabled <input>
selection.selectAllChildren(text);
input.value = "";
input.disabled = true;
synthesizeDrop(text, input, [], "copy");
is(input.value, "", "Drag text/html onto disabled input");
input.disabled = false;
// -------- Test dragging regular text of text/html to readonly <input>
selection.selectAllChildren(text);
input.readOnly = true;
synthesizeDrop(text, input, [], "copy");
is(input.value, "", "Drag text/html onto readonly input");
input.readOnly = false;
// -------- Test dragging regular text of text/html to <input>. This sets
// shouldClear to true so that the default drag data is not present
// and we can use the data passed to synthesizeDrop. This allows
// testing of a drop with just text/html.
shouldClear = true;
selection.selectAllChildren(text);
input.value = "";
synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"}]], "copy");
is(input.value, "", "Drag text/html onto input");
// -------- Test dragging regular text of text/plain and text/html to <input>
selection.selectAllChildren(text);
input.value = "";
synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"},
{type: "text/plain", data: "Some Plain Text"}]], "copy");
is(input.value, "Some Plain Text", "Drag text/html and text/plain onto input");
// -------- Test dragging regular text of text/plain to <textarea>
// XXXndeakin Can't test textareas due to some event handling issue
// selection.selectAllChildren(text);
// synthesizeDrop(text, textarea, [[{type: "text/plain", data: "Somewhat Longer Text"}]], "copy");
// is(textarea.value, "Somewhat Longer Text", "Drag text/plain onto textarea");
// -------- Test dragging special text type of text/plain to contenteditable
selection.selectAllChildren(text);
synthesizeDrop(text, input, [[{type: "text/x-moz-text-internal", data: "Some Special Text"}]], "copy");
is(input.value, "Some Plain Text", "Drag text/x-moz-text-internal onto input");
// -------- Test dragging regular text of text/plain to contenteditable
selection.selectAllChildren(text);
synthesizeDrop(text, contenteditable, [[{type: "text/plain", data: "Sample Text"}]], "copy");
is(contenteditable.childNodes.length, 3, "Drag text/plain onto contenteditable child nodes");
is(contenteditable.textContent, "This is some editable text.Sample Text",
"Drag text/plain onto contenteditable text");
// -------- Test dragging regular text of text/html to contenteditable
selection.selectAllChildren(text);
synthesizeDrop(text, contenteditable, [[{type: "text/html", data: "Sample <i>Italic</i> Text"}]], "copy");
is(contenteditable.childNodes.length, 6, "Drag text/html onto contenteditable child nodes");
is(contenteditable.childNodes[4].tagName, "I", "Drag text/html onto contenteditable italic");
is(contenteditable.childNodes[4].textContent, "Italic", "Drag text/html onto contenteditable italic text");
// -------- Test dragging contenteditable to <input>
selection.selectAllChildren(document.getElementById("bold"));
synthesizeDrop(bold, input, [[{type: "text/html", data: "<b>editable</b>"},
{type: "text/plain", data: "editable"}]], "copy");
is(input.value, "Some Plain Texteditable", "Move text/html and text/plain from contenteditable onto input");
// -------- Test dragging contenteditable to contenteditable
shouldClear = false;
selection.selectAllChildren(contenteditable.childNodes[4]);
synthesizeDrop(contenteditable.childNodes[4], contenteditable, [], "copy");
is(contenteditable.childNodes.length, 7, "Move text/html and text/plain from contenteditable onto itself child nodes");
is(contenteditable.childNodes[6].tagName, "I", "Move text/html and text/plain from contenteditable onto itself italic");
is(contenteditable.childNodes[6].textContent, "Italic", "Move text/html and text/plain from contenteditable onto itself text");
// We'd test 'move' here as well as 'copy', but that requires knowledge of
// the source of the drag which drag simulation doesn't provide.
// -------- Test dragging non-editable nested inside contenteditable to contenteditable
input.focus(); // this resets some state in the selection otherwise an inexplicable error occurs calling selectAllChildren.
input.blur();
var nonEditable = document.getElementById("noneditable");
selection.selectAllChildren(nonEditable);
synthesizeDrop(nonEditable, document.getElementById("first"), [], "copy");
is(document.getElementById("nestedce").textContent, " MiddleFirst letter Middle Last part",
"Drag non-editable text/html onto contenteditable text");
SimpleTest.finish();
}
SimpleTest.waitForFocus(doTest);
</script>
</body>
</html>
|
