LayoutTests/fast/events/dropzone-001.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   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     dropEffectElem.onclick = changeDropZone;
  29     dragMe.ondragstart = dragStart;
  30     dropTarget.ondrop = drop;
  31
  32     runTest();
  33 }
  34
  35 function changeDropZone()
  36 {
  37     dropTarget.setAttribute("webkitdropzone", dropEffectElem.options[dropEffectElem.selectedIndex].value + " string:text/plain");
  38 }
  39
  40 function dragStart(e)
  41 {
  42     event = e;
  43     if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
  44         e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
  45     e.dataTransfer.setData('text/plain', e.target.textContent);
  46 }
  47
  48 function printDropEvent(e)
  49 {
  50     chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
  51     chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
  52     debug("Received drop event for allowedEffect " + chosenEffectAllowed + " and chosenDropEffect " + chosenDropEffect);
  53 }
  54
  55 function runTest()
  56 {
  57     if (!window.eventSender)
  58         return;
  59
  60     if (window.testRunner)
  61         testRunner.dumpAsText();
  62
  63     var startX = dragMe.offsetLeft + 10;
  64     var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
  65     var endX = dropTarget.offsetLeft + 10;
  66     var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;
  67
  68     var numEffectAllowed = effectAllowedElem.options.length;
  69     var numEffects = dropEffectElem.options.length;
  70
  71     for (var i = 0; i < numEffectAllowed; ++i) {
  72         effectAllowedElem.options[i].selected = true;
  73         debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
  74         for (var j = 0; j < numEffects; ++j) {
  75             dropEffectElem.options[j].selected = true;
  76             changeDropZone();
  77
  78             eventSender.mouseMoveTo(startX, startY);
  79             eventSender.mouseDown();
  80             eventSender.leapForward(100);
  81             eventSender.mouseMoveTo(endX, endY);
  82             eventSender.mouseUp();
  83         }
  84     }
  85     var testContainer = document.getElementById("test-container");
  86     if (testContainer)
  87         document.body.removeChild(testContainer);
  88     debug('<br /><span class="pass">TEST COMPLETE</span>');
  89 }
  90 </script>
  91 <script src="resources/dropzone.js"></script>
  92 </head>
  93 <body>
  94 <p id="description"></p>
  95 <div id="test-container">
  96 <label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
  97 <option value="uninitialized">Uninitialized</option>
  98 <option value="undefined">Undefined</option>
  99 <option value="none">None</option>
 100 <option value="all">All</option>
 101 <option value="copy">Copy</option>
 102 <option value="move">Move</option>
 103 <option value="link">Link</option>
 104 <option value="copyMove">CopyMove</option>
 105 <option value="copyLink">CopyLink</option>
 106 <option value="linkMove">LinkMove</option>
 107 <option value="dummy">Nonexistent (Dummy) Effect</option>
 108 </select>
 109 <br/><br/>
 110 <div id="dropTarget">Drop the red square onto me.<br/><br/>
 111 <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
 112 <option value="none">None</option>
 113 <option value="copy">Copy</option>
 114 <option value="move">Move</option>
 115 <option value="link">Link</option>
 116 <option value="dummy">Nonexistent (Dummy) Effect</option>
 117 </select>
 118 </div>
 119 <hr/>
 120 <p>Items that can be dragged to the drop target:</p>
 121 <div id="dragMe" draggable="true">Square</div>
 122 <hr/>
 123 </div>
 124 <div id="console"></div>
 125 <script>
 126 description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
 127     "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
 128 </script>
 129 </body>
 130 </html>