<!DOCTYPE html>
<title>Dropping on always-on-top application windows that overlay the browser</title>
<style>
  html, body, ol {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: blue;
    color: black;
    list-style-position: inside;
  }
  div {
  	height: 100px;
  	width: 100px;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	margin-top: -50px;
  	margin-left: -50px;
    background: orange;
  }
</style>

<script type="text/javascript">

window.onload = function() {
  var orange = document.getElementsByTagName('div')[0];
  orange.ondragstart = function(e) {
		e.dataTransfer.effectAllowed = 'copy';
    e.dataTransfer.setData('Text', 'dummy text');
  };
  var blue = document.getElementsByTagName('ol')[0];
  blue.ondragenter = blue.ondragover = function(e) {
		e.preventDefault();
  };
  blue.ondrop = function(e) {
		e.preventDefault();
		this.innerHTML = 'FAIL';
  };
};

</script>

<ol>
	<li>Position the browser window so that the blue part of this page extends behind the system taskbar.</li>
	<li>Use your mouse to drag the orange box over a part of the taskbar that overlays the blue part of this page.</li>
	<li>If supported by the platform, the mouse cursor should <em>not</em> show the browser's custom &quot;copy&quot; cursor, and should instead show the system's expected cursor for dropping on that part of the taskbar.</li>
	<li>Release the drag. Fail if the text on this page changes.</li>
	<li>Reload and repeat this test for:<ul>
		<li>Where the blue part of this page extends under an always-on-top window (eg. the Windows Task Manager).</li>
		<li>Where the blue part of this page extends under an always-on-top notification (eg. a system tray info balloon).</li>
	</ul></li>
</ol>
<div draggable='true'></div>
<noscript><p>Enable JavaScript and reload</p></noscript>