194 lines
6.0 KiB
HTML
194 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#drag {
|
|
border: 1px solid black;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
#drop {
|
|
border: 1px solid black;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
<script>
|
|
function assertEq(left, right)
|
|
{
|
|
if (left === right)
|
|
log('PASS: ' + left + " === " + right);
|
|
else
|
|
log('FAIL: ' + left + "(of type " + (typeof left) + ") !== " + right + "(of type " + (typeof right) + ")");
|
|
}
|
|
function log(str)
|
|
{
|
|
var result = document.getElementById('result');
|
|
result.appendChild(document.createTextNode(str));
|
|
result.appendChild(document.createElement('br'));
|
|
}
|
|
|
|
function legacyDragStart(dataTransfer)
|
|
{
|
|
dataTransfer.setData('text', 'sample');
|
|
dataTransfer.setData('url', 'http://www.google.com/');
|
|
dataTransfer.setData('text/html', '<em>Markup</em>');
|
|
dataTransfer.setData('custom-data', 'hello world');
|
|
}
|
|
|
|
function itemListDragStart(dataTransfer)
|
|
{
|
|
dataTransfer.items.add('sample', 'text/plain');
|
|
dataTransfer.items.add('http://www.google.com/', 'text/uri-list');
|
|
dataTransfer.items.add('<em>Markup</em>', 'text/html');
|
|
dataTransfer.items.add('hello world', 'custom-data');
|
|
}
|
|
|
|
function dragstart(event)
|
|
{
|
|
var dragMethod = document.getElementById('dragMethod');
|
|
if (dragMethod.selectedIndex == 0)
|
|
legacyDragStart(event.dataTransfer);
|
|
else if (dragMethod.selectedIndex == 1)
|
|
itemListDragStart(event.dataTransfer);
|
|
}
|
|
|
|
function dragenter(event)
|
|
{
|
|
event.preventDefault();
|
|
}
|
|
|
|
function dragover(event)
|
|
{
|
|
event.preventDefault();
|
|
}
|
|
|
|
function legacyDrop(dataTransfer)
|
|
{
|
|
assertEq(4, dataTransfer.types.length);
|
|
if (dataTransfer.types.indexOf('text/plain') < 0)
|
|
log('FAIL: types array did not contain "text"');
|
|
if (dataTransfer.types.indexOf('text/uri-list') < 0)
|
|
log('FAIL: types array did not contain "text/uri-list"');
|
|
if (dataTransfer.types.indexOf('text/html') < 0)
|
|
log('FAIL: types array did not contain "text/html"');
|
|
if (dataTransfer.types.indexOf('custom-data') < 0)
|
|
log('FAIL: types array did not contain "custom-data"');
|
|
assertEq('sample', dataTransfer.getData('text'));
|
|
assertEq('http://www.google.com/', dataTransfer.getData('url'));
|
|
assertEq('<em>Markup</em>', dataTransfer.getData('text/html'));
|
|
assertEq('hello world', dataTransfer.getData('custom-data'));
|
|
runNext();
|
|
}
|
|
|
|
var outstandingRequests;
|
|
function itemListDrop(dataTransfer)
|
|
{
|
|
outstandingRequests = 0;
|
|
assertEq(4, dataTransfer.items.length);
|
|
var types = [];
|
|
for (var i = 0; i < dataTransfer.items.length; ++i) {
|
|
types.push({kind: dataTransfer.items[i].kind, type: dataTransfer.items[i].type});
|
|
}
|
|
types.sort(function (a, b) { return a.type.localeCompare(b.type); });
|
|
var expectedTypes = [
|
|
{ kind: 'string', type: 'custom-data'},
|
|
{ kind: 'string', type: 'text/html'},
|
|
{ kind: 'string', type: 'text/plain'},
|
|
{ kind: 'string', type: 'text/uri-list'},
|
|
];
|
|
assertEq(JSON.stringify(expectedTypes), JSON.stringify(types));
|
|
var expectedResults = {
|
|
'custom-data': 'hello world',
|
|
'text/html': '<em>Markup</em>',
|
|
'text/plain': 'sample',
|
|
'text/uri-list': 'http://www.google.com/',
|
|
}
|
|
function makeClosure(expectedData)
|
|
{
|
|
++outstandingRequests;
|
|
return function (data) {
|
|
assertEq(expectedData, data);
|
|
if (--outstandingRequests == 0)
|
|
window.setTimeout(runNext, 0);
|
|
}
|
|
}
|
|
// We use this funky loop to make sure we always print out results in the same order.
|
|
for (var i = 0; i < types.length; ++i) {
|
|
for (var j = 0; j < dataTransfer.items.length; ++j) {
|
|
if (types[i].type == dataTransfer.items[j].type) {
|
|
dataTransfer.items[j].getAsString(makeClosure(expectedResults[types[i].type]));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function drop(event)
|
|
{
|
|
var dropMethod = document.getElementById('dropMethod');
|
|
if (dropMethod.selectedIndex == 0)
|
|
legacyDrop(event.dataTransfer);
|
|
else if (dropMethod.selectedIndex == 1)
|
|
itemListDrop(event.dataTransfer);
|
|
event.preventDefault();
|
|
}
|
|
|
|
function runTest(dragMethodIndex, dropMethodIndex)
|
|
{
|
|
var dragMethod = document.getElementById('dragMethod');
|
|
var dropMethod = document.getElementById('dropMethod');
|
|
dragMethod.selectedIndex = dragMethodIndex;
|
|
dropMethod.selectedIndex = dropMethodIndex;
|
|
log('Running test with ' + dragMethod.value + ' drag handler and ' + dropMethod.value + ' drop handler');
|
|
|
|
var dragElement = document.getElementById('drag');
|
|
eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
|
|
dragElement.offsetTop + dragElement.offsetHeight / 2);
|
|
eventSender.mouseDown();
|
|
eventSender.leapForward(100);
|
|
var dropElement = document.getElementById('drop');
|
|
eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
|
|
dropElement.offsetTop + dropElement.offsetHeight / 2);
|
|
eventSender.mouseUp();
|
|
}
|
|
|
|
var testCases = [
|
|
[0, 0],
|
|
[0, 1],
|
|
[1, 0],
|
|
[1, 1],
|
|
];
|
|
function runNext()
|
|
{
|
|
if (!window.testRunner)
|
|
return;
|
|
var testCase = testCases.shift();
|
|
if (testCase)
|
|
runTest.apply(null, testCase);
|
|
else
|
|
testRunner.notifyDone();
|
|
}
|
|
|
|
window.onload = function()
|
|
{
|
|
if (!window.testRunner)
|
|
return;
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
|
|
runNext();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>To manually test, drag 'Drag Me' to 'Drop Here' and drop. Several lines that say 'PASS' should appear below.
|
|
<div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
|
|
<div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
|
|
</div>
|
|
<div>Drag handler: <select id="dragMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
|
|
<div>Drop handler: <select id="dropMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
|
|
<div id="result"></div>
|
|
</body>
|
|
</html>
|