|
1 <html> |
|
2 |
|
3 <head> |
|
4 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> |
|
5 |
|
6 <script type="application/javascript" |
|
7 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
|
8 <script type="application/javascript" |
|
9 src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> |
|
10 <script type="application/javascript" |
|
11 src="chrome://mochikit/content/tests/SimpleTest/ChromeUtils.js"></script> |
|
12 </head> |
|
13 |
|
14 <body> |
|
15 <span id="text" style="font-size: 40px;">Some Text</span> |
|
16 |
|
17 <input id="input" value="Drag Me"> |
|
18 <textarea id="textarea">Some Text To Drag</textarea> |
|
19 <p id="contenteditable" contenteditable="true">This is some <b id="bold">editable</b> text.</p> |
|
20 <p id="nestedce" contenteditable="true"><span id="first"> </span>First letter <span id="noneditable" contenteditable="false">Middle</span> Last part</p> |
|
21 |
|
22 <script type="application/javascript"> |
|
23 |
|
24 SimpleTest.waitForExplicitFinish(); |
|
25 |
|
26 // This listener allows us to clear the default data for the selection added for the drag. |
|
27 var shouldClear = false; |
|
28 window.addEventListener("dragstart", function (event) { if (shouldClear) event.dataTransfer.clearData() }, true); |
|
29 |
|
30 function doTest() |
|
31 { |
|
32 const htmlContextData = { type: 'text/_moz_htmlcontext', |
|
33 data: '<html><body></body></html>' }; |
|
34 const htmlInfoData = { type: 'text/_moz_htmlinfo', data: '0,0' }; |
|
35 const htmlData = { type: 'text/html', data: '<span id="text" style="font-size: 40px;">Some Text</span>' }; |
|
36 |
|
37 const htmlContextDataEditable = { type: 'text/_moz_htmlcontext', |
|
38 data: '<html><body><p id="contenteditable" contenteditable="true"></p></body></html>' }; |
|
39 |
|
40 var text = document.getElementById("text"); |
|
41 var input = document.getElementById("input"); |
|
42 var contenteditable = document.getElementById("contenteditable"); |
|
43 |
|
44 var selection = window.getSelection(); |
|
45 |
|
46 // -------- Test dragging regular text |
|
47 selection.selectAllChildren(text); |
|
48 var result = synthesizeDragStart(text, [[htmlContextData, htmlInfoData, htmlData, |
|
49 {type: "text/plain", data: "Some Text"}]], window, 40, 10); |
|
50 ok(!result, "Test dragging regular text"); |
|
51 |
|
52 // -------- Test dragging text from an <input> |
|
53 input.setSelectionRange(1, 4); |
|
54 result = synthesizeDragStart(input, [[{type: "text/plain", data: "rag"}]], window, 25, 6); |
|
55 ok(!result, "Test dragging input"); |
|
56 |
|
57 // -------- Test dragging text from a <textarea> |
|
58 textarea.setSelectionRange(1, 7); |
|
59 result = synthesizeDragStart(textarea, [[{type: "text/plain", data: "ome Te"}]], window, 25, 6); |
|
60 ok(!result, "Test dragging textarea"); |
|
61 textarea.blur(); |
|
62 |
|
63 // -------- Test dragging text from a contenteditable |
|
64 selection.selectAllChildren(contenteditable.childNodes[1]); |
|
65 result = synthesizeDragStart(contenteditable.childNodes[1], |
|
66 [[htmlContextDataEditable, htmlInfoData, |
|
67 {type: 'text/html', data: '<b id="bold">editable</b>' }, |
|
68 {type: "text/plain", data: "editable"}]], window, 5, 6); |
|
69 ok(!result, "Test dragging contenteditable"); |
|
70 contenteditable.blur(); |
|
71 |
|
72 // -------- Test dragging regular text of text/html to <input> |
|
73 |
|
74 selection.selectAllChildren(text); |
|
75 input.value = ""; |
|
76 synthesizeDrop(text, input, [], "copy"); |
|
77 is(input.value, "Some Text", "Drag text/html onto input"); |
|
78 |
|
79 // -------- Test dragging regular text of text/html to disabled <input> |
|
80 |
|
81 selection.selectAllChildren(text); |
|
82 input.value = ""; |
|
83 input.disabled = true; |
|
84 synthesizeDrop(text, input, [], "copy"); |
|
85 is(input.value, "", "Drag text/html onto disabled input"); |
|
86 input.disabled = false; |
|
87 |
|
88 // -------- Test dragging regular text of text/html to readonly <input> |
|
89 |
|
90 selection.selectAllChildren(text); |
|
91 input.readOnly = true; |
|
92 synthesizeDrop(text, input, [], "copy"); |
|
93 is(input.value, "", "Drag text/html onto readonly input"); |
|
94 input.readOnly = false; |
|
95 |
|
96 // -------- Test dragging regular text of text/html to <input>. This sets |
|
97 // shouldClear to true so that the default drag data is not present |
|
98 // and we can use the data passed to synthesizeDrop. This allows |
|
99 // testing of a drop with just text/html. |
|
100 shouldClear = true; |
|
101 selection.selectAllChildren(text); |
|
102 input.value = ""; |
|
103 synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"}]], "copy"); |
|
104 is(input.value, "", "Drag text/html onto input"); |
|
105 |
|
106 // -------- Test dragging regular text of text/plain and text/html to <input> |
|
107 |
|
108 selection.selectAllChildren(text); |
|
109 input.value = ""; |
|
110 synthesizeDrop(text, input, [[{type: "text/html", data: "Some <b>Bold<b> Text"}, |
|
111 {type: "text/plain", data: "Some Plain Text"}]], "copy"); |
|
112 is(input.value, "Some Plain Text", "Drag text/html and text/plain onto input"); |
|
113 |
|
114 // -------- Test dragging regular text of text/plain to <textarea> |
|
115 |
|
116 // XXXndeakin Can't test textareas due to some event handling issue |
|
117 // selection.selectAllChildren(text); |
|
118 // synthesizeDrop(text, textarea, [[{type: "text/plain", data: "Somewhat Longer Text"}]], "copy"); |
|
119 // is(textarea.value, "Somewhat Longer Text", "Drag text/plain onto textarea"); |
|
120 |
|
121 // -------- Test dragging special text type of text/plain to contenteditable |
|
122 |
|
123 selection.selectAllChildren(text); |
|
124 synthesizeDrop(text, input, [[{type: "text/x-moz-text-internal", data: "Some Special Text"}]], "copy"); |
|
125 is(input.value, "Some Plain Text", "Drag text/x-moz-text-internal onto input"); |
|
126 |
|
127 // -------- Test dragging regular text of text/plain to contenteditable |
|
128 |
|
129 selection.selectAllChildren(text); |
|
130 synthesizeDrop(text, contenteditable, [[{type: "text/plain", data: "Sample Text"}]], "copy"); |
|
131 is(contenteditable.childNodes.length, 3, "Drag text/plain onto contenteditable child nodes"); |
|
132 is(contenteditable.textContent, "This is some editable text.Sample Text", |
|
133 "Drag text/plain onto contenteditable text"); |
|
134 |
|
135 // -------- Test dragging regular text of text/html to contenteditable |
|
136 |
|
137 selection.selectAllChildren(text); |
|
138 synthesizeDrop(text, contenteditable, [[{type: "text/html", data: "Sample <i>Italic</i> Text"}]], "copy"); |
|
139 is(contenteditable.childNodes.length, 6, "Drag text/html onto contenteditable child nodes"); |
|
140 is(contenteditable.childNodes[4].tagName, "I", "Drag text/html onto contenteditable italic"); |
|
141 is(contenteditable.childNodes[4].textContent, "Italic", "Drag text/html onto contenteditable italic text"); |
|
142 |
|
143 // -------- Test dragging contenteditable to <input> |
|
144 |
|
145 selection.selectAllChildren(document.getElementById("bold")); |
|
146 synthesizeDrop(bold, input, [[{type: "text/html", data: "<b>editable</b>"}, |
|
147 {type: "text/plain", data: "editable"}]], "copy"); |
|
148 is(input.value, "Some Plain Texteditable", "Move text/html and text/plain from contenteditable onto input"); |
|
149 |
|
150 // -------- Test dragging contenteditable to contenteditable |
|
151 |
|
152 shouldClear = false; |
|
153 |
|
154 selection.selectAllChildren(contenteditable.childNodes[4]); |
|
155 synthesizeDrop(contenteditable.childNodes[4], contenteditable, [], "copy"); |
|
156 is(contenteditable.childNodes.length, 7, "Move text/html and text/plain from contenteditable onto itself child nodes"); |
|
157 is(contenteditable.childNodes[6].tagName, "I", "Move text/html and text/plain from contenteditable onto itself italic"); |
|
158 is(contenteditable.childNodes[6].textContent, "Italic", "Move text/html and text/plain from contenteditable onto itself text"); |
|
159 |
|
160 // We'd test 'move' here as well as 'copy', but that requires knowledge of |
|
161 // the source of the drag which drag simulation doesn't provide. |
|
162 |
|
163 // -------- Test dragging non-editable nested inside contenteditable to contenteditable |
|
164 |
|
165 input.focus(); // this resets some state in the selection otherwise an inexplicable error occurs calling selectAllChildren. |
|
166 input.blur(); |
|
167 |
|
168 var nonEditable = document.getElementById("noneditable"); |
|
169 selection.selectAllChildren(nonEditable); |
|
170 synthesizeDrop(nonEditable, document.getElementById("first"), [], "copy"); |
|
171 is(document.getElementById("nestedce").textContent, " MiddleFirst letter Middle Last part", |
|
172 "Drag non-editable text/html onto contenteditable text"); |
|
173 |
|
174 SimpleTest.finish(); |
|
175 } |
|
176 |
|
177 SimpleTest.waitForFocus(doTest); |
|
178 |
|
179 </script> |
|
180 </body> |
|
181 </html> |