<!DOCTYPE html>
<title>drag &amp; drop - cross-document data drop</title>
<style>
  body > div {
    height: 200px;
    width: 200px;
    background-color: blue;
  }
</style>

<script>
window.onload = function() {
  var blue = document.getElementsByTagName('div')[0], fails = [];
  blue.ondragover = blue.ondragenter = function(e) {
   	e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
    if( e.dataTransfer.getData('text') ) {
			fails[fails.length] = '"' + e.dataTransfer.getData('text') + '" exposed during event ' + e.type;
		}
  };
	blue.ondrop = function(e) {
   	e.preventDefault();
    if( !e.dataTransfer.types.length ) {
			fails[fails.length] = 'no types found during event drop';
		}
		var foundtext = false;
    for( var i = 0; i < e.dataTransfer.types.length; i++ ) {
			if( e.dataTransfer.types[i] == 'text/plain' ) {
				foundtext = true;
				break;
			}
		}
		if( !foundtext ) {
			fails[fails.length] = 'text/plain type not found during event drop';
		}
    if( e.dataTransfer.getData('text') != 'dummy text' ) {
			fails[fails.length] = 'getData returned ' + e.dataTransfer.getData('text') + ' instead of "dummy text"';
		}
		document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS';
  };
};
</script>

<p>Drag the orange square onto the blue square. Fail if this text does not change.</p>
<div></div>

<noscript><p>Enable JavaScript and reload</p></noscript>