| dbates@webkit.org | d14240a | 2009-10-07 22:26:48 +0000 | [diff] [blame] | 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> |
