releasemodifiersdrop.html (3440B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Modifier keys being released before drop</title> 5 <style type="text/css"> 6 div:first-child { 7 height: 100px; 8 width: 100px; 9 background: orange; 10 display: inline-block; 11 } 12 div:first-child + div { 13 height: 100px; 14 width: 100px; 15 background: blue; 16 display: inline-block; 17 } 18 div:first-child + div + div { 19 height: 100px; 20 width: 100px; 21 background: fuchsia; 22 display: inline-block; 23 } 24 div { 25 font-family: monospace; 26 } 27 table { 28 display: inline-table; 29 margin-right: 1em; 30 border-collapse: collapse; 31 } 32 table, th, td { 33 border: 1px solid black; 34 } 35 thead th { 36 background: silver; 37 color: black; 38 } 39 </style> 40 <script type="text/javascript"> 41 window.onload = function () { 42 var bde, bdo, bdo2, fde, fdo, fdo2, fdr; 43 var orange = document.getElementsByTagName('div')[0]; 44 orange.ondragstart = function (e) { 45 e.dataTransfer.setData('text','http://example.com/'); 46 e.dataTransfer.effectAllowed = 'linkMove'; 47 bde = bdo = bdo2 = fde = fdo = fdo2 = fdr = ''; 48 }; 49 var blue = document.getElementsByTagName('div')[1]; 50 blue.ondragenter = function (e) { 51 e.preventDefault(); 52 bde = e.dataTransfer.dropEffect; 53 }; 54 blue.ondragover = function (e) { 55 e.preventDefault(); 56 if( !bdo ) { 57 bdo = e.dataTransfer.dropEffect; 58 } 59 //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers 60 //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 61 bdo2 = e.dataTransfer.dropEffect; 62 }; 63 var fuchsia = document.getElementsByTagName('div')[2]; 64 fuchsia.ondragenter = function (e) { 65 e.preventDefault(); 66 fde = e.dataTransfer.dropEffect; 67 }; 68 fuchsia.ondragover = function (e) { 69 e.preventDefault(); 70 if( !fdo ) { fdo = e.dataTransfer.dropEffect; } 71 fdo2 = e.dataTransfer.dropEffect; 72 }; 73 fuchsia.ondrop = function (e) { 74 e.preventDefault(); 75 fdr = e.dataTransfer.dropEffect; 76 }; 77 orange.ondragend = function (e) { 78 var sequence = ([bde,bdo,bdo2,fde,fdo,fdo2,fdr,e.dataTransfer.dropEffect]).join('=>') 79 var desiredsequence = (['link','link','move','move','move','link','link','link']).join('=>') 80 if( sequence == desiredsequence ) { 81 document.getElementsByTagName('div')[3].innerHTML = 'PASS'; 82 } else { 83 document.getElementsByTagName('div')[3].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; 84 } 85 }; 86 }; 87 </script> 88 </head> 89 <body> 90 91 <div draggable="true"></div> 92 <div></div> 93 <div></div> 94 <div><strong> </strong></div> 95 <ol> 96 <li>Drag the orange square over the blue square</li> 97 <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> 98 <li>If supported by the platform, the mouse cursor should show that a "move" drop effect will be used</li> 99 <li>Continue dragging over the pink square</li> 100 <li>Release the modifier keys, and wait for at least half a second</li> 101 <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> 102 <li>Release the drag, then the keys</li> 103 <li>Fail if no new text appears above this list</li> 104 </ol> 105 <noscript><p>Enable JavaScript and reload</p></noscript> 106 107 </body> 108 </html>