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
206
207
|
<!DOCTYPE html>
<meta charset='utf-8'>
<title>drag & drop – draggable attribute</title>
<style>div#test_elements { display: none; }</style>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<noscript><p>Enable JavaScript and reload.</p></noscript>
<div id='log'></div>
<div id='test_elements'>
<div id='defaults'>
<a href='#'>.</a>
<div></div>
<img src='../resources/1x1-transparent.gif'>
</div>
<div id='draggable'>
<a draggable='true' href='#'>.</a>
<div draggable='true'></div>
<img draggable='true' src='../resources/1x1-transparent.gif'>
</div>
<div id='draggable_false'>
<a draggable='false' href='#'>.</a>
<div draggable='false'></div>
<img draggable='false' src='../resources/1x1-transparent.gif'>
</div>
<div id='draggable_auto'>
<a draggable='auto' href='#'>.</a>
<div draggable='auto'></div>
<img draggable='auto' src='../resources/1x1-transparent.gif'>
</div>
<div id='draggable_foo'>
<a draggable='foo' href='#'>.</a>
<div draggable='foo'></div>
<img draggable='foo' src='../resources/1x1-transparent.gif'>
</div>
<div id='changable_true'>
<a href='#'>.</a>
<div></div>
<img src='../resources/1x1-transparent.gif'>
</div>
<div id='changable_false'>
<a href='#'>.</a>
<div></div>
<img src='../resources/1x1-transparent.gif'>
</div>
<div id='changable_foo'>
<a href='#'>.</a>
<div></div>
<img src='../resources/1x1-transparent.gif'>
</div>
</div>
<script>
var foo = document.getElementById('foo');
/* Does the .draggable property exist? */
test(function () {
assert_idl_attribute(document.querySelector('#defaults a'), 'draggable');
}, 'an <a> element should have a draggable property');
test(function () {
assert_idl_attribute(document.querySelector('#defaults div'), 'draggable');
}, 'a <div> element should have a draggable property');
test(function () {
assert_idl_attribute(document.querySelector('#defaults img'), 'draggable');
}, 'an <img> element should have a draggable property');
/* Check the default values on different types of elements */
test(function () {
assert_true(document.querySelector('#defaults a').draggable);
}, 'an <a> element should be draggable by default');
test(function () {
assert_false(document.querySelector('#defaults div').draggable);
}, 'a <div> element should not be draggable by default');
test(function () {
assert_true(document.querySelector('#defaults img').draggable);
}, 'an <img> element should be draggable by default');
/* If draggable="true" is set, all the elements should be draggable */
test(function () {
assert_true(document.querySelector('#draggable a').draggable);
}, 'an <a> element with draggable="true" should be draggable');
test(function () {
assert_true(document.querySelector('#draggable div').draggable);
}, 'a <div> element with draggable="true" should be draggable');
test(function () {
assert_true(document.querySelector('#draggable img').draggable);
}, 'an <img> element with draggable="true" should be draggable');
/* If draggable="false" is set, none of the elements should be draggable */
test(function () {
assert_false(document.querySelector('#draggable_false a').draggable);
}, 'an <a> element with draggable="false" should not be draggable');
test(function () {
assert_false(document.querySelector('#draggable_false div').draggable);
}, 'a <div> element with draggable="false" should not be draggable');
test(function () {
assert_false(document.querySelector('#draggable_false img').draggable);
}, 'an <img> element with draggable="false" should not be draggable');
/* If draggable="auto" is set, fall back to the defaults */
test(function () {
assert_true(document.querySelector('#draggable_auto a').draggable);
}, 'an <a> element with draggable="auto" should be draggable');
test(function () {
assert_false(document.querySelector('#draggable_auto div').draggable);
}, 'a <div> element with draggable="auto" should not be draggable');
test(function () {
assert_true(document.querySelector('#draggable_auto img').draggable);
}, 'an <img> element with draggable="auto" should be draggable');
/* If draggable="foo" is set, fall back to the defaults */
test(function () {
assert_true(document.querySelector('#draggable_foo a').draggable);
}, 'an <a> element with draggable="foo" should be draggable');
test(function () {
assert_false(document.querySelector('#draggable_foo div').draggable);
}, 'a <div> element with draggable="foo" should not be draggable');
test(function () {
assert_true(document.querySelector('#draggable_foo img').draggable);
}, 'an <img> element with draggable="foo" should be draggable');
/* Setting the element.droppable attribute to true for all elements */
test(function () {
document.querySelector('#changable_true a').draggable = true;
assert_true(document.querySelector('#changable_true a').draggable);
}, 'an <a> element with the draggable property set to true through a script should be draggable');
test(function () {
document.querySelector('#changable_true div').draggable = true;
assert_true(document.querySelector('#changable_true div').draggable);
}, 'a <div> element with the draggable property set to true through a script should be draggable');
test(function () {
document.querySelector('#changable_true img').draggable = true;
assert_true(document.querySelector('#changable_true img').draggable);
}, 'an <img> element with the draggable property set to true through a script should be draggable');
/* Setting the element.droppable attribute to false for all elements */
test(function () {
document.querySelector('#changable_false a').draggable = false;
assert_false(document.querySelector('#changable_false a').draggable);
}, 'an <a> element with the draggable property set to false through a script should not be draggable');
test(function () {
document.querySelector('#changable_false div').draggable = false;
assert_false(document.querySelector('#changable_false div').draggable);
}, 'a <div> element with the draggable property set to false through a script should not be draggable');
test(function () {
document.querySelector('#changable_false img').draggable = false;
assert_false(document.querySelector('#changable_false img').draggable);
}, 'an <img> element with the draggable property set to false through a script should not be draggable');
/* Setting the element.droppable attribute to "foo" for all elements */
test(function () {
document.querySelector('#changable_foo a').draggable = 'foo';
assert_true(document.querySelector('#changable_foo a').draggable);
}, 'an <a> element with the draggable property set to "foo" through a script should be draggable');
test(function () {
document.querySelector('#changable_foo div').draggable = 'auto';
assert_true(document.querySelector('#changable_foo div').draggable);
}, 'a <div> element with the draggable property set to "foo" through a script should be draggable');
test(function () {
document.querySelector('#changable_foo img').draggable = 'foo';
assert_true(document.querySelector('#changable_foo img').draggable);
}, 'an <img> element with the draggable property set to "foo" through a script should be draggable');
</script>
</body>
</html>
|
