LayoutTests/fast/events/drag-dataTransferItemList.html - WebKit - Git at Google

 <!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>
	<!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>