diff options
Diffstat (limited to 'Source/WebCore/manual-tests/drag-cursor-notallowed.html')
-rw-r--r-- | Source/WebCore/manual-tests/drag-cursor-notallowed.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/Source/WebCore/manual-tests/drag-cursor-notallowed.html b/Source/WebCore/manual-tests/drag-cursor-notallowed.html new file mode 100644 index 0000000..e6cb6d4 --- /dev/null +++ b/Source/WebCore/manual-tests/drag-cursor-notallowed.html @@ -0,0 +1,111 @@ +<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> |