| <html> |
| <head> |
| <style> |
| #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle } |
| #dropTarget {width: 256px; height: 256px; border: 1px dashed} |
| #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white} |
| .pass { font-weight: bold; color: green; } |
| .fail { font-weight: bold; color: red; } |
| </style> |
| <script> |
| var dragMe; |
| var dropTarget; |
| var messageElm; |
| var defaultMessageElm; |
| var event; |
| |
| var ALLOWED_EFFECTS = 'move'; |
| var DROP_EFFECT = 'copy'; |
| |
| window.onload = function() |
| { |
| dragMe = document.getElementById("dragMe"); |
| dropTarget = document.getElementById("dropTarget"); |
| messageElm = document.getElementById("message"); |
| defaultMessageElm = document.getElementById("default-message"); |
| |
| if (!dragMe || !dropTarget || !messageElm || !defaultMessageElm) |
| return; |
| |
| dragMe.ondragstart = dragStart; |
| dragMe.ondragend = dragEnd; |
| |
| dropTarget.ondragenter = dragEntered; |
| dropTarget.ondragover = dragOver; |
| dropTarget.ondrop = drop; |
| } |
| |
| function dragStart(e) |
| { |
| event = e; |
| e.dataTransfer.effectAllowed = ALLOWED_EFFECTS; |
| e.dataTransfer.setData('Text', e.target.textContent); |
| } |
| |
| function dragEnd(e) |
| { |
| messageElm.style.visibility = "hidden"; |
| defaultMessageElm.style.visibility = "visible"; |
| return; |
| } |
| |
| function dragEntered(e) |
| { |
| messageElm.style.visibility = "visible"; |
| defaultMessageElm.style.visibility = "hidden"; |
| dragEnteredAndUpdated(e); |
| } |
| |
| function dragOver(e) |
| { |
| dragEnteredAndUpdated(e); |
| } |
| |
| function dragEnteredAndUpdated(e) |
| { |
| event = e; |
| e.dataTransfer.dropEffect = DROP_EFFECT; |
| cancelDrag(e); |
| } |
| |
| function drop(e) |
| { |
| cancelDrag(e); |
| } |
| |
| function cancelDrag(e) |
| { |
| if (e.preventDefault) |
| e.preventDefault(); |
| else { |
| // Assume this script is executing within Internet Explorer |
| e.returnValue = false; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <p id="description">This test can be used to verify that the not-allowed cursor is shown during an invalid drag-and-drop operation. |
| In particular, if the effectAllowed is <code><script>document.write(ALLOWED_EFFECTS)</script></code> and the dropEffect of the |
| drop target is <code><script>document.write(DROP_EFFECT)</script></code> then the drop is not allowed and the cursor should |
| 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 |
| for a not-allowed drop operation (see bug #25925). |
| <br/><br/> |
| Drag the red square over the drop target (demarcated by the dashed boundary). While hovering over the drop target, if the cursor |
| 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> |
| <div id="test-container"> |
| <label for="effectAllowed">effectAllowed:</label> <code><script>document.write(ALLOWED_EFFECTS)</script></code> |
| <br/><br/> |
| <div id="dropTarget"> |
| <div id="default-message">Drag the red square over me.<br/><br/> |
| <label for="dropEffect">Expects dropEffect:</label> <code><script>document.write(DROP_EFFECT)</script></code> |
| </div> |
| <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> |
| </div> |
| <hr/> |
| <p>Items that can be dragged to the drop target:</p> |
| <div id="dragMe" draggable="true">Square</div> |
| <hr/> |
| </div> |
| </body> |
| </html> |
