test_paste_image.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <html><head>
  2. <title>Test for bug 891247</title>
  3. <link rel="stylesheet" href="/tests/SimpleTest/test.css">
  4. <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  5. <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  6. <script class="testbody" type="application/javascript">
  7. function ImageTester() {
  8. var counter = 0;
  9. var images = [];
  10. var that = this;
  11. this.add = function(aFile) {
  12. images.push(aFile);
  13. };
  14. this.test = function() {
  15. for (var i = 0; i < images.length; i++) {
  16. testImageSize(images[i]);
  17. }
  18. };
  19. this.returned = function() {
  20. counter++;
  21. info("returned=" + counter + " images.length=" + images.length);
  22. if (counter == images.length) {
  23. info("test finish");
  24. SimpleTest.finish();
  25. }
  26. };
  27. function testImageSize(aFile) {
  28. var source = window.URL.createObjectURL(aFile);
  29. var image = new Image();
  30. image.src = source;
  31. var imageTester = that;
  32. image.onload = function() {
  33. is(this.width, 62, "Check generated image width");
  34. is(this.height, 71, "Check generated image height");
  35. if (aFile.type == "image/gif") {
  36. // this test fails for image/jpeg and image/png because the images
  37. // generated are slightly different
  38. testImageCanvas(image);
  39. }
  40. imageTester.returned();
  41. }
  42. document.body.appendChild(image);
  43. };
  44. function testImageCanvas(aImage) {
  45. var canvas = drawToCanvas(aImage);
  46. var refImage = document.getElementById('image');
  47. var refCanvas = drawToCanvas(refImage);
  48. is(canvas.toDataURL(), refCanvas.toDataURL(), "Image should map pixel-by-pixel");
  49. }
  50. function drawToCanvas(aImage) {
  51. var canvas = document.createElement("CANVAS");
  52. document.body.appendChild(canvas);
  53. canvas.width = aImage.width;
  54. canvas.height = aImage.height;
  55. canvas.getContext('2d').drawImage(aImage, 0, 0);
  56. return canvas;
  57. }
  58. }
  59. function copyImage(aImageId) {
  60. // selection of the node
  61. var node = document.getElementById(aImageId);
  62. var webnav = SpecialPowers.wrap(window)
  63. .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
  64. .getInterface(SpecialPowers.Ci.nsIWebNavigation)
  65. var docShell = webnav.QueryInterface(SpecialPowers.Ci.nsIDocShell);
  66. // let's copy the node
  67. var documentViewer = docShell.contentViewer
  68. .QueryInterface(SpecialPowers.Ci.nsIContentViewerEdit);
  69. documentViewer.setCommandNode(node);
  70. documentViewer.copyImage(documentViewer.COPY_IMAGE_ALL);
  71. }
  72. function doTest() {
  73. SimpleTest.waitForExplicitFinish();
  74. copyImage('image');
  75. //--------- now check the content of the clipboard
  76. var clipboard = SpecialPowers.Cc["@mozilla.org/widget/clipboard;1"]
  77. .getService(SpecialPowers.Ci.nsIClipboard);
  78. // does the clipboard contain text/unicode data ?
  79. ok(clipboard.hasDataMatchingFlavors(["text/unicode"], 1, clipboard.kGlobalClipboard),
  80. "clipboard contains unicode text");
  81. // does the clipboard contain text/html data ?
  82. ok(clipboard.hasDataMatchingFlavors(["text/html"], 1, clipboard.kGlobalClipboard),
  83. "clipboard contains html text");
  84. // does the clipboard contain image data ?
  85. ok(clipboard.hasDataMatchingFlavors(["image/png"], 1, clipboard.kGlobalClipboard),
  86. "clipboard contains image");
  87. window.addEventListener("paste", onPaste);
  88. var textarea = SpecialPowers.wrap(document.getElementById('textarea'));
  89. textarea.focus();
  90. textarea.editor.paste(clipboard.kGlobalClipboard);
  91. }
  92. function onPaste(e) {
  93. var imageTester = new ImageTester;
  94. testFiles(e, imageTester);
  95. testItems(e, imageTester);
  96. imageTester.test();
  97. }
  98. function testItems(e, imageTester) {
  99. var items = e.clipboardData.items;
  100. is(items, e.clipboardData.items,
  101. "Getting @items twice should return the same object");
  102. var haveFiles = false;
  103. ok(items instanceof DataTransferItemList, "@items implements DataTransferItemList");
  104. ok(items.length > 0, "@items is not empty");
  105. for (var i = 0; i < items.length; i++) {
  106. var item = items[i];
  107. ok(item instanceof DataTransferItem, "each element of @items must implement DataTransferItem");
  108. if (item.kind == "file") {
  109. var file = item.getAsFile();
  110. ok(file instanceof File, ".getAsFile() returns a File object");
  111. ok(file.size > 0, "Files shouldn't have size 0");
  112. imageTester.add(file);
  113. }
  114. }
  115. }
  116. function testFiles(e, imageTester) {
  117. var files = e.clipboardData.files;
  118. is(files, e.clipboardData.files,
  119. "Getting the files array twice should return the same array");
  120. ok(files.length > 0, "There should be at least one file in the clipboard");
  121. for (var i = 0; i < files.length; i++) {
  122. var file = files[i];
  123. ok(file instanceof File, ".files should contain only File objects");
  124. ok(file.size > 0, "This file shouldn't have size 0");
  125. if (file.name == "image.png") {
  126. is(file.type, "image/png", "This file should be a image/png");
  127. } else if (file.name == "image.jpeg") {
  128. is(file.type, "image/jpeg", "This file should be a image/jpeg");
  129. } else if (file.name == "image.gif") {
  130. is(file.type, "image/gif", "This file should be a image/gif");
  131. } else {
  132. info("file.name=" + file.name);
  133. ok(false, "Unexpected file name");
  134. }
  135. testSlice(file);
  136. imageTester.add(file);
  137. // Adding the same image again so we can test concurrency
  138. imageTester.add(file);
  139. }
  140. }
  141. function testSlice(aFile) {
  142. var blob = aFile.slice();
  143. ok(blob instanceof Blob, ".slice returns a blob");
  144. is(blob.size, aFile.size, "the blob has the same size");
  145. blob = aFile.slice(123123);
  146. is(blob.size, 0, ".slice overflow check");
  147. blob = aFile.slice(123, 123141);
  148. is(blob.size, aFile.size - 123, ".slice @size check");
  149. blob = aFile.slice(123, 12);
  150. is(blob.size, 0, ".slice @size check 2");
  151. blob = aFile.slice(124, 134, "image/png");
  152. is(blob.size, 10, ".slice @size check 3");
  153. is(blob.type, "image/png", ".slice @type check");
  154. }
  155. </script>
  156. <body onload="doTest();">
  157. <img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABHCA
  158. IAAADQjmMaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goUAwAgSAORBwAAABl0RVh0Q29
  159. tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABPSURBVGje7c4BDQAACAOga//OmuMbJGAurTbq
  160. 6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6urq6s31B0IqAY2/t
  161. QVCAAAAAElFTkSuQmCC" />
  162. <form>
  163. <textarea id="textarea"></textarea>
  164. </form>
  165. </body>
  166. </html>