drag-image-no-crash.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <html>
  2. <body>
  3. <script>
  4. // This is a 10x10 24-bits RGB BMP image in white.
  5. var imageString =
  6. "Qk12AQAAAAAAADYAAAAoAAAACgAAAAoAAAABABgAAAAAAEABAAATCwAAEwsAAAAAAAAAAAAAAAAA" +
  7. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
  8. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
  9. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
  10. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
  11. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
  12. "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
  13. // Raw image byets.
  14. var imageRaw = window.atob(imageString).split("");
  15. // 10x10x3 bytes are image data.
  16. var pixelBytes = 300;
  17. var beginByte = imageRaw.length - pixelBytes;
  18. function generateNewImage()
  19. {
  20. // Add 1 to image data.
  21. for (var i = beginByte; i < imageRaw.length; ++i) {
  22. var c = imageRaw[i].charCodeAt(0);
  23. if (c == 255) {
  24. imageRaw[i] = String.fromCharCode(0);
  25. } else {
  26. imageRaw[i] = String.fromCharCode(c+1);
  27. break;
  28. }
  29. }
  30. var bmpImage = new Image();
  31. bmpImage.src = "data:image/bmp;base64," + window.btoa(imageRaw.join(""));
  32. return bmpImage;
  33. }
  34. var imageCount = 0;
  35. function addImage()
  36. {
  37. if (imageCount >= 1000 * 1000)
  38. return;
  39. document.getElementById("imageCanvas").appendChild(generateNewImage());
  40. window.setTimeout("addImage()", 1);
  41. }
  42. function runTest()
  43. {
  44. document.getElementById("dragFrame").contentWindow.location.href =
  45. "about:blank";
  46. addImage();
  47. }
  48. </script>
  49. <p>To run this test:</p>
  50. <p>1. Drag this text 10 times:
  51. <iframe id="dragFrame" width="50" height="30">.</iframe></p>
  52. <p>2. Click this <button onclick="runTest();">Start</button> button.</p>
  53. <p>3. Let it run for 5 minutes and browser shouldn't crash.</p>
  54. <div id="imageCanvas"></div>
  55. <script>
  56. // Write this content to the iframe.
  57. var content =
  58. "<" + "body" + ">" +
  59. "<" + "script" + ">" +
  60. "function dragStartHandler()" +
  61. "{" +
  62. " var img = new Image();" +
  63. " img.src = 'data:image/bmp;base64," + imageString + "';" +
  64. " event.dataTransfer.setDragImage(img, 10, 10);" +
  65. "}" +
  66. "</" + "script" + ">" +
  67. "<span ondragstart='dragStartHandler()'" +
  68. " style='-webkit-user-select:none;" +
  69. " -webkit-user-drag: element;" +
  70. " position: absolute; top: 0; left: 0;" +
  71. " background-color: blue;'>HERE</span>" +
  72. "</" + "body" + ">";
  73. var doc = document.getElementById("dragFrame");
  74. doc.contentDocument.open();
  75. doc.contentDocument.write(content);
  76. doc.contentDocument.close();
  77. </script>
  78. </body>
  79. </html>