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

 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <style>
 #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
 #dropTarget {width: 256px; height: 256px; border: 1px dashed}
 #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
 </style>
 <script>
     var dragMe;
     var dropTarget;
     var effectAllowedElem;
     var dropEffectElem;
     var consoleElm;
     var event;

     window.onload = function()
     {
         dragMe = document.getElementById("dragMe");
         dropTarget = document.getElementById("dropTarget");
         effectAllowedElem = document.getElementById("effectAllowed");
         dropEffectElem = document.getElementById("dropEffect");
         consoleElm = document.getElementById("console");

         if (!dragMe || !dropTarget || !effectAllowedElem || !dropEffectElem || !consoleElm)
             return;

         dragMe.ondragstart = dragStart;
         dragMe.ondragend = dragEnd;

         dropTarget.ondragenter = dragEntered;
         dropTarget.ondragover = dragOver;
         dropTarget.ondrop = drop;

         runTest();
     }

     function dragStart(e)
     {
         event = e;
         if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
             e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;

         e.dataTransfer.setData('Text', e.target.textContent);
     }

     function dragEnd(e)
     {
         checkDragState(e);
         return;
     }

     function dragEntered(e)
     {
         dragEnteredAndUpdated(e);
     }

     function dragOver(e)
     {
         dragEnteredAndUpdated(e);
     }

     function dragEnteredAndUpdated(e)
     {
         event = e;
         e.dataTransfer.dropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
         cancelDrag(e);
     }

     function drop(e)
     {
         cancelDrag(e);
     }

     function cancelDrag(e)
     {
         if (e.preventDefault)
             e.preventDefault();
         else {
             // Assume this script is executing within Internet Explorer
             e.returnValue = false;
         }
     }

     function checkDragState(e)
     {
         event = e;
         var chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
         var chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
         var actualDropEffect = e.dataTransfer.dropEffect;

         if (chosenEffectAllowed === "undefined") {
             // If no effectAllowed is set, we should default to uninitialized. Make sure that's the case.
             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");

             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
             // doesn't need special cases for undefined.
             chosenEffectAllowed = "uninitialized";
         }

         if (chosenEffectAllowed === "dummy") {
             // If a bad effectAllowed is attempted to be set, it should never be set, and the
             // effectAllowed should be uninitialized.
             shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");

             // Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
             // doesn't need special cases for undefined.
             chosenEffectAllowed = "uninitialized";
         }
         expected = dropEffectElem.options[dropEffectElem.selectedIndex].value;
         if (chosenDropEffect == "dummy") {
             switch (chosenEffectAllowed) {
                 case "undefined":
                 case "copyLink":
                 case "uninitialized":
                 case "all":
                     expected = "copy";
                     break;
                 case "copyMove":
                 case "move":
                 case "linkMove":
                     expected = "move";
                     break;
                 default:
                     expected = chosenEffectAllowed;
             }
         }
         if (isDropEffectAllowed(chosenDropEffect, chosenEffectAllowed))
             shouldBeEqualToString('event.dataTransfer.dropEffect', expected);
         else
             shouldBeEqualToString('event.dataTransfer.dropEffect', 'none');

     }

     function isDropEffectAllowed(chosenDropEffect, allowedDropEffect) {
         // Extracted from the HTML 5 drag-and-drop section, http://dev.w3.org/html5/spec/Overview.html#dnd
         if (chosenDropEffect == "none")
             return true;
         if (chosenDropEffect == "copy" && ["copy", "copyLink", "copyMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
             return true;
         if (chosenDropEffect == "move" && ["move", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
             return true;
         if (chosenDropEffect == "link" && ["link", "copyLink", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
             return true;
         if (chosenDropEffect == "dummy" && ["copy", "link", "move", "copyLink", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
             return true;
         return false;
     }

     function runTest()
     {
         if (!window.eventSender)
             return;

         if (window.testRunner)
             testRunner.dumpAsText();

         var startX = dragMe.offsetLeft + 10;
         var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
         var endX = dropTarget.offsetLeft + 10;
         var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;

         var numEffectAllowed = effectAllowedElem.options.length;
         var numEffects = dropEffectElem.options.length;

         for (var i = 0; i < numEffectAllowed; ++i) {
             effectAllowedElem.options[i].selected = true;
             debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
             for (var j = 0; j < numEffects; ++j) {
                 dropEffectElem.options[j].selected = true;
                 eventSender.mouseMoveTo(startX, startY);
                 eventSender.mouseDown();
                 eventSender.leapForward(100);
                 eventSender.mouseMoveTo(endX, endY);
                 eventSender.mouseUp();
             }
         }
         var testContainer = document.getElementById("test-container");
         if (testContainer)
             document.body.removeChild(testContainer);
         debug('<br /><span class="pass">TEST COMPLETE</span>');
     }
 </script>
 </head>
 <body>
     <p id="description"></p>
     <div id="test-container">
         <label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
             <option value="uninitialized">Uninitialized</option>
             <option value="undefined">Undefined</option>
             <option value="none">None</option>
             <option value="all">All</option>
             <option value="copy">Copy</option>
             <option value="move">Move</option>
             <option value="link">Link</option>
             <option value="copyMove">CopyMove</option>
             <option value="copyLink">CopyLink</option>
             <option value="linkMove">LinkMove</option>
             <option value="dummy">Nonexistent (Dummy) Effect</option>
         </select>
         <br/><br/>
         <div id="dropTarget">Drop the red square onto me.<br/><br/>
             <label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
                 <option value="none">None</option>
                 <option value="copy">Copy</option>
                 <option value="move">Move</option>
                 <option value="link">Link</option>
                 <option value="dummy">Nonexistent (Dummy) Effect</option>
             </select>
         </div>
         <hr/>
         <p>Items that can be dragged to the drop target:</p>
         <div id="dragMe" draggable="true">Square</div>
         <hr/>
     </div>
     <div id="console"></div>
     <script>
         description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
                     "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
     </script>
 </body>
 </html>
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	<style>
	#dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
	#dropTarget {width: 256px; height: 256px; border: 1px dashed}
	#dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
	</style>
	<script>
	var dragMe;
	var dropTarget;
	var effectAllowedElem;
	var dropEffectElem;
	var consoleElm;
	var event;

	window.onload = function()
	{
	dragMe = document.getElementById("dragMe");
	dropTarget = document.getElementById("dropTarget");
	effectAllowedElem = document.getElementById("effectAllowed");
	dropEffectElem = document.getElementById("dropEffect");
	consoleElm = document.getElementById("console");

	if (!dragMe \|\| !dropTarget \|\| !effectAllowedElem \|\| !dropEffectElem \|\| !consoleElm)
	return;

	dragMe.ondragstart = dragStart;
	dragMe.ondragend = dragEnd;

	dropTarget.ondragenter = dragEntered;
	dropTarget.ondragover = dragOver;
	dropTarget.ondrop = drop;

	runTest();
	}

	function dragStart(e)
	{
	event = e;
	if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
	e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;

	e.dataTransfer.setData('Text', e.target.textContent);
	}

	function dragEnd(e)
	{
	checkDragState(e);
	return;
	}

	function dragEntered(e)
	{
	dragEnteredAndUpdated(e);
	}

	function dragOver(e)
	{
	dragEnteredAndUpdated(e);
	}

	function dragEnteredAndUpdated(e)
	{
	event = e;
	e.dataTransfer.dropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
	cancelDrag(e);
	}

	function drop(e)
	{
	cancelDrag(e);
	}

	function cancelDrag(e)
	{
	if (e.preventDefault)
	e.preventDefault();
	else {
	// Assume this script is executing within Internet Explorer
	e.returnValue = false;
	}
	}

	function checkDragState(e)
	{
	event = e;
	var chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
	var chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
	var actualDropEffect = e.dataTransfer.dropEffect;

	if (chosenEffectAllowed === "undefined") {
	// If no effectAllowed is set, we should default to uninitialized. Make sure that's the case.
	shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");

	// Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
	// doesn't need special cases for undefined.
	chosenEffectAllowed = "uninitialized";
	}

	if (chosenEffectAllowed === "dummy") {
	// If a bad effectAllowed is attempted to be set, it should never be set, and the
	// effectAllowed should be uninitialized.
	shouldBeEqualToString("event.dataTransfer.effectAllowed", "uninitialized");

	// Then set the chosenEffectAllowed so isDropEffectAllowed matches the HTML5 spec, and
	// doesn't need special cases for undefined.
	chosenEffectAllowed = "uninitialized";
	}
	expected = dropEffectElem.options[dropEffectElem.selectedIndex].value;
	if (chosenDropEffect == "dummy") {
	switch (chosenEffectAllowed) {
	case "undefined":
	case "copyLink":
	case "uninitialized":
	case "all":
	expected = "copy";
	break;
	case "copyMove":
	case "move":
	case "linkMove":
	expected = "move";
	break;
	default:
	expected = chosenEffectAllowed;
	}
	}
	if (isDropEffectAllowed(chosenDropEffect, chosenEffectAllowed))
	shouldBeEqualToString('event.dataTransfer.dropEffect', expected);
	else
	shouldBeEqualToString('event.dataTransfer.dropEffect', 'none');

	}

	function isDropEffectAllowed(chosenDropEffect, allowedDropEffect) {
	// Extracted from the HTML 5 drag-and-drop section, http://dev.w3.org/html5/spec/Overview.html#dnd
	if (chosenDropEffect == "none")
	return true;
	if (chosenDropEffect == "copy" && ["copy", "copyLink", "copyMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
	return true;
	if (chosenDropEffect == "move" && ["move", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
	return true;
	if (chosenDropEffect == "link" && ["link", "copyLink", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
	return true;
	if (chosenDropEffect == "dummy" && ["copy", "link", "move", "copyLink", "copyMove", "linkMove", "uninitialized", "all"].indexOf(allowedDropEffect) != -1)
	return true;
	return false;
	}

	function runTest()
	{
	if (!window.eventSender)
	return;

	if (window.testRunner)
	testRunner.dumpAsText();

	var startX = dragMe.offsetLeft + 10;
	var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
	var endX = dropTarget.offsetLeft + 10;
	var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;

	var numEffectAllowed = effectAllowedElem.options.length;
	var numEffects = dropEffectElem.options.length;

	for (var i = 0; i < numEffectAllowed; ++i) {
	effectAllowedElem.options[i].selected = true;
	debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
	for (var j = 0; j < numEffects; ++j) {
	dropEffectElem.options[j].selected = true;
	eventSender.mouseMoveTo(startX, startY);
	eventSender.mouseDown();
	eventSender.leapForward(100);
	eventSender.mouseMoveTo(endX, endY);
	eventSender.mouseUp();
	}
	}
	var testContainer = document.getElementById("test-container");
	if (testContainer)
	document.body.removeChild(testContainer);
	debug('<br /><span class="pass">TEST COMPLETE</span>');
	}
	</script>
	</head>
	<body>
	<p id="description"></p>
	<div id="test-container">
	<label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
	<option value="uninitialized">Uninitialized</option>
	<option value="undefined">Undefined</option>
	<option value="none">None</option>
	<option value="all">All</option>
	<option value="copy">Copy</option>
	<option value="move">Move</option>
	<option value="link">Link</option>
	<option value="copyMove">CopyMove</option>
	<option value="copyLink">CopyLink</option>
	<option value="linkMove">LinkMove</option>
	<option value="dummy">Nonexistent (Dummy) Effect</option>
	</select>
	<br/><br/>
	<div id="dropTarget">Drop the red square onto me.<br/><br/>
	<label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
	<option value="none">None</option>
	<option value="copy">Copy</option>
	<option value="move">Move</option>
	<option value="link">Link</option>
	<option value="dummy">Nonexistent (Dummy) Effect</option>
	</select>
	</div>
	<hr/>
	<p>Items that can be dragged to the drop target:</p>
	<div id="dragMe" draggable="true">Square</div>
	<hr/>
	</div>
	<div id="console"></div>
	<script>
	description("This test checks that drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
	"For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
	</script>
	</body>
	</html>