1<html> 2<head> 3<style> 4#dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle } 5#dropTarget {width: 256px; height: 256px; border: 1px dashed} 6#dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white} 7.pass { font-weight: bold; color: green; } 8.fail { font-weight: bold; color: red; } 9</style> 10<script> 11 var dragMe; 12 var dropTarget; 13 var messageElm; 14 var defaultMessageElm; 15 var event; 16 17 var ALLOWED_EFFECTS = 'move'; 18 var DROP_EFFECT = 'copy'; 19 20 window.onload = function() 21 { 22 dragMe = document.getElementById("dragMe"); 23 dropTarget = document.getElementById("dropTarget"); 24 messageElm = document.getElementById("message"); 25 defaultMessageElm = document.getElementById("default-message"); 26 27 if (!dragMe || !dropTarget || !messageElm || !defaultMessageElm) 28 return; 29 30 dragMe.ondragstart = dragStart; 31 dragMe.ondragend = dragEnd; 32 33 dropTarget.ondragenter = dragEntered; 34 dropTarget.ondragover = dragOver; 35 dropTarget.ondrop = drop; 36 } 37 38 function dragStart(e) 39 { 40 event = e; 41 e.dataTransfer.effectAllowed = ALLOWED_EFFECTS; 42 e.dataTransfer.setData('Text', e.target.textContent); 43 } 44 45 function dragEnd(e) 46 { 47 messageElm.style.visibility = "hidden"; 48 defaultMessageElm.style.visibility = "visible"; 49 return; 50 } 51 52 function dragEntered(e) 53 { 54 messageElm.style.visibility = "visible"; 55 defaultMessageElm.style.visibility = "hidden"; 56 dragEnteredAndUpdated(e); 57 } 58 59 function dragOver(e) 60 { 61 dragEnteredAndUpdated(e); 62 } 63 64 function dragEnteredAndUpdated(e) 65 { 66 event = e; 67 e.dataTransfer.dropEffect = DROP_EFFECT; 68 cancelDrag(e); 69 } 70 71 function drop(e) 72 { 73 cancelDrag(e); 74 } 75 76 function cancelDrag(e) 77 { 78 if (e.preventDefault) 79 e.preventDefault(); 80 else { 81 // Assume this script is executing within Internet Explorer 82 e.returnValue = false; 83 } 84 } 85</script> 86</head> 87<body> 88 <p id="description">This test can be used to verify that the not-allowed cursor is shown during an invalid drag-and-drop operation. 89 In particular, if the effectAllowed is <code><script>document.write(ALLOWED_EFFECTS)</script></code> and the dropEffect of the 90 drop target is <code><script>document.write(DROP_EFFECT)</script></code> then the drop is not allowed and the cursor should 91 change to the not-allowed cursor. Note, this test only pertains to the Windows build since the Mac build does not show a drop cursor 92 for a not-allowed drop operation (see bug #25925). 93 <br/><br/> 94 Drag the red square over the drop target (demarcated by the dashed boundary). While hovering over the drop target, if the cursor 95 is <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw=="> then the test <span class="pass">PASSED</span>. Otherwise, the test <span class="fail">FAILED</span>.</p> 96 <div id="test-container"> 97 <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code> 98 <br/><br/> 99 <div id="dropTarget"> 100 <div id="default-message">Drag the red square over me.<br/><br/> 101 <label for="dropEffect">Expects dropEffect:</label> <code><script>document.write(DROP_EFFECT)</script></code> 102 </div> 103 <div id="message" style="visibility:hidden">The cursor should be <img alt="not-allowed" src="data:image/gif;base64,R0lGODlhEgASAIAAAAAAAP///yH5BAAAAAAALAAAAAASABIAAAIvjA+px6ifmnmM1ijDmlbuuHmAhoWXaTqYKq7sObZw3HwgXd8cPr8yDGxBXEJioAAAOw==">. Is it?</div> 104 </div> 105 <hr/> 106 <p>Items that can be dragged to the drop target:</p> 107 <div id="dragMe" draggable="true">Square</div> 108 <hr/> 109 </div> 110</body> 111</html> 112