WebCore/manual-tests/drag-cursor-notallowed.html
changeset 0 4f2f89ce4247
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/drag-cursor-notallowed.html	Fri Sep 17 09:02:29 2010 +0300
@@ -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>