LayoutTests/fast/events/drag-and-drop-dataTransfer-types-nocrash.html

   1 <html>
   2 <head>
   3 <script src="../js/resources/js-test-pre.js"></script>
   4 <style>
   5 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
   6 #dropTarget {width: 256px; height: 256px; border: 1px dashed}
   7 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
   8 </style>
   9 <script>
  10     var dragMe;
  11     var dropTarget;
  12     var consoleElm;
  13     var event;
  14
  15     var FORMAT_TYPE = 'text/plain';
  16     var ALLOWED_EFFECT = 'copy';
  17     var DROP_EFFECT = 'copy';
  18
  19     window.onload = function()
  20     {
  21         dragMe = document.getElementById("dragMe");
  22         dropTarget = document.getElementById("dropTarget");
  23         consoleElm = document.getElementById("console");
  24
  25         if (!dragMe || !dropTarget || !consoleElm)
  26             return;
  27
  28         dragMe.ondragstart = dragStart;
  29         dragMe.ondragend = dragEnd;
  30
  31         dropTarget.ondragenter = dragEntered;
  32         dropTarget.ondragover = dragOver;
  33         dropTarget.ondrop = drop;
  34
  35         runTest();
  36     }
  37
  38     function dragStart(e)
  39     {
  40         event = e;
  41         e.dataTransfer.effectAllowed = ALLOWED_EFFECT;
  42         e.dataTransfer.setData(FORMAT_TYPE, e.target.textContent);
  43     }
  44
  45     function dragEnd(e)
  46     {
  47         return;
  48     }
  49
  50     function dragEntered(e)
  51     {
  52         dragEnteredAndUpdated(e);
  53     }
  54
  55     function dragOver(e)
  56     {
  57         dragEnteredAndUpdated(e);
  58     }
  59
  60     function dragEnteredAndUpdated(e)
  61     {
  62         event = e;
  63         e.dataTransfer.dropEffect = DROP_EFFECT;
  64         cancelDrag(e);
  65     }
  66
  67     function drop(e)
  68     {
  69         checkFormatType(e);
  70         cancelDrag(e);
  71     }
  72
  73     function cancelDrag(e)
  74     {
  75         if (e.preventDefault)
  76             e.preventDefault();
  77         else {
  78             // Assume this script is executing within Internet Explorer
  79             e.returnValue = false;
  80         }
  81     }
  82
  83     function checkFormatType(e)
  84     {
  85         event = e;
  86         var formatTypes = e.dataTransfer.types; // This line causes the crash.
  87         if (event.dataTransfer.types.indexOf(FORMAT_TYPE) == -1)
  88             testFailed('event.dataTransfer.types should contain format "' + FORMAT_TYPE + '", but it does not.');
  89         else
  90             testPassed('event.dataTransfer.types contains format "' + FORMAT_TYPE + '"');
  91
  92         if (event.dataTransfer.getData(FORMAT_TYPE) != 'Square')
  93             testFailed('event.dataTransfer.getData("' + FORMAT_TYPE + '") should contain "Square", but it does not.');
  94         else
  95             testPassed('event.dataTransfer.getData("' + FORMAT_TYPE + '") contains "Square"');
  96     }
  97
  98     function runTest()
  99     {
 100         if (!window.eventSender)
 101             return;
 102
 103         if (window.layoutTestController)
 104             layoutTestController.dumpAsText();
 105
 106         var startX = dragMe.offsetLeft + 10;
 107         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
 108         var endX = dropTarget.offsetLeft + 10;
 109         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
 110
 111         eventSender.mouseMoveTo(startX, startY);
 112         eventSender.mouseDown();
 113         eventSender.leapForward(100);
 114         eventSender.mouseMoveTo(endX, endY);
 115         eventSender.mouseUp();
 116
 117         var testContainer = document.getElementById("test-container");
 118         if (testContainer)
 119             document.body.removeChild(testContainer);
 120         debug('<br /><span class="pass">TEST COMPLETE</span>');
 121     }
 122 </script>
 123 </head>
 124 <body>
 125     <p id="description"></p>
 126     <div id="test-container">
 127         <div id="dropTarget">Drop the red square onto me.</div>
 128         <hr/>
 129         <p>Items that can be dragged to the drop target:</p>
 130         <div id="dragMe" draggable="true">Square</div>
 131         <hr/>
 132     </div>
 133     <div id="console"></div>
 134     <script>
 135         description("This test checks that on a successful drop we can access <code>event.dataTransfer.types</code> without crashing.");
 136     </script>
 137 </body>
 138 </html>