test_dragstart.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  1. <html>
  2. <head>
  3. <title>Tests for the dragstart event</title>
  4. <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  5. <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  6. <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  7. <!--
  8. This test checks the dragstart event and the DataTransfer object
  9. -->
  10. <script>
  11. SimpleTest.waitForExplicitFinish();
  12. var gDragInfo;
  13. var gDataTransfer = null;
  14. var gExtraDragTests = 0;
  15. function runTests()
  16. {
  17. // first, create a selection and try dragging it
  18. var draggable = $("draggable");
  19. window.getSelection().selectAllChildren(draggable);
  20. synthesizeMouse(draggable, 6, 6, { type: "mousedown" });
  21. synthesizeMouse(draggable, 14, 14, { type: "mousemove" });
  22. // drags are asynchronous on Linux, so this extra event is needed to make
  23. // sure the drag gets processed
  24. synthesizeMouse(draggable, 15, 15, { type: "mousemove" });
  25. }
  26. function afterDragTests()
  27. {
  28. // the dragstart should have occurred due to moving the mouse. gDataTransfer
  29. // caches the dataTransfer that was used, however it should now be empty and
  30. // be read only.
  31. ok(gDataTransfer instanceof DataTransfer, "DataTransfer after dragstart event");
  32. checkTypes(gDataTransfer, [], 0, "after dragstart event");
  33. expectError(() => gDataTransfer.setData("text/plain", "Some Text"),
  34. "NoModificationAllowedError", "setData when read only");
  35. expectError(() => gDataTransfer.clearData("text/plain"),
  36. "NoModificationAllowedError", "clearData when read only");
  37. expectError(() => gDataTransfer.mozSetDataAt("text/plain", "Some Text", 0),
  38. "NoModificationAllowedError", "setDataAt when read only");
  39. expectError(() => gDataTransfer.mozClearDataAt("text/plain", 0),
  40. "NoModificationAllowedError", "clearDataAt when read only");
  41. expectError(() => gDataTransfer.setDragImage(draggable, 10, 10),
  42. "NoModificationAllowedError", "setDragImage when read only");
  43. expectError(() => gDataTransfer.addElement(draggable),
  44. "NoModificationAllowedError", "addElement when read only");
  45. var evt = document.createEvent("dragevent");
  46. ok(evt instanceof DragEvent, "synthetic dragevent class")
  47. ok(evt instanceof MouseEvent, "synthetic event inherits from MouseEvent")
  48. evt.initDragEvent("dragstart", true, true, window, 1, 40, 35, 20, 15,
  49. false, true, false, false, 0, null, null);
  50. $("synthetic").dispatchEvent(evt);
  51. var evt = document.createEvent("dragevent");
  52. ok(evt instanceof DragEvent, "synthetic dragevent class")
  53. evt.initDragEvent("dragover", true, true, window, 0, 40, 35, 20, 15,
  54. true, false, true, true, 2, document.documentElement, null);
  55. $("synthetic2").dispatchEvent(evt);
  56. // next, dragging links and images
  57. sendMouseEventsForDrag("link");
  58. sendMouseEventsForDrag("image");
  59. // disable testing input dragging for now, as it doesn't seem to be testable
  60. // draggable = $("input");
  61. // draggable.setSelectionRange(0, 4);
  62. // synthesizeMouse(draggable, 8, 8, { type: "mousedown" });
  63. // synthesizeMouse(draggable, 15, 15, { type: "mousemove" });
  64. // sendMouseEventsForDrag("input");
  65. // next, check if the draggable attribute can be used to adjust the drag target
  66. gDragInfo = { target: $("dragtrue"), testid: "draggable true node" };
  67. sendMouseEventsForDrag("dragtrue");
  68. gDragInfo = { target: $("dragtrue"), testid: "draggable true child" };
  69. sendMouseEventsForDrag("spantrue");
  70. gDragInfo = { target: $("dragfalse").firstChild, testid: "draggable false node" };
  71. sendMouseEventsForDrag("dragfalse");
  72. gDragInfo = { target: $("spanfalse").firstChild, testid: "draggable false child" };
  73. sendMouseEventsForDrag("spanfalse");
  74. synthesizeMouse(draggable, 12, 12, { type: "mouseup" });
  75. if (gExtraDragTests == 4)
  76. SimpleTest.finish();
  77. }
  78. function sendMouseEventsForDrag(nodeid)
  79. {
  80. var draggable = $(nodeid);
  81. synthesizeMouse(draggable, 3, 3, { type: "mousedown" });
  82. synthesizeMouse(draggable, 10, 10, { type: "mousemove" });
  83. synthesizeMouse(draggable, 12, 12, { type: "mousemove" });
  84. }
  85. function doDragStartSelection(event)
  86. {
  87. is(event.type, "dragstart", "dragstart event type");
  88. is(event.target, $("draggable").firstChild, "dragstart event target");
  89. is(event.bubbles, true, "dragstart event bubbles");
  90. is(event.cancelable, true, "dragstart event cancelable");
  91. is(event.clientX, 14, "dragstart clientX");
  92. is(event.clientY, 14, "dragstart clientY");
  93. ok(event.screenX > 0, "dragstart screenX");
  94. ok(event.screenY > 0, "dragstart screenY");
  95. is(event.layerX, 14, "dragstart layerX");
  96. is(event.layerY, 14, "dragstart layerY");
  97. is(event.pageX, 14, "dragstart pageX");
  98. is(event.pageY, 14, "dragstart pageY");
  99. var dt = event.dataTransfer;
  100. ok(dt instanceof DataTransfer, "dataTransfer is DataTransfer");
  101. gDataTransfer = dt;
  102. var types = dt.types;
  103. ok(Array.isArray(types), "initial types is an Array");
  104. checkTypes(dt, ["text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain"], 0, "initial selection");
  105. is(dt.getData("text/plain"), "This is a draggable bit of text.", "initial selection text/plain");
  106. is(dt.getData("text/html"), "<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">This is a <em>draggable</em> bit of text.</div>",
  107. "initial selection text/html");
  108. // text/unicode and Text are available for compatibility. They retrieve the
  109. // text/plain data
  110. is(dt.getData("text/unicode"), "This is a draggable bit of text.", "initial selection text/unicode");
  111. is(dt.getData("Text"), "This is a draggable bit of text.", "initial selection Text");
  112. is(dt.getData("TEXT"), "This is a draggable bit of text.", "initial selection TEXT");
  113. is(dt.getData("text/UNICODE"), "This is a draggable bit of text.", "initial selection text/UNICODE");
  114. is(dt.mozItemCount, 1, "initial selection item count");
  115. dt.clearData("text/plain");
  116. dt.clearData("text/html");
  117. dt.clearData("text/_moz_htmlinfo");
  118. dt.clearData("text/_moz_htmlcontext");
  119. test_DataTransfer(dt);
  120. setTimeout(afterDragTests, 0);
  121. }
  122. function test_DataTransfer(dt)
  123. {
  124. is(dt.mozItemCount, 0, "empty itemCount");
  125. var types = dt.types;
  126. ok(Array.isArray(types), "empty types is an Array");
  127. checkTypes(dt, [], 0, "empty");
  128. is(dt.getData("text/plain"), "", "empty data is empty");
  129. // calling setDataAt requires an index that is 0 <= index <= dt.itemCount
  130. expectError(() => dt.mozSetDataAt("text/plain", "Some Text", 1),
  131. "IndexSizeError", "setDataAt index too high");
  132. is(dt.mozUserCancelled, false, "userCancelled");
  133. // because an exception occurred, the data should not have been added
  134. is(dt.mozItemCount, 0, "empty setDataAt index too high itemCount");
  135. dt.getData("text/plain", "", "empty setDataAt index too high getData");
  136. // if the type is '', do nothing, or return ''
  137. dt.setData("", "Invalid Type");
  138. is(dt.types.length, 0, "invalid type setData");
  139. is(dt.getData(""), "", "invalid type getData"),
  140. dt.mozSetDataAt("", "Invalid Type", 0);
  141. is(dt.types.length, 0, "invalid type setDataAt");
  142. is(dt.mozGetDataAt("", 0), null, "invalid type getDataAt"),
  143. // similar with clearDataAt and getDataAt
  144. expectError(() => dt.mozGetDataAt("text/plain", 1),
  145. "IndexSizeError", "getDataAt index too high");
  146. expectError(() => dt.mozClearDataAt("text/plain", 1),
  147. "IndexSizeError", "clearDataAt index too high");
  148. dt.setData("text/plain", "Sample Text");
  149. is(dt.mozItemCount, 1, "added plaintext itemCount");
  150. checkOneDataItem(dt, ["text/plain"], ["Sample Text"], 0, "added plaintext");
  151. // after all those exceptions, the data should still be the same
  152. checkOneDataItem(dt, ["text/plain"], ["Sample Text"], 0, "added plaintext after exception");
  153. // modifying the data associated with the format should give it the new value
  154. dt.setData("text/plain", "Modified Text");
  155. is(dt.mozItemCount, 1, "modified plaintext itemCount");
  156. checkOneDataItem(dt, ["text/plain"], ["Modified Text"], 0, "modified plaintext");
  157. dt.setData("text/html", "<strong>Modified Text</strong>");
  158. is(dt.mozItemCount, 1, "modified html itemCount");
  159. checkOneDataItem(dt, ["text/plain", "text/html"],
  160. ["Modified Text", "<strong>Modified Text</strong>"],
  161. 0, "modified html");
  162. // modifying data for a type that already exists should adjust it in place,
  163. // not reinsert it at the beginning
  164. dt.setData("text/plain", "New Text");
  165. is(dt.mozItemCount, 1, "modified text again itemCount");
  166. checkOneDataItem(dt, ["text/plain", "text/html"],
  167. ["New Text", "<strong>Modified Text</strong>"],
  168. 0, "modified text again");
  169. var draggable = $("draggable");
  170. dt.setData("application/-moz-node", draggable);
  171. checkOneDataItem(dt, ["text/plain", "text/html", "application/-moz-node"],
  172. ["New Text", "<strong>Modified Text</strong>", draggable.toString()],
  173. 0, "added node");
  174. dt.clearData(""); // null means clear all
  175. is(dt.mozItemCount, 0, "itemCount after clearData empty string");
  176. checkTypes(dt, [], 0, "empty after clearData empty string");
  177. dt.setData("text/plain", 22);
  178. dt.setData("text/html", 5.6);
  179. dt.setData("text/xml", 5.6);
  180. checkTypes(dt, ["text/plain", "text/html", "text/xml"], ["22", "5.6", ""], 0, "add numeric and empty data");
  181. dt.clearData(); // no argument means clear all
  182. is(dt.mozItemCount, 0, "itemCount after clearData no argument");
  183. checkTypes(dt, [], 0, "empty after clearData no argument");
  184. // check 'Text' type which should convert into text/plain
  185. dt.setData("Text", "Sample Text");
  186. checkOneDataItem(dt, ["text/plain"], ["Sample Text"], 0, "set Text");
  187. is(dt.getData("Text"), "Sample Text", "getData Text");
  188. is(dt.mozGetDataAt("Text", 0), "Sample Text", "getDataAt Text");
  189. dt.setData("text/plain", "More Text");
  190. checkOneDataItem(dt, ["text/plain"], ["More Text"], 0, "set text/plain after set Text");
  191. dt.mozClearDataAt("", 0); // null means clear all
  192. is(dt.mozItemCount, 0, "itemCount after clearDataAt empty string");
  193. checkTypes(dt, [], 0, "empty after clearDataAt empty string");
  194. // check text/uri-list type
  195. dt.setData("text/uri-list", "http://www.mozilla.org");
  196. checkURL(dt, "http://www.mozilla.org", "http://www.mozilla.org", 0, "set text/uri-list");
  197. // check URL type which should add text/uri-list data
  198. dt.setData("URL", "ftp://ftp.example.com");
  199. checkURL(dt, "ftp://ftp.example.com", "ftp://ftp.example.com", 0, "set URL");
  200. checkTypes(dt, ["text/uri-list"], ["ftp://ftp.example.com"], "url types");
  201. // clearing text/uri-list data
  202. dt.clearData("text/uri-list");
  203. is(dt.mozItemCount, 0, "itemCount after clear url-list");
  204. is(dt.getData("text/uri-list"), "", "text/uri-list after clear url-list");
  205. is(dt.getData("URL"), "", "URL after clear url-list");
  206. // check text/uri-list parsing
  207. dt.setData("text/uri-list", "#http://www.mozilla.org\nhttp://www.xulplanet.com\nhttp://www.example.com");
  208. checkURL(dt, "http://www.xulplanet.com",
  209. "#http://www.mozilla.org\nhttp://www.xulplanet.com\nhttp://www.example.com",
  210. 0, "uri-list 3 lines");
  211. dt.setData("text/uri-list", "#http://www.mozilla.org");
  212. is(dt.getData("URL"), "", "uri-list commented");
  213. dt.setData("text/uri-list", "#http://www.mozilla.org\n");
  214. is(dt.getData("URL"), "", "uri-list commented with newline");
  215. // check that clearing the URL type also clears the text/uri-list type
  216. dt.clearData("URL");
  217. is(dt.getData("text/uri-list"), "", "clear URL");
  218. dt.setData("text/uri-list", "#http://www.mozilla.org\n\n\n\n\n");
  219. is(dt.getData("URL"), "", "uri-list with blank lines");
  220. dt.setData("text/uri-list", "");
  221. is(dt.getData("URL"), "", "empty uri-list");
  222. dt.setData("text/uri-list", "#http://www.mozilla.org\n#Sample\nhttp://www.xulplanet.com \r\n");
  223. is(dt.getData("URL"), "http://www.xulplanet.com", "uri-list mix");
  224. dt.setData("text/uri-list", "\nhttp://www.mozilla.org");
  225. is(dt.getData("URL"), "", "empty line to start uri-list");
  226. dt.setData("text/uri-list", " http://www.mozilla.org#anchor ");
  227. is(dt.getData("URL"), "http://www.mozilla.org#anchor", "uri-list with spaces and hash");
  228. // ensure that setDataAt works the same way
  229. dt.mozSetDataAt("text/uri-list", "#http://www.mozilla.org\n#Sample\nhttp://www.xulplanet.com \r\n", 0);
  230. checkURL(dt, "http://www.xulplanet.com",
  231. "#http://www.mozilla.org\n#Sample\nhttp://www.xulplanet.com \r\n",
  232. 0, "uri-list mix setDataAt");
  233. // now test adding multiple items to be dragged using the setDataAt method
  234. dt.clearData();
  235. dt.mozSetDataAt("text/plain", "First Item", 0);
  236. dt.mozSetDataAt("text/plain", "Second Item", 1);
  237. expectError(() => dt.mozSetDataAt("text/plain", "Some Text", 3),
  238. "IndexSizeError", "setDataAt index too high with two items");
  239. is(dt.mozItemCount, 2, "setDataAt item itemCount");
  240. checkOneDataItem(dt, ["text/plain"], ["First Item"], 0, "setDataAt item at index 0");
  241. checkOneDataItem(dt, ["text/plain"], ["Second Item"], 1, "setDataAt item at index 1");
  242. dt.mozSetDataAt("text/html", "<em>First Item</em>", 0);
  243. dt.mozSetDataAt("text/html", "<em>Second Item</em>", 1);
  244. is(dt.mozItemCount, 2, "setDataAt two types item itemCount");
  245. checkOneDataItem(dt, ["text/plain", "text/html"],
  246. ["First Item", "<em>First Item</em>"], 0, "setDataAt two types item at index 0");
  247. checkOneDataItem(dt, ["text/plain", "text/html"],
  248. ["Second Item", "<em>Second Item</em>"], 1, "setDataAt two types item at index 1");
  249. dt.mozSetDataAt("text/html", "<em>Changed First Item</em>", 0);
  250. dt.mozSetDataAt("text/plain", "Changed Second Item", 1);
  251. is(dt.mozItemCount, 2, "changed with setDataAt item itemCount");
  252. checkOneDataItem(dt, ["text/plain", "text/html"],
  253. ["First Item", "<em>Changed First Item</em>"], 0, "changed with setDataAt item at index 0");
  254. checkOneDataItem(dt, ["text/plain", "text/html"],
  255. ["Changed Second Item", "<em>Second Item</em>"], 1, "changed with setDataAt item at index 1");
  256. dt.setData("text/html", "Changed with setData");
  257. is(dt.mozItemCount, 2, "changed with setData");
  258. checkOneDataItem(dt, ["text/plain", "text/html"],
  259. ["First Item", "Changed with setData"], 0, "changed with setData item at index 0");
  260. checkOneDataItem(dt, ["text/plain", "text/html"],
  261. ["Changed Second Item", "<em>Second Item</em>"], 1, "changed with setData item at index 1");
  262. dt.mozSetDataAt("application/-moz-node", "draggable", 2);
  263. is(dt.mozItemCount, 3, "setDataAt node itemCount");
  264. checkOneDataItem(dt, ["application/-moz-node"], ["draggable"], 2, "setDataAt node item at index 2");
  265. dt.mozClearDataAt("text/html", 1);
  266. is(dt.mozItemCount, 3, "clearDataAt itemCount");
  267. checkOneDataItem(dt, ["text/plain", "text/html"],
  268. ["First Item", "Changed with setData"], 0, "clearDataAt item at index 0");
  269. checkOneDataItem(dt, ["text/plain"], ["Changed Second Item"], 1, "clearDataAt item at index 1");
  270. dt.mozClearDataAt("text/plain", 1);
  271. is(dt.mozItemCount, 2, "clearDataAt last type itemCount");
  272. checkOneDataItem(dt, ["text/plain", "text/html"],
  273. ["First Item", "Changed with setData"], 0, "clearDataAt last type at index 0");
  274. checkOneDataItem(dt, ["application/-moz-node"], ["draggable"], 1, "clearDataAt last type item at index 2");
  275. expectError(() => dt.mozGetDataAt("text/plain", 2),
  276. "IndexSizeError", "getDataAt after item removed index too high");
  277. dt.mozSetDataAt("text/unknown", "Unknown type", 2);
  278. dt.mozSetDataAt("text/unknown", "Unknown type", 1);
  279. is(dt.mozItemCount, 3, "add unknown type");
  280. checkOneDataItem(dt, ["application/-moz-node", "text/unknown"],
  281. ["draggable", "Unknown type"], 1, "add unknown type item at index 1");
  282. checkOneDataItem(dt, ["text/unknown"], ["Unknown type"], 2, "add unknown type item at index 2");
  283. dt.mozClearDataAt("", 1);
  284. is(dt.mozItemCount, 2, "clearDataAt empty string");
  285. checkOneDataItem(dt, ["text/plain", "text/html"],
  286. ["First Item", "Changed with setData"], 0, "clearDataAt empty string item at index 0");
  287. checkOneDataItem(dt, ["text/unknown"],
  288. ["Unknown type"], 1, "clearDataAt empty string item at index 1");
  289. // passing a format that doesn't exist to clearData or clearDataAt should just
  290. // do nothing
  291. dt.clearData("text/something");
  292. dt.mozClearDataAt("text/something", 1);
  293. is(dt.mozItemCount, 2, "clearData type that does not exist");
  294. checkOneDataItem(dt, ["text/plain", "text/html"],
  295. ["First Item", "Changed with setData"], 0, "clearData type that does not exist item at index 0");
  296. checkOneDataItem(dt, ["text/unknown"],
  297. ["Unknown type"], 1, "clearData type that does not exist item at index 1");
  298. expectError(() => dt.mozClearDataAt("text/plain", 3),
  299. "IndexSizeError", "clearData index too high with two items");
  300. // ensure that clearData() removes all data associated with the first item, but doesn't
  301. // shift the second item down into the first item's slot.
  302. dt.clearData();
  303. is(dt.mozItemCount, 2, "clearData no argument with multiple items itemCount");
  304. checkOneDataItem(dt, [], [], 0,
  305. "clearData no argument with multiple items item at index 0");
  306. checkOneDataItem(dt, ["text/unknown"],
  307. ["Unknown type"], 1, "clearData no argument with multiple items item at index 1");
  308. // remove tha remaining data in index 1. As index 0 is empty at this point, this will actually
  309. // drop mozItemCount to 0. (XXX: This is because of spec-compliance reasons related
  310. // to the more-recent dt.item API. It's an unfortunate, but hopefully rare edge case)
  311. dt.mozClearDataAt("", 1);
  312. is(dt.mozItemCount, 0, "all data cleared");
  313. // now check the effectAllowed and dropEffect properties
  314. is(dt.dropEffect, "none", "initial dropEffect");
  315. is(dt.effectAllowed, "uninitialized", "initial effectAllowed");
  316. ["copy", "none", "link", "", "other", "copyMove", "all", "uninitialized", "move"].forEach(
  317. function (i) {
  318. dt.dropEffect = i;
  319. is(dt.dropEffect, i == "" || i == "other" || i == "copyMove" ||
  320. i == "all" || i == "uninitialized" ? "link" : i,
  321. "dropEffect set to " + i);
  322. is(dt.effectAllowed, "uninitialized", "effectAllowed not modified by dropEffect set to " + i);
  323. }
  324. );
  325. ["move", "copy", "link", "", "other", "moveCopy", "copyMove",
  326. "linkMove", "copyLink", "all", "uninitialized", "none"].forEach(
  327. function (i) {
  328. dt.effectAllowed = i;
  329. is(dt.dropEffect, "move", "dropEffect not modified by effectAllowed set to " + i);
  330. is(dt.effectAllowed, i == "" || i == "other" || i == "moveCopy" ? "link" : i,
  331. "effectAllowed set to " + i);
  332. }
  333. );
  334. }
  335. function doDragStartLink(event)
  336. {
  337. var dt = event.dataTransfer;
  338. checkTypes(dt, ["text/x-moz-url", "text/x-moz-url-data", "text/x-moz-url-desc", "text/uri-list",
  339. "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain"], 0, "initial link");
  340. is(dt.mozItemCount, 1, "initial link item count");
  341. is(dt.getData("text/uri-list"), "http://www.mozilla.org/", "link text/uri-list");
  342. is(dt.getData("text/plain"), "http://www.mozilla.org/", "link text/plain");
  343. event.preventDefault();
  344. gExtraDragTests++;
  345. }
  346. function doDragStartImage(event)
  347. {
  348. var dataurl = $("image").src;
  349. var dt = event.dataTransfer;
  350. checkTypes(dt, ["text/x-moz-url", "text/x-moz-url-data", "text/x-moz-url-desc", "text/uri-list",
  351. "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain"], 0, "initial image");
  352. is(dt.mozItemCount, 1, "initial image item count");
  353. is(dt.getData("text/uri-list"), dataurl, "image text/uri-list");
  354. is(dt.getData("text/plain"), dataurl, "image text/plain");
  355. event.preventDefault();
  356. gExtraDragTests++;
  357. }
  358. function doDragStartInput(event)
  359. {
  360. var dt = event.dataTransfer;
  361. checkTypes(dt, ["text/plain"], 0, "initial input");
  362. is(dt.mozItemCount, 1, "initial input item count");
  363. // is(dt.getData("text/plain"), "Text", "input text/plain");
  364. // event.preventDefault();
  365. }
  366. function doDragStartSynthetic(event)
  367. {
  368. is(event.type, "dragstart", "synthetic dragstart event type");
  369. var dt = event.dataTransfer;
  370. todo(dt instanceof DataTransfer, "synthetic dragstart dataTransfer is DataTransfer");
  371. // Uncomment next line once the todo instanceof above is fixed.
  372. // checkTypes(dt, [], 0, "synthetic dragstart");
  373. is(event.detail, 1, "synthetic dragstart detail");
  374. is(event.screenX, 40, "synthetic dragstart screenX");
  375. is(event.screenY, 35, "synthetic dragstart screenY");
  376. is(event.clientX, 20, "synthetic dragstart clientX");
  377. is(event.clientY, 15, "synthetic dragstart clientY");
  378. is(event.ctrlKey, false, "synthetic dragstart ctrlKey");
  379. is(event.altKey, true, "synthetic dragstart altKey");
  380. is(event.shiftKey, false, "synthetic dragstart shiftKey");
  381. is(event.metaKey, false, "synthetic dragstart metaKey");
  382. is(event.button, 0, "synthetic dragstart button ");
  383. is(event.relatedTarget, null, "synthetic dragstart relatedTarget");
  384. // Uncomment next two lines once the todo instanceof above is fixed.
  385. // dt.setData("text/plain", "Text");
  386. // is(dt.getData("text/plain"), "Text", "synthetic dragstart data is set after adding");
  387. }
  388. function doDragOverSynthetic(event)
  389. {
  390. is(event.type, "dragover", "synthetic dragover event type");
  391. var dt = event.dataTransfer;
  392. todo(dt instanceof DataTransfer, "synthetic dragover dataTransfer is DataTransfer");
  393. // Uncomment next line once the todo instanceof above is fixed.
  394. // checkTypes(dt, [], 0, "synthetic dragover");
  395. is(event.detail, 0, "synthetic dragover detail");
  396. is(event.screenX, 40, "synthetic dragover screenX");
  397. is(event.screenY, 35, "synthetic dragover screenY");
  398. is(event.clientX, 20, "synthetic dragover clientX");
  399. is(event.clientY, 15, "synthetic dragover clientY");
  400. is(event.ctrlKey, true, "synthetic dragover ctrlKey");
  401. is(event.altKey, false, "synthetic dragover altKey");
  402. is(event.shiftKey, true, "synthetic dragover shiftKey");
  403. is(event.metaKey, true, "synthetic dragover metaKey");
  404. is(event.button, 2, "synthetic dragover button");
  405. is(event.relatedTarget, document.documentElement, "synthetic dragover relatedTarget");
  406. // Uncomment next two lines once the todo instanceof above is fixed.
  407. // dt.setData("text/plain", "Text");
  408. // is(dt.getData("text/plain"), "Text", "synthetic dragover data is set after adding");
  409. }
  410. function onDragStartDraggable(event)
  411. {
  412. var dt = event.dataTransfer;
  413. ok(dt.mozItemCount == 0 && dt.types.length == 0 && event.originalTarget == gDragInfo.target, gDragInfo.testid);
  414. gExtraDragTests++;
  415. }
  416. function checkOneDataItem(dt, expectedtypes, expecteddata, index, testid)
  417. {
  418. checkTypes(dt, expectedtypes, index, testid);
  419. for (var f = 0; f < expectedtypes.length; f++) {
  420. if (index == 0)
  421. is(dt.getData(expectedtypes[f]), expecteddata[f], testid + " getData " + expectedtypes[f]);
  422. is(dt.mozGetDataAt(expectedtypes[f], index), expecteddata[f] ? expecteddata[f] : null,
  423. testid + " getDataAt " + expectedtypes[f]);
  424. }
  425. }
  426. function checkTypes(dt, expectedtypes, index, testid)
  427. {
  428. if (index == 0) {
  429. var types = dt.types;
  430. is(types.length, expectedtypes.length, testid + " types length");
  431. for (var f = 0; f < expectedtypes.length; f++) {
  432. is(types[f], expectedtypes[f], testid + " " + types[f] + " check");
  433. }
  434. }
  435. types = dt.mozTypesAt(index);
  436. is(types.length, expectedtypes.length, testid + " typesAt length");
  437. for (var f = 0; f < expectedtypes.length; f++) {
  438. is(types[f], expectedtypes[f], testid + " " + types[f] + " at " + index + " check");
  439. }
  440. }
  441. function checkURL(dt, url, fullurllist, index, testid)
  442. {
  443. is(dt.getData("text/uri-list"), fullurllist, testid + " text/uri-list");
  444. is(dt.getData("URL"), url, testid + " URL");
  445. is(dt.mozGetDataAt("text/uri-list", 0), fullurllist, testid + " text/uri-list");
  446. is(dt.mozGetDataAt("URL", 0), fullurllist, testid + " URL");
  447. }
  448. function expectError(fn, eid, testid)
  449. {
  450. var error = "";
  451. try {
  452. fn();
  453. } catch (ex) {
  454. error = ex.name;
  455. }
  456. is(error, eid, testid + " causes exception " + eid);
  457. }
  458. </script>
  459. </head>
  460. <body style="height: 300px; overflow: auto;" onload="setTimeout(runTests, 0)">
  461. <div id="draggable" ondragstart="doDragStartSelection(event)">This is a <em>draggable</em> bit of text.</div>
  462. <fieldset>
  463. <a id="link" href="http://www.mozilla.org/" ondragstart="doDragStartLink(event)">mozilla.org</a>
  464. </fieldset>
  465. <label>
  466. <img id="image" src="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%18%00%00%00%18%02%03%00%00%00%9D%19%D5k%00%00%00%04gAMA%00%00%B1%8F%0B%FCa%05%00%00%00%0CPLTE%FF%FF%FF%FF%FF%FF%F7%DC%13%00%00%00%03%80%01X%00%00%00%01tRNS%08N%3DPT%00%00%00%01bKGD%00%88%05%1DH%00%00%00%09pHYs%00%00%0B%11%00%00%0B%11%01%7Fd_%91%00%00%00%07tIME%07%D2%05%0C%14%0C%0D%D8%3F%1FQ%00%00%00%5CIDATx%9C%7D%8E%CB%09%C0%20%10D%07r%B7%20%2F%E9wV0%15h%EA%D9%12D4%BB%C1x%CC%5C%1E%0C%CC%07%C0%9C0%9Dd7()%C0A%D3%8D%E0%B8%10%1DiCHM%D0%AC%D2d%C3M%F1%B4%E7%FF%10%0BY%AC%25%93%CD%CBF%B5%B2%C0%3Alh%CD%AE%13%DF%A5%F7%E0%03byW%09A%B4%F3%E2%00%00%00%00IEND%AEB%60%82"
  467. ondragstart="doDragStartImage(event)">
  468. </label>
  469. <input id="input" value="Text in a box" ondragstart="doDragStartInput(event)">
  470. <div ondragstart="onDragStartDraggable(event)">
  471. <div id="dragtrue" draggable="true">
  472. This is a <span id="spantrue">draggable</span> area.
  473. </div>
  474. <div id="dragfalse" draggable="false">
  475. This is a <span id="spanfalse">non-draggable</span> area.
  476. </div>
  477. </div>
  478. <!--iframe src="http://www.mozilla.org" width="400" height="400"></iframe-->
  479. <div id="synthetic" ondragstart="doDragStartSynthetic(event)">Synthetic Event Dispatch</div>
  480. <div id="synthetic2" ondragover="doDragOverSynthetic(event)">Synthetic Event Dispatch</div>
  481. </body>
  482. </html>