overlappingwindows.html (1858B)
1 <!DOCTYPE html> 2 <title>Dropping on always-on-top application windows that overlay the browser</title> 3 <style> 4 html, body, ol { 5 margin: 0; 6 padding: 0; 7 height: 100%; 8 width: 100%; 9 background: blue; 10 color: black; 11 list-style-position: inside; 12 } 13 div { 14 height: 100px; 15 width: 100px; 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 margin-top: -50px; 20 margin-left: -50px; 21 background: orange; 22 } 23 </style> 24 25 <script type="text/javascript"> 26 27 window.onload = function() { 28 var orange = document.getElementsByTagName('div')[0]; 29 orange.ondragstart = function(e) { 30 e.dataTransfer.effectAllowed = 'copy'; 31 e.dataTransfer.setData('Text', 'dummy text'); 32 }; 33 var blue = document.getElementsByTagName('ol')[0]; 34 blue.ondragenter = blue.ondragover = function(e) { 35 e.preventDefault(); 36 }; 37 blue.ondrop = function(e) { 38 e.preventDefault(); 39 this.innerHTML = 'FAIL'; 40 }; 41 }; 42 43 </script> 44 45 <ol> 46 <li>Position the browser window so that the blue part of this page extends behind the system taskbar.</li> 47 <li>Use your mouse to drag the orange box over a part of the taskbar that overlays the blue part of this page.</li> 48 <li>If supported by the platform, the mouse cursor should <em>not</em> show the browser's custom "copy" cursor, and should instead show the system's expected cursor for dropping on that part of the taskbar.</li> 49 <li>Release the drag. Fail if the text on this page changes.</li> 50 <li>Reload and repeat this test for:<ul> 51 <li>Where the blue part of this page extends under an always-on-top window (eg. the Windows Task Manager).</li> 52 <li>Where the blue part of this page extends under an always-on-top notification (eg. a system tray info balloon).</li> 53 </ul></li> 54 </ol> 55 <div draggable='true'></div> 56 <noscript><p>Enable JavaScript and reload</p></noscript>