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}
8 #console { height: 250px; overflow:scroll }
16 var ALLOWED_EFFECTS = 'none';
17 var DROP_EFFECT = 'copy';
19 var lastDragOrDragOverEventFired = null;
20 var didDragEnterTarget = false;
22 var DRAG_EVENT = "drag";
23 var DRAGOVER_EVENT = "dragover";
25 window.onload = function()
27 dragMe = document.getElementById("dragMe");
28 dropTarget = document.getElementById("dropTarget");
29 consoleElm = document.getElementById("console");
31 if (!dragMe || !dropTarget || !consoleElm)
34 dragMe.ondragstart = dragStart;
35 dragMe.ondragend = dragEnd;
36 dragMe.ondrag = dragOverWithRespectToSource;
38 dropTarget.ondragenter = dragEntered;
39 dropTarget.ondragleave = dragLeft;
40 dropTarget.ondragover = dragOver;
41 dropTarget.ondrop = drop;
49 e.dataTransfer.effectAllowed = ALLOWED_EFFECTS;
50 e.dataTransfer.setData('Text', e.target.textContent);
58 function dragEntered(e)
60 didDragEnterTarget = true;
61 dragEnteredAndUpdated(e);
66 didDragEnterTarget = false;
70 function dragOverWithRespectToSource(e)
73 lastDragOrDragOverEventFired = DRAG_EVENT;
80 lastDragOrDragOverEventFired = DRAGOVER_EVENT;
81 dragEnteredAndUpdated(e);
84 function dragEnteredAndUpdated(e)
87 e.dataTransfer.dropEffect = DROP_EFFECT;
96 function cancelDrag(e)
101 // Assume this script is executing within Internet Explorer
102 e.returnValue = false;
106 function checkDragState(e)
109 if (didDragEnterTarget && e.type == "drag" && lastDragOrDragOverEventFired == DRAG_EVENT)
110 testFailed('dragover should have fired after drag. Instead, drag fired again.');
111 else if (e.type == "dragover") {
112 if (lastDragOrDragOverEventFired == DRAG_EVENT)
113 testPassed('drag fired before dragover.');
115 testFailed('drag should have fired before dragover. Instead, dragover fired first.');
121 if (!window.eventSender)
124 if (window.testRunner)
125 testRunner.dumpAsText();
127 var startX = dragMe.offsetLeft + 10;
128 var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
129 var endX = dropTarget.offsetLeft + 10;
130 var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
132 eventSender.mouseMoveTo(startX, startY);
133 eventSender.mouseDown();
134 eventSender.leapForward(100);
135 eventSender.mouseMoveTo(endX, endY);
136 eventSender.mouseUp();
138 var testContainer = document.getElementById("test-container");
140 document.body.removeChild(testContainer);
141 debug('<br /><span class="pass">TEST COMPLETE</span>');
146 <p id="description"></p>
147 <div id="test-container">
148 <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code>
150 <div id="dropTarget">Drop the red square onto me.</div>
152 <p>Items that can be dragged to the drop target:</p>
153 <div id="dragMe" draggable="true">Square</div>
156 <div id="console"></div>
158 description("This test checks that the event handlers ondrag and ondragover fire in that order, " +
159 "as per http://www.whatwg.org/specs/web-apps/current-work/#current-drag-operation.");