1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
<!DOCTYPE html>
<title>drag & drop - event sequence for cross-document drag</title>
<style type="text/css">
/* use margins instead of padding to make sure the body begins at the top of the page */
html, body {
margin: 0;
}
body {
padding: 116px 8px 8px;
}
#testhere div {
height: 100px;
width: 100px;
position: absolute;
top: 8px;
}
#orange {
background-color: orange;
left: 8px;
}
#fuchsia {
background-color: fuchsia;
left: 158px;
}
</style>
<script>
parent.setup(function () {},{explicit_done:true,explicit_timeout:true});
window.onload = function () {
var orange = document.querySelector('#orange')
var fuchsia = document.querySelector('#fuchsia')
var body = document.body;
orange.ondragstart = function (e) {
parent.events.push('doc1.orange.ondragstart');
e.dataTransfer.effectAllowed = 'all';
e.dataTransfer.setData('Text', 'foo');
};
orange.ondrag = function () { parent.events.push('doc1.orange.ondrag'); };
orange.ondragenter = function () { parent.events.push('doc1.orange.ondragenter'); };
orange.ondragover = function () { parent.events.push('doc1.orange.ondragover'); };
orange.ondrop = function () { parent.events.push('doc1.orange.ondrop'); return false; };
orange.ondragend = function () { parent.events.push('doc1.orange.ondragend'); setTimeout(finish,100); };
orange.onmousedown = function () { parent.events.push('doc1.orange.onmousedown'); };
orange.onmouseup = function () { parent.events.push('doc1.orange.onmouseup'); };
/* Events for the fuchsia box */
fuchsia.ondragstart = function () { parent.events.push('doc1.pink.ondragstart'); };
fuchsia.ondrag = function () { parent.events.push('doc1.pink.ondrag'); };
fuchsia.ondragenter = function () { parent.events.push('doc1.pink.ondragenter'); };
fuchsia.ondragover = function () { parent.events.push('doc1.pink.ondragover'); };
fuchsia.ondrop = function () { parent.events.push('doc1.pink.ondrop'); return false; };
fuchsia.ondragend = function () { parent.events.push('doc1.pink.ondragend'); };
fuchsia.onmousedown = function () { parent.events.push('doc1.pink.onmousedown'); };
fuchsia.onmouseup = function () { parent.events.push('doc1.pink.onmouseup'); };
/* Events for the page body */
body.ondragstart = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragstart': 'doc1.bubble.ondragstart' ); };
body.ondrag = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrag': 'doc1.bubble.ondrag' ); };
body.ondragenter = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragenter': 'doc1.bubble.ondragenter' ); };
body.ondragover = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragover': 'doc1.bubble.ondragover' ); };
body.ondrop = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondrop': 'doc1.bubble.ondrop' ); };
body.ondragend = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.ondragend': 'doc1.bubble.ondragend' ); };
body.onmousedown = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmousedown': 'doc1.bubble.onmousedown' ); };
body.onmouseup = function (e) { parent.events.push( ( e.target == body ) ? 'doc1.body.onmouseup': 'doc1.bubble.onmouseup' ); };
function finish(e) {
var i, evindex;
var events = parent.events.join('-');
/*
Normalise; reduce repeating event sequences to only 2 occurrences.
This makes the final event sequence predictable, no matter how many times the drag->dragover sequences repeat.
Two occurrances are kept in each case to allow testing to make sure the sequence really is repeating.
*/
//spec compliant - div dragenter is not cancelled, so body dragenter fires and body becomes current target
//repeats while drag is over orange or fuchsia or the body
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.body\.ondragover){3,}/g,'$1$1');
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.body\.ondragover){3,}/g,'$1$1');
//repeats while dragging over yellow
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.yellow\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1');
//repeats while dragging over blue
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc2\.blue\.ondragover-doc2\.bubble\.ondragover){3,}/g,'$1$1');
//non-spec-compliant repeats while dragging over orange
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.orange\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1');
//non-spec-compliant repeats while dragging over fuchsia
events = events.replace(/(-doc1\.orange\.ondrag-doc1\.bubble\.ondrag-doc1\.pink\.ondragover-doc1\.bubble\.ondragover){3,}/g,'$1$1');
events = events.split(/-/g);
parent.test(function () {
parent.assert_array_equals(events,
['doc1.orange.onmousedown', //mouse down
'doc1.bubble.onmousedown',
'doc1.orange.ondragstart', //dragging begins
'doc1.bubble.ondragstart',
'doc1.orange.ondrag', //mouse is over orange
'doc1.bubble.ondrag',
'doc1.orange.ondragenter', //not cancelled
'doc1.bubble.ondragenter',
'doc1.body.ondragenter', //so body becomes current target, and the event fires there as well
'doc1.body.ondragover',
'doc1.orange.ondrag', //start repeating (some over orange, some over body)
'doc1.bubble.ondrag',
'doc1.body.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc1.body.ondragover', //end repeating
'doc1.orange.ondrag', //mouse moves over pink
'doc1.bubble.ondrag',
'doc1.pink.ondragenter', //not cancelled
'doc1.bubble.ondragenter',
'doc1.body.ondragover', //so body becomes current target, but since it was already the target, dragenter does not need to fire again
'doc1.orange.ondrag', //start repeating (some over pink, some over body)
'doc1.bubble.ondrag',
'doc1.body.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc1.body.ondragover', //end repeating
'doc1.orange.ondrag', //mouse moves over second frame
'doc1.bubble.ondrag',
'doc2.body.ondragenter', //not cancelled
'doc2.body.ondragenter', //so it fires again and sets body as current target
'doc2.body.ondragover',
'doc1.orange.ondrag', //start repeating (over second body)
'doc1.bubble.ondrag',
'doc2.body.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc2.body.ondragover', //end repeating
'doc1.orange.ondrag', //mouse moves over yellow
'doc1.bubble.ondrag',
'doc2.yellow.ondragenter',
'doc2.bubble.ondragenter',
'doc2.yellow.ondragover',
'doc2.bubble.ondragover',
'doc1.orange.ondrag', //start repeating (over yellow)
'doc1.bubble.ondrag',
'doc2.yellow.ondragover',
'doc2.bubble.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc2.yellow.ondragover',
'doc2.bubble.ondragover', //end repeating
'doc1.orange.ondrag', //mouse moves over body
'doc1.bubble.ondrag',
'doc2.body.ondragenter', //not cancelled
'doc2.body.ondragenter', //so it fires again and sets body as current target
'doc2.body.ondragover',
'doc1.orange.ondrag', //start repeating (over body)
'doc1.bubble.ondrag',
'doc2.body.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc2.body.ondragover', //end repeating
'doc1.orange.ondrag', //mouse moves over blue
'doc1.bubble.ondrag',
'doc2.blue.ondragenter',
'doc2.bubble.ondragenter',
'doc2.blue.ondragover',
'doc2.bubble.ondragover',
'doc1.orange.ondrag', //start repeating (over blue)
'doc1.bubble.ondrag',
'doc2.blue.ondragover',
'doc2.bubble.ondragover',
'doc1.orange.ondrag', //...twice to make sure it actually repeats
'doc1.bubble.ondrag',
'doc2.blue.ondragover',
'doc2.bubble.ondragover', //end repeating
'doc2.blue.ondrop', //release
'doc2.bubble.ondrop',
'doc1.orange.ondragend',
'doc1.bubble.ondragend']
);
}, 'Overall sequence');
var div = parent.document.createElement("div");
div.setAttribute("id", "log");
parent.document.documentElement.appendChild(div);
parent.done();
document.body.appendChild(parent.document.querySelector("div"));
}
};
</script>
<div id="testhere">
<div draggable='true' id='orange'></div>
<div id='fuchsia'></div>
</div>
<p>If you have already clicked on this page, reload it.</p>
<p>Use your pointing device to slowly drag the orange square over the pink square, then the grey square, then the yellow square, then the blue square, and release it over the blue square (make sure the mouse remains over each square for at least 1 second, and over the gaps between squares for at least 1 second). Fail if no new text appears below.</p>
|
