3 <script src="../js/resources/js-test-pre.js"></script>
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}
15 var FORMAT_TYPE = 'text/plain';
16 var ALLOWED_EFFECT = 'copy';
17 var DROP_EFFECT = 'copy';
19 window.onload = function()
21 dragMe = document.getElementById("dragMe");
22 dropTarget = document.getElementById("dropTarget");
23 consoleElm = document.getElementById("console");
25 if (!dragMe || !dropTarget || !consoleElm)
28 dragMe.ondragstart = dragStart;
29 dragMe.ondragend = dragEnd;
31 dropTarget.ondragenter = dragEntered;
32 dropTarget.ondragover = dragOver;
33 dropTarget.ondrop = drop;
41 e.dataTransfer.effectAllowed = ALLOWED_EFFECT;
42 e.dataTransfer.setData(FORMAT_TYPE, e.target.textContent);
50 function dragEntered(e)
52 dragEnteredAndUpdated(e);
57 dragEnteredAndUpdated(e);
60 function dragEnteredAndUpdated(e)
63 e.dataTransfer.dropEffect = DROP_EFFECT;
73 function cancelDrag(e)
78 // Assume this script is executing within Internet Explorer
79 e.returnValue = false;
83 function checkFormatType(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.');
90 testPassed('event.dataTransfer.types contains format "' + FORMAT_TYPE + '"');
92 if (event.dataTransfer.getData(FORMAT_TYPE) != 'Square')
93 testFailed('event.dataTransfer.getData("' + FORMAT_TYPE + '") should contain "Square", but it does not.');
95 testPassed('event.dataTransfer.getData("' + FORMAT_TYPE + '") contains "Square"');
100 if (!window.eventSender)
103 if (window.testRunner)
104 testRunner.dumpAsText();
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;
111 eventSender.mouseMoveTo(startX, startY);
112 eventSender.mouseDown();
113 eventSender.leapForward(100);
114 eventSender.mouseMoveTo(endX, endY);
115 eventSender.mouseUp();
117 var testContainer = document.getElementById("test-container");
119 document.body.removeChild(testContainer);
120 debug('<br /><span class="pass">TEST COMPLETE</span>');
125 <p id="description"></p>
126 <div id="test-container">
127 <div id="dropTarget">Drop the red square onto me.</div>
129 <p>Items that can be dragged to the drop target:</p>
130 <div id="dragMe" draggable="true">Square</div>
133 <div id="console"></div>
135 description("This test checks that on a successful drop we can access <code>event.dataTransfer.types</code> without crashing.");