Home | History | Annotate | Download | only in ManualTests 
      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>
    112