mirror of
https://github.com/servo/servo
synced 2026-04-29 02:47:55 +02:00
208 lines
7.1 KiB
HTML
208 lines
7.1 KiB
HTML
<!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>
|