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