draggable.html (7280B)
1 <!DOCTYPE html> 2 <meta charset='utf-8'> 3 <title>drag & drop – draggable attribute</title> 4 <style>div#test_elements { display: none; }</style> 5 6 <script src='/resources/testharness.js'></script> 7 <script src='/resources/testharnessreport.js'></script> 8 9 <noscript><p>Enable JavaScript and reload.</p></noscript> 10 11 <div id='log'></div> 12 13 <div id='test_elements'> 14 15 <div id='defaults'> 16 <a href='#'>.</a> 17 <div></div> 18 <img src='../resources/1x1-transparent.gif'> 19 </div> 20 21 <div id='draggable'> 22 <a draggable='true' href='#'>.</a> 23 <div draggable='true'></div> 24 <img draggable='true' src='../resources/1x1-transparent.gif'> 25 </div> 26 27 <div id='draggable_false'> 28 <a draggable='false' href='#'>.</a> 29 <div draggable='false'></div> 30 <img draggable='false' src='../resources/1x1-transparent.gif'> 31 </div> 32 33 <div id='draggable_auto'> 34 <a draggable='auto' href='#'>.</a> 35 <div draggable='auto'></div> 36 <img draggable='auto' src='../resources/1x1-transparent.gif'> 37 </div> 38 39 <div id='draggable_foo'> 40 <a draggable='foo' href='#'>.</a> 41 <div draggable='foo'></div> 42 <img draggable='foo' src='../resources/1x1-transparent.gif'> 43 </div> 44 45 <div id='changable_true'> 46 <a href='#'>.</a> 47 <div></div> 48 <img src='../resources/1x1-transparent.gif'> 49 </div> 50 51 <div id='changable_false'> 52 <a href='#'>.</a> 53 <div></div> 54 <img src='../resources/1x1-transparent.gif'> 55 </div> 56 57 <div id='changable_foo'> 58 <a href='#'>.</a> 59 <div></div> 60 <img src='../resources/1x1-transparent.gif'> 61 </div> 62 63 64 </div> 65 66 <script> 67 var foo = document.getElementById('foo'); 68 69 /* Does the .draggable property exist? */ 70 test(function () { 71 assert_idl_attribute(document.querySelector('#defaults a'), 'draggable'); 72 }, 'an <a> element should have a draggable property'); 73 74 test(function () { 75 assert_idl_attribute(document.querySelector('#defaults div'), 'draggable'); 76 }, 'a <div> element should have a draggable property'); 77 78 test(function () { 79 assert_idl_attribute(document.querySelector('#defaults img'), 'draggable'); 80 }, 'an <img> element should have a draggable property'); 81 82 83 /* Check the default values on different types of elements */ 84 test(function () { 85 assert_true(document.querySelector('#defaults a').draggable); 86 }, 'an <a> element should be draggable by default'); 87 88 test(function () { 89 assert_false(document.querySelector('#defaults div').draggable); 90 }, 'a <div> element should not be draggable by default'); 91 92 test(function () { 93 assert_true(document.querySelector('#defaults img').draggable); 94 }, 'an <img> element should be draggable by default'); 95 96 97 /* If draggable="true" is set, all the elements should be draggable */ 98 test(function () { 99 assert_true(document.querySelector('#draggable a').draggable); 100 }, 'an <a> element with draggable="true" should be draggable'); 101 102 test(function () { 103 assert_true(document.querySelector('#draggable div').draggable); 104 }, 'a <div> element with draggable="true" should be draggable'); 105 106 test(function () { 107 assert_true(document.querySelector('#draggable img').draggable); 108 }, 'an <img> element with draggable="true" should be draggable'); 109 110 111 /* If draggable="false" is set, none of the elements should be draggable */ 112 test(function () { 113 assert_false(document.querySelector('#draggable_false a').draggable); 114 }, 'an <a> element with draggable="false" should not be draggable'); 115 116 test(function () { 117 assert_false(document.querySelector('#draggable_false div').draggable); 118 }, 'a <div> element with draggable="false" should not be draggable'); 119 120 test(function () { 121 assert_false(document.querySelector('#draggable_false img').draggable); 122 }, 'an <img> element with draggable="false" should not be draggable'); 123 124 125 /* If draggable="auto" is set, fall back to the defaults */ 126 test(function () { 127 assert_true(document.querySelector('#draggable_auto a').draggable); 128 }, 'an <a> element with draggable="auto" should be draggable'); 129 130 test(function () { 131 assert_false(document.querySelector('#draggable_auto div').draggable); 132 }, 'a <div> element with draggable="auto" should not be draggable'); 133 134 test(function () { 135 assert_true(document.querySelector('#draggable_auto img').draggable); 136 }, 'an <img> element with draggable="auto" should be draggable'); 137 138 139 /* If draggable="foo" is set, fall back to the defaults */ 140 test(function () { 141 assert_true(document.querySelector('#draggable_foo a').draggable); 142 }, 'an <a> element with draggable="foo" should be draggable'); 143 144 test(function () { 145 assert_false(document.querySelector('#draggable_foo div').draggable); 146 }, 'a <div> element with draggable="foo" should not be draggable'); 147 148 test(function () { 149 assert_true(document.querySelector('#draggable_foo img').draggable); 150 }, 'an <img> element with draggable="foo" should be draggable'); 151 152 153 /* Setting the element.droppable attribute to true for all elements */ 154 test(function () { 155 document.querySelector('#changable_true a').draggable = true; 156 assert_true(document.querySelector('#changable_true a').draggable); 157 }, 'an <a> element with the draggable property set to true through a script should be draggable'); 158 159 test(function () { 160 document.querySelector('#changable_true div').draggable = true; 161 assert_true(document.querySelector('#changable_true div').draggable); 162 }, 'a <div> element with the draggable property set to true through a script should be draggable'); 163 164 test(function () { 165 document.querySelector('#changable_true img').draggable = true; 166 assert_true(document.querySelector('#changable_true img').draggable); 167 }, 'an <img> element with the draggable property set to true through a script should be draggable'); 168 169 170 /* Setting the element.droppable attribute to false for all elements */ 171 test(function () { 172 document.querySelector('#changable_false a').draggable = false; 173 assert_false(document.querySelector('#changable_false a').draggable); 174 }, 'an <a> element with the draggable property set to false through a script should not be draggable'); 175 176 test(function () { 177 document.querySelector('#changable_false div').draggable = false; 178 assert_false(document.querySelector('#changable_false div').draggable); 179 }, 'a <div> element with the draggable property set to false through a script should not be draggable'); 180 181 test(function () { 182 document.querySelector('#changable_false img').draggable = false; 183 assert_false(document.querySelector('#changable_false img').draggable); 184 }, 'an <img> element with the draggable property set to false through a script should not be draggable'); 185 186 187 /* Setting the element.droppable attribute to "foo" for all elements */ 188 test(function () { 189 document.querySelector('#changable_foo a').draggable = 'foo'; 190 assert_true(document.querySelector('#changable_foo a').draggable); 191 }, 'an <a> element with the draggable property set to "foo" through a script should be draggable'); 192 193 test(function () { 194 document.querySelector('#changable_foo div').draggable = 'auto'; 195 assert_true(document.querySelector('#changable_foo div').draggable); 196 }, 'a <div> element with the draggable property set to "foo" through a script should be draggable'); 197 198 test(function () { 199 document.querySelector('#changable_foo img').draggable = 'foo'; 200 assert_true(document.querySelector('#changable_foo img').draggable); 201 }, 'an <img> element with the draggable property set to "foo" through a script should be draggable'); 202 </script> 203 204 205 206 </body> 207 </html>