Rename ENABLE_SUBTLE_CRYPTO to ENABLE_WEB_CRYPTO
[WebKit-https.git] / ManualTests / drag-cursor-notallowed.html
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>