LayoutTests/fast/events/drag-and-drop.html

   1 <html>
   2 <head>
   3 <script src="../js/resources/js-test-pre.js"></script>
   4 <style>
   5 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
   6 #dropTarget {width: 256px; height: 256px; border: 1px dashed}
   7 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
   8 </style>
   9 <script>
  10     var dragMe;
  11     var dropTarget;
  12     var effectAllowedElem;
  13     var dropEffectElem;
  14     var consoleElm;
  15     var event;
  16
  17     window.onload = function()
  18     {
  19         dragMe = document.getElementById("dragMe");
  20         dropTarget = document.getElementById("dropTarget");
  21         effectAllowedElem = document.getElementById("effectAllowed");
  22         dropEffectElem = document.getElementById("dropEffect");
  23         consoleElm = document.getElementById("console");
  24
  25         if (!dragMe || !dropTarget || !effectAllowedElem || !dropEffectElem || !consoleElm)
  26             return;
  27
  28         dragMe.ondragstart = dragStart;
  29         dragMe.ondragend = dragEnd;
  30
  31         dropTarget.ondragenter = dragEntered;
  32         dropTarget.ondragover = dragOver;
  33         dropTarget.ondrop = drop;
  34
  35         runTest();
  36     }
  37
  38     function dragStart(e)
  39     {
  40         event = e;
  41         if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
  42             e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
  43
  44         e.dataTransfer.setData('Text', e.target.textContent);
  45     }
  46
  47     function dragEnd(e)
  48     {
  49         checkDragState(e);
  50         return;
  51     }
  52
  53     function dragEntered(e)
  54     {
  55         dragEnteredAndUpdated(e);
  56     }
  57
  58     function dragOver(e)
  59     {
  60         dragEnteredAndUpdated(e);
  61     }
  62
  63     function dragEnteredAndUpdated(e)
  64     {
  65         event = e;
  66         e.dataTransfer.dropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
  67         cancelDrag(e);
  68     }
  69
  70     function drop(e)
  71     {
  72         cancelDrag(e);
  73     }
  74
  75     function cancelDrag(e)
  76     {
  77         if (e.preventDefault)
  78             e.preventDefault();
  79         else {
  80             // Assume this script is executing within Internet Explorer
  81             e.returnValue = false;
  82         }
  83     }
  84
  85     function checkDragState(e)
  86     {
  87         event = e;
  88         var chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
  89         var chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
  90         var actualDropEffect = e.dataTransfer.dropEffect;
  91
  92         if (chosenEffectAllowed === "undefined") {
  93             // If no effectAllowed is set, we should default to uninitialized. Make sure that's the case.
  94             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");
  95
  96             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
  97             // doesn't need special cases for undefined.
  98             chosenEffectAllowed = "uninitialized";
  99         }
 100
 101         if (chosenEffectAllowed === "dummy") {
 102             // If a bad effectAllowed is attempted to be set, it should never be set, and the
 103             // effectAllowed should be uninitialized.
 104             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");
 105
 106             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
 107             // doesn't need special cases for undefined.
 108             chosenEffectAllowed = "uninitialized";
 109         }
 110         expected = dropEffectElem.options[dropEffectElem.selectedIndex].value;
 111         if (chosenDropEffect == "dummy") {
 112             switch (chosenEffectAllowed) {
 113                 case "undefined":
 114                 case "copyLink":
 115                 case "uninitialized":
 116                 case "all":
 117                     expected = "copy";
 118                     break;
 119                 case "copyMove":
 120                 case "move":
 121                 case "linkMove":
 122                     expected = "move";
 123                     break;
 124                 default:
 125                     expected = chosenEffectAllowed;
 126             }
 127         }
 128         if (isDropEffectAllowed(chosenDropEffect, chosenEffectAllowed))
 129             shouldBeEqualToString('event.dataTransfer.dropEffect', expected);
 130         else
 131             shouldBeEqualToString('event.dataTransfer.dropEffect', 'none');
 132
 133     }
 134
 135     function isDropEffectAllowed(chosenDropEffect, allowedDropEffect) {
 136         // Extracted from the HTML 5 drag-and-drop section, http://dev.w3.org/html5/spec/Overview.html#dnd
 137         if (chosenDropEffect == "none")
 138             return true;
 139         if (chosenDropEffect == "copy" && ["copy", "copyLink", "copyMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
 140             return true;
 141         if (chosenDropEffect == "move" && ["move", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
 142             return true;
 143         if (chosenDropEffect == "link" && ["link", "copyLink", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
 144             return true;
 145         if (chosenDropEffect == "dummy" && ["copy", "link", "move", "copyLink", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
 146             return true;
 147         return false;
 148     }
 149
 150     function runTest()
 151     {
 152         if (!window.eventSender)
 153             return;
 154
 155         if (window.testRunner)
 156             testRunner.dumpAsText();
 157
 158         var startX = dragMe.offsetLeft + 10;
 159         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
 160         var endX = dropTarget.offsetLeft + 10;
 161         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
 162
 163         var numEffectAllowed = effectAllowedElem.options.length;
 164         var numEffects = dropEffectElem.options.length;
 165
 166         for (var i = 0; i < numEffectAllowed; ++i) {
 167             effectAllowedElem.options[i].selected = true;
 168             debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
 169             for (var j = 0; j < numEffects; ++j) {
 170                 dropEffectElem.options[j].selected = true;
 171                 eventSender.mouseMoveTo(startX, startY);
 172                 eventSender.mouseDown();
 173                 eventSender.leapForward(100);
 174                 eventSender.mouseMoveTo(endX, endY);
 175                 eventSender.mouseUp();
 176             }
 177         }
 178         var testContainer = document.getElementById("test-container");
 179         if (testContainer)
 180             document.body.removeChild(testContainer);
 181         debug('<br /><span class="pass">TEST COMPLETE</span>');
 182     }
 183 </script>
 184 </head>
 185 <body>
 186     <p id="description"></p>
 187     <div id="test-container">
 188         <label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
 189             <option value="uninitialized">Uninitialized</option>
 190             <option value="undefined">Undefined</option>
 191             <option value="none">None</option>
 192             <option value="all">All</option>
 193             <option value="copy">Copy</option>
 194             <option value="move">Move</option>
 195             <option value="link">Link</option>
 196             <option value="copyMove">CopyMove</option>
 197             <option value="copyLink">CopyLink</option>
 198             <option value="linkMove">LinkMove</option>
 199             <option value="dummy">Nonexistent (Dummy) Effect</option>
 200         </select>
 201         <br/><br/>
 202         <div id="dropTarget">Drop the red square onto me.<br/><br/>
 203             <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
 204                 <option value="none">None</option>
 205                 <option value="copy">Copy</option>
 206                 <option value="move">Move</option>
 207                 <option value="link">Link</option>
 208                 <option value="dummy">Nonexistent (Dummy) Effect</option>
 209             </select>
 210         </div>
 211         <hr/>
 212         <p>Items that can be dragged to the drop target:</p>
 213         <div id="dragMe" draggable="true">Square</div>
 214         <hr/>
 215     </div>
 216     <div id="console"></div>
 217     <script>
 218         description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
 219                     "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
 220     </script>
 221 </body>
 222 </html>