842b6073ca91615140793ac4470aaf82143bf61f
[WebKit-https.git] / LayoutTests / fast / events / drag-and-drop.html
1 <html>
2 <head>
3 <link rel="stylesheet" href="../js/resources/js-test-style.css">
4 <script src="../js/resources/js-test-pre.js"></script>
5 <style>
6 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
7 #dropTarget {width: 256px; height: 256px; border: 1px dashed}
8 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
9 </style>
10 <script>
11     var dragMe;
12     var dropTarget;
13     var effectAllowedElem;
14     var dropEffectElem;
15     var consoleElm;
16     var event;
17     
18     window.onload = function()
19     {
20         dragMe = document.getElementById("dragMe");
21         dropTarget = document.getElementById("dropTarget");
22         effectAllowedElem = document.getElementById("effectAllowed");
23         dropEffectElem = document.getElementById("dropEffect");
24         consoleElm = document.getElementById("console");
25         
26         if (!dragMe || !dropTarget || !effectAllowedElem || !dropEffectElem || !consoleElm)
27             return;
28         
29         dragMe.ondragstart = dragStart;
30         dragMe.ondragend = dragEnd;
31         
32         dropTarget.ondragenter = dragEntered;
33         dropTarget.ondragover = dragOver;
34         dropTarget.ondrop = drop;
35         
36         runTest();
37     }
38     
39     function dragStart(e)
40     {
41         event = e;
42         if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
43             e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
44
45         e.dataTransfer.setData('Text', e.target.textContent);
46     }
47     
48     function dragEnd(e)
49     {
50         checkDragState(e);
51         return;
52     }
53     
54     function dragEntered(e)
55     {
56         dragEnteredAndUpdated(e);
57     }
58     
59     function dragOver(e)
60     {
61         dragEnteredAndUpdated(e);
62     }
63     
64     function dragEnteredAndUpdated(e)
65     {
66         event = e;
67         e.dataTransfer.dropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
68         cancelDrag(e);
69     }
70     
71     function drop(e)
72     {
73         cancelDrag(e);
74     }
75     
76     function cancelDrag(e)
77     {
78         if (e.preventDefault)
79             e.preventDefault();
80         else {
81             // Assume this script is executing within Internet Explorer
82             e.returnValue = false;
83         }
84     }
85     
86     function checkDragState(e)
87     {
88         event = e;
89         var chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
90         var chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
91         var actualDropEffect = e.dataTransfer.dropEffect;
92         
93         if (chosenEffectAllowed === "undefined") {
94             // If no effectAllowed is set, we should default to uninitialized. Make sure that's the case.
95             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");
96             
97             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
98             // doesn't need special cases for undefined.
99             chosenEffectAllowed = "uninitialized";
100         }
101         
102         if (isDropEffectAllowed(chosenDropEffect, chosenEffectAllowed))
103             shouldBeEqualToString('event.dataTransfer.dropEffect', dropEffectElem.options[dropEffectElem.selectedIndex].value);
104         else
105             shouldBeEqualToString('event.dataTransfer.dropEffect', 'none');
106             
107     }
108     
109     function isDropEffectAllowed(chosenDropEffect, allowedDropEffect) {
110         // Extracted from the HTML 5 drag-and-drop section, http://dev.w3.org/html5/spec/Overview.html#dnd
111         if (chosenDropEffect == "none")
112             return true;
113         if (chosenDropEffect == "copy" && ["copy", "copyLink", "copyMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
114             return true;
115         if (chosenDropEffect == "move" && ["move", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
116             return true;
117         if (chosenDropEffect == "link" && ["link", "copyLink", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
118             return true;
119         return false;
120     }
121
122     function runTest()
123     {
124         if (!window.eventSender)
125             return;
126             
127         if (window.layoutTestController)
128             layoutTestController.dumpAsText();
129             
130         var startX = dragMe.offsetLeft + 10;
131         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
132         var endX = dropTarget.offsetLeft + 10;
133         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
134         
135         var numEffectAllowed = effectAllowedElem.options.length;
136         var numEffects = dropEffectElem.options.length;
137         
138         for (var i = 0; i < numEffectAllowed; ++i) {
139             effectAllowedElem.options[i].selected = true;
140             debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
141             for (var j = 0; j < numEffects; ++j) {
142                 dropEffectElem.options[j].selected = true;
143                 eventSender.mouseMoveTo(startX, startY);
144                 eventSender.mouseDown();
145                 eventSender.leapForward(100);
146                 eventSender.mouseMoveTo(endX, endY);
147                 eventSender.mouseUp();
148             }
149         }
150         var testContainer = document.getElementById("test-container");
151         if (testContainer)
152             document.body.removeChild(testContainer);
153         debug('<br /><span class="pass">TEST COMPLETE</span>');
154     }
155 </script>
156 </head>
157 <body>
158     <p id="description"></p>
159     <div id="test-container">
160         <label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
161             <option value="uninitialized">Uninitialized</option>
162             <option value="undefined">Undefined</option>
163             <option value="none">None</option>
164             <option value="all">All</option>
165             <option value="copy">Copy</option>
166             <option value="move">Move</option>
167             <option value="link">Link</option>
168             <option value="copyMove">CopyMove</option>
169             <option value="copyLink">CopyLink</option>
170             <option value="linkMove">LinkMove</option>
171             <option value="dummy">Nonexistent (Dummy) Effect</option>
172         </select>
173         <br/><br/>
174         <div id="dropTarget">Drop the red square onto me.<br/><br/>
175             <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
176                 <option value="none">None</option>
177                 <option value="copy">Copy</option>
178                 <option value="move">Move</option>
179                 <option value="link">Link</option>
180                 <option value="dummy">Nonexistent (Dummy) Effect</option>
181             </select>
182         </div>
183         <hr/>
184         <p>Items that can be dragged to the drop target:</p>
185         <div id="dragMe" draggable="true">Square</div>
186         <hr/>
187     </div>
188     <div id="console"></div>
189     <script>
190         description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
191                     "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
192         var successfullyParsed = true;
193     </script>
194 </body>
195 </html>