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>