LayoutTests/fast/events/drag-dataTransferItemList.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #drag {
   6     border: 1px solid black;
   7     height: 200px;
   8     width: 200px;
   9 }
  10 #drop {
  11     border: 1px solid black;
  12     height: 200px;
  13     width: 200px;
  14 }
  15 </style>
  16 <script>
  17 function assertEq(left, right)
  18 {
  19     if (left === right)
  20         log('PASS: ' + left + " === " + right);
  21     else
  22         log('FAIL: ' + left + "(of type " + (typeof left) + ") !== " + right + "(of type " + (typeof right) + ")");
  23 }
  24 function log(str)
  25 {
  26     var result = document.getElementById('result');
  27     result.appendChild(document.createTextNode(str));
  28     result.appendChild(document.createElement('br'));
  29 }
  30
  31 function legacyDragStart(dataTransfer)
  32 {
  33     dataTransfer.setData('text', 'sample');
  34     dataTransfer.setData('url', 'http://www.google.com/');
  35     dataTransfer.setData('text/html', '<em>Markup</em>');
  36     dataTransfer.setData('custom-data', 'hello world');
  37 }
  38
  39 function itemListDragStart(dataTransfer)
  40 {
  41     dataTransfer.items.add('sample', 'text/plain');
  42     dataTransfer.items.add('http://www.google.com/', 'text/uri-list');
  43     dataTransfer.items.add('<em>Markup</em>', 'text/html');
  44     dataTransfer.items.add('hello world', 'custom-data');
  45 }
  46
  47 function dragstart(event)
  48 {
  49     var dragMethod = document.getElementById('dragMethod');
  50     if (dragMethod.selectedIndex == 0)
  51         legacyDragStart(event.dataTransfer);
  52     else if (dragMethod.selectedIndex == 1)
  53         itemListDragStart(event.dataTransfer);
  54 }
  55
  56 function dragenter(event)
  57 {
  58     event.preventDefault();
  59 }
  60
  61 function dragover(event)
  62 {
  63     event.preventDefault();
  64 }
  65
  66 function legacyDrop(dataTransfer)
  67 {
  68     assertEq(4, dataTransfer.types.length);
  69     if (dataTransfer.types.indexOf('text/plain') < 0)
  70         log('FAIL: types array did not contain "text"');
  71     if (dataTransfer.types.indexOf('text/uri-list') < 0)
  72         log('FAIL: types array did not contain "text/uri-list"');
  73     if (dataTransfer.types.indexOf('text/html') < 0)
  74         log('FAIL: types array did not contain "text/html"');
  75     if (dataTransfer.types.indexOf('custom-data') < 0)
  76         log('FAIL: types array did not contain "custom-data"');
  77     assertEq('sample', dataTransfer.getData('text'));
  78     assertEq('http://www.google.com/', dataTransfer.getData('url'));
  79     assertEq('<em>Markup</em>', dataTransfer.getData('text/html'));
  80     assertEq('hello world', dataTransfer.getData('custom-data'));
  81     runNext();
  82 }
  83
  84 var outstandingRequests;
  85 function itemListDrop(dataTransfer)
  86 {
  87     outstandingRequests = 0;
  88     assertEq(4, dataTransfer.items.length);
  89     var types = [];
  90     for (var i = 0; i < dataTransfer.items.length; ++i) {
  91         types.push({kind: dataTransfer.items[i].kind, type: dataTransfer.items[i].type});
  92     }
  93     types.sort(function (a, b) { return a.type.localeCompare(b.type); });
  94     var expectedTypes = [
  95         { kind: 'string', type: 'custom-data'},
  96         { kind: 'string', type: 'text/html'},
  97         { kind: 'string', type: 'text/plain'},
  98         { kind: 'string', type: 'text/uri-list'},
  99     ];
 100     assertEq(JSON.stringify(expectedTypes), JSON.stringify(types));
 101     var expectedResults = {
 102         'custom-data': 'hello world',
 103         'text/html': '<em>Markup</em>',
 104         'text/plain': 'sample',
 105         'text/uri-list': 'http://www.google.com/',
 106     }
 107     function makeClosure(expectedData)
 108     {
 109         ++outstandingRequests;
 110         return function (data) {
 111             assertEq(expectedData, data);
 112             if (--outstandingRequests == 0)
 113                 window.setTimeout(runNext, 0);
 114         }
 115     }
 116     // We use this funky loop to make sure we always print out results in the same order.
 117     for (var i = 0; i < types.length; ++i) {
 118         for (var j = 0; j < dataTransfer.items.length; ++j) {
 119             if (types[i].type == dataTransfer.items[j].type) {
 120                 dataTransfer.items[j].getAsString(makeClosure(expectedResults[types[i].type]));
 121                 break;
 122             }
 123         }
 124     }
 125 }
 126
 127 function drop(event)
 128 {
 129     var dropMethod = document.getElementById('dropMethod');
 130     if (dropMethod.selectedIndex == 0)
 131         legacyDrop(event.dataTransfer);
 132     else if (dropMethod.selectedIndex == 1)
 133         itemListDrop(event.dataTransfer);
 134     event.preventDefault();
 135 }
 136
 137 function runTest(dragMethodIndex, dropMethodIndex)
 138 {
 139     var dragMethod = document.getElementById('dragMethod');
 140     var dropMethod = document.getElementById('dropMethod');
 141     dragMethod.selectedIndex = dragMethodIndex;
 142     dropMethod.selectedIndex = dropMethodIndex;
 143     log('Running test with ' + dragMethod.value + ' drag handler and ' + dropMethod.value + ' drop handler');
 144
 145     var dragElement = document.getElementById('drag');
 146     eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
 147                             dragElement.offsetTop + dragElement.offsetHeight / 2);
 148     eventSender.mouseDown();
 149     eventSender.leapForward(100);
 150     var dropElement = document.getElementById('drop');
 151     eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
 152                             dropElement.offsetTop + dropElement.offsetHeight / 2);
 153     eventSender.mouseUp();
 154 }
 155
 156 var testCases = [
 157     [0, 0],
 158     [0, 1],
 159     [1, 0],
 160     [1, 1],
 161 ];
 162 function runNext()
 163 {
 164     if (!window.layoutTestController)
 165         return;
 166     var testCase = testCases.shift();
 167     if (testCase)
 168         runTest.apply(null, testCase);
 169     else
 170         layoutTestController.notifyDone();
 171 }
 172
 173 window.onload = function()
 174 {
 175     if (!window.layoutTestController)
 176         return;
 177     layoutTestController.dumpAsText();
 178     layoutTestController.waitUntilDone();
 179
 180     runNext();
 181 }
 182 </script>
 183 </head>
 184 <body>
 185 <p>To manually test, drag 'Drag Me' to 'Drop Here' and drop.  Several lines that say 'PASS' should appear below.
 186 <div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
 187 <div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
 188 </div>
 189 <div>Drag handler: <select id="dragMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
 190 <div>Drop handler: <select id="dropMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
 191 <div id="result"></div>
 192 </body>
 193 </html>