[DnD] effectAllowed and dropEffect can be set to bogus values.
[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 (chosenEffectAllowed === "dummy") {
103             // If a bad effectAllowed is attempted to be set, it should never be set, and the
104             // effectAllowed should be uninitialized.
105             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");
106             
107             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
108             // doesn't need special cases for undefined.
109             chosenEffectAllowed = "uninitialized";
110         }
111         
112         if (isDropEffectAllowed(chosenDropEffect, chosenEffectAllowed))
113             shouldBeEqualToString('event.dataTransfer.dropEffect', dropEffectElem.options[dropEffectElem.selectedIndex].value);
114         else
115             shouldBeEqualToString('event.dataTransfer.dropEffect', 'none');
116             
117     }
118     
119     function isDropEffectAllowed(chosenDropEffect, allowedDropEffect) {
120         // Extracted from the HTML 5 drag-and-drop section, http://dev.w3.org/html5/spec/Overview.html#dnd
121         if (chosenDropEffect == "none")
122             return true;
123         if (chosenDropEffect == "copy" && ["copy", "copyLink", "copyMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
124             return true;
125         if (chosenDropEffect == "move" && ["move", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
126             return true;
127         if (chosenDropEffect == "link" && ["link", "copyLink", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
128             return true;
129         return false;
130     }
131
132     function runTest()
133     {
134         if (!window.eventSender)
135             return;
136             
137         if (window.layoutTestController)
138             layoutTestController.dumpAsText();
139             
140         var startX = dragMe.offsetLeft + 10;
141         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
142         var endX = dropTarget.offsetLeft + 10;
143         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
144         
145         var numEffectAllowed = effectAllowedElem.options.length;
146         var numEffects = dropEffectElem.options.length;
147         
148         for (var i = 0; i < numEffectAllowed; ++i) {
149             effectAllowedElem.options[i].selected = true;
150             debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
151             for (var j = 0; j < numEffects; ++j) {
152                 dropEffectElem.options[j].selected = true;
153                 eventSender.mouseMoveTo(startX, startY);
154                 eventSender.mouseDown();
155                 eventSender.leapForward(100);
156                 eventSender.mouseMoveTo(endX, endY);
157                 eventSender.mouseUp();
158             }
159         }
160         var testContainer = document.getElementById("test-container");
161         if (testContainer)
162             document.body.removeChild(testContainer);
163         debug('<br /><span class="pass">TEST COMPLETE</span>');
164     }
165 </script>
166 </head>
167 <body>
168     <p id="description"></p>
169     <div id="test-container">
170         <label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
171             <option value="uninitialized">Uninitialized</option>
172             <option value="undefined">Undefined</option>
173             <option value="none">None</option>
174             <option value="all">All</option>
175             <option value="copy">Copy</option>
176             <option value="move">Move</option>
177             <option value="link">Link</option>
178             <option value="copyMove">CopyMove</option>
179             <option value="copyLink">CopyLink</option>
180             <option value="linkMove">LinkMove</option>
181             <option value="dummy">Nonexistent (Dummy) Effect</option>
182         </select>
183         <br/><br/>
184         <div id="dropTarget">Drop the red square onto me.<br/><br/>
185             <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
186                 <option value="none">None</option>
187                 <option value="copy">Copy</option>
188                 <option value="move">Move</option>
189                 <option value="link">Link</option>
190                 <option value="dummy">Nonexistent (Dummy) Effect</option>
191             </select>
192         </div>
193         <hr/>
194         <p>Items that can be dragged to the drop target:</p>
195         <div id="dragMe" draggable="true">Square</div>
196         <hr/>
197     </div>
198     <div id="console"></div>
199     <script>
200         description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
201                     "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
202         var successfullyParsed = true;
203     </script>
204 </body>
205 </html>