3f4a3df9e99a386df1adaea17c3624072915eeeb
[WebKit-https.git] / LayoutTests / fast / events / drag-and-drop-fire-drag-dragover.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 #console { height: 250px; overflow:scroll }
9 </style>
10 <script>
11     var dragMe;
12     var dropTarget;
13     var consoleElm;
14     var event;
15     
16     var ALLOWED_EFFECTS = 'none';
17     var DROP_EFFECT = 'copy';
18     
19     var lastDragOrDragOverEventFired = null;
20     var didDragEnterTarget = false;
21     
22     var DRAG_EVENT = "drag";
23     var DRAGOVER_EVENT = "dragover";
24     
25     window.onload = function()
26     {
27         dragMe = document.getElementById("dragMe");
28         dropTarget = document.getElementById("dropTarget");
29         consoleElm = document.getElementById("console");
30         
31         if (!dragMe || !dropTarget || !consoleElm)
32             return;
33         
34         dragMe.ondragstart = dragStart;
35         dragMe.ondragend = dragEnd;
36         dragMe.ondrag = dragOverWithRespectToSource;
37         
38         dropTarget.ondragenter = dragEntered;
39         dropTarget.ondragleave = dragLeft;
40         dropTarget.ondragover = dragOver;
41         dropTarget.ondrop = drop;
42         
43         runTest();
44     }
45     
46     function dragStart(e)
47     {
48         event = e;
49         e.dataTransfer.effectAllowed = ALLOWED_EFFECTS;
50         e.dataTransfer.setData('Text', e.target.textContent);
51     }
52     
53     function dragEnd(e)
54     {
55         return;
56     }
57     
58     function dragEntered(e)
59     {
60         didDragEnterTarget = true;
61         dragEnteredAndUpdated(e);
62     }
63     
64     function dragLeft(e)
65     {
66         didDragEnterTarget = false;
67         cancelDrag(e);
68     }
69     
70     function dragOverWithRespectToSource(e)
71     {
72         checkDragState(e);
73         lastDragOrDragOverEventFired = DRAG_EVENT;
74         cancelDrag(e);
75     }
76     
77     function dragOver(e)
78     {
79         checkDragState(e);
80         lastDragOrDragOverEventFired = DRAGOVER_EVENT;
81         dragEnteredAndUpdated(e);
82     }
83     
84     function dragEnteredAndUpdated(e)
85     {
86         event = e;
87         e.dataTransfer.dropEffect = DROP_EFFECT;
88         cancelDrag(e);
89     }
90     
91     function drop(e)
92     {
93         cancelDrag(e);
94     }
95     
96     function cancelDrag(e)
97     {
98         if (e.preventDefault)
99             e.preventDefault();
100         else {
101             // Assume this script is executing within Internet Explorer
102             e.returnValue = false;
103         }
104     }
105     
106     function checkDragState(e)
107     {
108         event = 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.');
114             else
115                 testFailed('drag should have fired before dragover. Instead, dragover fired first.');
116         }
117     }
118
119     function runTest()
120     {
121         if (!window.eventSender)
122             return;
123             
124         if (window.testRunner)
125             testRunner.dumpAsText();
126             
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;
131         
132         eventSender.mouseMoveTo(startX, startY);
133         eventSender.mouseDown();
134         eventSender.leapForward(100);
135         eventSender.mouseMoveTo(endX, endY);
136         eventSender.mouseUp();
137         
138         var testContainer = document.getElementById("test-container");
139         if (testContainer)
140             document.body.removeChild(testContainer);
141         debug('<br /><span class="pass">TEST COMPLETE</span>');
142     }
143 </script>
144 </head>
145 <body>
146     <p id="description"></p>
147     <div id="test-container">
148         <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code>
149         <br/><br/>
150         <div id="dropTarget">Drop the red square onto me.</div>
151         <hr/>
152         <p>Items that can be dragged to the drop target:</p>
153         <div id="dragMe" draggable="true">Square</div>
154         <hr/>
155     </div>
156     <div id="console"></div>
157     <script>
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.");
160     </script>
161 </body>
162 </html>