201-manual.html (2909B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>allowTargetOrigin with real dataTransfer should block dragenter, dragover, dragleave and drop synthetic events</title> 5 <style type="text/css"> 6 p + div { height: 100px; width: 100px; background: orange; } 7 </style> 8 <script type="text/javascript"> 9 window.onload = function () { 10 var orange = document.getElementsByTagName('div')[0], targ = document.getElementsByTagName('div')[1], evtdone = {}, fails = []; 11 orange.ondragstart = function (e) { 12 var evt; 13 e.dataTransfer.effectAllowed = 'copy'; 14 e.dataTransfer.setData('text','dummy text'); 15 try { 16 e.dataTransfer.allowTargetOrigin('http://example.com'); 17 } catch(e) { 18 fails[fails.length] = 'allowTargetOrigin threw an error: '+e; 19 } 20 try { 21 evt = new DragEvent('dragstart', {dataTransfer:e.dataTransfer}); 22 targ.dispatchEvent(evt); 23 evt = new DragEvent('drag', {dataTransfer:e.dataTransfer}); 24 targ.dispatchEvent(evt); 25 evt = new DragEvent('dragenter', {dataTransfer:e.dataTransfer}); 26 targ.dispatchEvent(evt); 27 evt = new DragEvent('dragover', {dataTransfer:e.dataTransfer}); 28 targ.dispatchEvent(evt); 29 evt = new DragEvent('dragleave', {dataTransfer:e.dataTransfer}); 30 targ.dispatchEvent(evt); 31 evt = new DragEvent('drop', {dataTransfer:e.dataTransfer}); 32 targ.dispatchEvent(evt); 33 evt = new DragEvent('dragend', {dataTransfer:e.dataTransfer}); 34 targ.dispatchEvent(evt); 35 } catch(e) { 36 fails[fails.length] = 'Synthetic event threw an error: '+e; 37 } 38 if( !evtdone.dragstart ) { 39 fails[fails.length] = 'dragstart did not fire'; 40 } 41 if( !evtdone.drag ) { 42 fails[fails.length] = 'drag did not fire'; 43 } 44 if( !evtdone.dragend ) { 45 fails[fails.length] = 'dragend did not fire'; 46 } 47 if( evtdone.dragenter ) { 48 fails[fails.length] = 'dragenter fired'; 49 } 50 if( evtdone.dragover ) { 51 fails[fails.length] = 'dragover fired'; 52 } 53 if( evtdone.dragleave ) { 54 fails[fails.length] = 'dragleave fired'; 55 } 56 if( evtdone.drop ) { 57 fails[fails.length] = 'drop fired'; 58 } 59 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; 60 }; 61 targ.ondragstart = function (e) { 62 evtdone[e.type] = true; 63 }; 64 targ.ondragenter = targ.ondragover = targ.ondrop = function (e) { 65 e.preventDefault(); 66 evtdone[e.type] = true; 67 }; 68 targ.ondrag = targ.ondragleave = function (e) { 69 evtdone[e.type] = true; 70 }; 71 targ.ondragend = function (e) { 72 evtdone[e.type] = true; 73 }; 74 }; 75 </script> 76 </head> 77 <body> 78 <p>Drag the orange square to the right until the drag placeholder appears, then release it. Fail if this text does not change.</p> 79 <div draggable="true"></div> 80 <div></div> 81 <noscript><p>Enable JavaScript and reload</p></noscript> 82 </body> 83 </html>