|
1 <html> |
|
2 <head> |
|
3 <style> |
|
4 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle } |
|
5 #dropTarget {width: 256px; height: 256px; border: 1px dashed} |
|
6 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white} |
|
7 .pass { font-weight: bold; color: green; } |
|
8 .fail { font-weight: bold; color: red; } |
|
9 </style> |
|
10 <script> |
|
11 var dragMe; |
|
12 var dropTarget; |
|
13 var messageElm; |
|
14 var defaultMessageElm; |
|
15 var event; |
|
16 |
|
17 var ALLOWED_EFFECTS = 'move'; |
|
18 var DROP_EFFECT = 'copy'; |
|
19 |
|
20 window.onload = function() |
|
21 { |
|
22 dragMe = document.getElementById("dragMe"); |
|
23 dropTarget = document.getElementById("dropTarget"); |
|
24 messageElm = document.getElementById("message"); |
|
25 defaultMessageElm = document.getElementById("default-message"); |
|
26 |
|
27 if (!dragMe || !dropTarget || !messageElm || !defaultMessageElm) |
|
28 return; |
|
29 |
|
30 dragMe.ondragstart = dragStart; |
|
31 dragMe.ondragend = dragEnd; |
|
32 |
|
33 dropTarget.ondragenter = dragEntered; |
|
34 dropTarget.ondragover = dragOver; |
|
35 dropTarget.ondrop = drop; |
|
36 } |
|
37 |
|
38 function dragStart(e) |
|
39 { |
|
40 event = e; |
|
41 e.dataTransfer.effectAllowed = ALLOWED_EFFECTS; |
|
42 e.dataTransfer.setData('Text', e.target.textContent); |
|
43 } |
|
44 |
|
45 function dragEnd(e) |
|
46 { |
|
47 messageElm.style.visibility = "hidden"; |
|
48 defaultMessageElm.style.visibility = "visible"; |
|
49 return; |
|
50 } |
|
51 |
|
52 function dragEntered(e) |
|
53 { |
|
54 messageElm.style.visibility = "visible"; |
|
55 defaultMessageElm.style.visibility = "hidden"; |
|
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 = DROP_EFFECT; |
|
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 </script> |
|
86 </head> |
|
87 <body> |
|
88 <p id="description">This test can be used to verify that the not-allowed cursor is shown during an invalid drag-and-drop operation. |
|
89 In particular, if the effectAllowed is <code><script>document.write(ALLOWED_EFFECTS)</script></code> and the dropEffect of the |
|
90 drop target is <code><script>document.write(DROP_EFFECT)</script></code> then the drop is not allowed and the cursor should |
|
91 change to the not-allowed cursor. Note, this test only pertains to the Windows build since the Mac build does not show a drop cursor |
|
92 for a not-allowed drop operation (see bug #25925). |
|
93 <br/><br/> |
|
94 Drag the red square over the drop target (demarcated by the dashed boundary). While hovering over the drop target, if the cursor |
|
95 is <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw=="> then the test <span class="pass">PASSED</span>. Otherwise, the test <span class="fail">FAILED</span>.</p> |
|
96 <div id="test-container"> |
|
97 <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code> |
|
98 <br/><br/> |
|
99 <div id="dropTarget"> |
|
100 <div id="default-message">Drag the red square over me.<br/><br/> |
|
101 <label for="dropEffect">Expects dropEffect:</label> <code><script>document.write(DROP_EFFECT)</script></code> |
|
102 </div> |
|
103 <div id="message" style="visibility:hidden">The cursor should be <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw==">. Is it?</div> |
|
104 </div> |
|
105 <hr/> |
|
106 <p>Items that can be dragged to the drop target:</p> |
|
107 <div id="dragMe" draggable="true">Square</div> |
|
108 <hr/> |
|
109 </div> |
|
110 </body> |
|
111 </html> |