← Back to branch summary

~ubuntu-branches/ubuntu/raring/qtwebkit-source/raring-proposed

« back to all changes in this revision

Viewing changes to ManualTests/drag-cursor-notallowed.html

  • Committer: Package Import Robot
  • Author(s): Jonathan Riddell
  • Date: 2013-02-18 14:24:18 UTC
  • Revision ID: package-import@ubuntu.com-20130218142418-eon0jmjg3nj438uy
Tags: upstream-2.3
Import upstream version 2.3

Show diffs side-by-side

added added

removed removed

Lines of Context:
ManualTests/drag-cursor-notallowed.html
 
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>