WebCore/manual-tests/drag-cursor-notallowed.html
changeset 0 4f2f89ce4247
equal deleted inserted replaced
-1:000000000000 0:4f2f89ce4247
       
     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>