third_party/WebKit/LayoutTests/fast/events/drag-dataTransferItemList.html

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