Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/editing/dnd/dom/draggable.html - WPT Dashboard Interop Dashboard
<!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>