Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draggable_attribute, dropzone_attribute and dragevent #280

Merged
merged 4 commits into from
Jan 27, 2014
Merged

draggable_attribute, dropzone_attribute and dragevent #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4b1dc01
add draggable_attribute, dropzone_attribute and dragevent TCs
ibelem Aug 23, 2013
930e438
fix 5 issues raised by reviewer
ibelem Jan 28, 2014
7d5fc3b
remove tests covered by html/dom/interfaces.html
ibelem Jan 28, 2014
c11ceba
remove unexpected whitespaces
ibelem Jan 28, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions html/editing/dnd/the-dragevent-interface/dragevent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>HTML Test: DragEvent</title>
<link rel='author' title='Intel' href='http://www.intel.com'>
<link rel='help' href='http://www.w3.org/html/wg/drafts/html/CR/editing.html#dndevents'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<style>
#drop {
border: 2px solid black;
width: 100px;
height: 100px;
padding: 20px;
}
#drag {
color: blue;
margin: 20px auto;
}
</style>
</head>

<body>
<div>Select and drag the blue text to rectangular box.</div>
<div id='drag' draggable>blue text</div>
<div id='drop' dropzone='copy string:text/plain'></div>
<div id='log'> </div>

<script>
var drag, element;
var Events = ['ondragstart', 'ondrag', 'ondragover', 'ondragenter', 'ondragexit', 'ondragleave', 'ondrop', 'ondragend'];

setup(function() {
drag = document.querySelector('#drag');
element = document.createElement('div');
}, {explicit_done: true, explicit_timeout: true});

for(var i=0; i< Events.length; i++) {
test(function() {
assert_true(Events[i] in document, 'Check ' + Events[i] + ' in document');
}, 'Check ' + Events[i] + ' in document');
}

test(function() {
assert_inherits(element, 'ondragstart', 'Check if have ondragstart attribute');
}, 'Check if have ondragstart attribute');

test(function() {
assert_inherits(element, 'ondrag', 'Check if have ondrag attribute');
}, 'Check if have ondrag attribute');

test(function() {
assert_inherits(element, 'ondragenter', 'Check if have ondragenter attribute');
}, 'Check if have ondragenter attribute');

test(function() {
assert_inherits(element, 'ondragexit', 'Check if have ondragexit attribute');
}, 'Check if have ondragexit attribute');

test(function() {
assert_inherits(element, 'ondragleave', 'Check if have dragleave attribute');
}, 'Check if have dragleave attribute');

test(function() {
assert_inherits(element, 'ondragover', 'Check if have dragover attribute');
}, 'Check if have dragover attribute');

test(function() {
assert_inherits(element, 'ondrop', 'Check if have ondrop attribute');
}, 'Check if have ondrop attribute');

test(function() {
assert_inherits(element, 'ondragend', 'Check if have ondragend attribute');
}, 'Check if have ondragend attribute');

on_event(drag, 'dragstart', function(event) {
test(function() {
assert_equals(event.type, 'dragstart', 'Check if the dragstart event captured');
}, 'Check if the dragstart event captured');
});

on_event(drag, 'dragenter', function(event) {
test(function() {
assert_equals(event.type, 'dragenter', 'Check if the dragenter event captured');
}, 'Check if the dragenter event captured');
});

on_event(drag, 'dragend', function(event) {
test(function() {
assert_equals(event.type, 'dragend', 'Check if the dragend event captured');
}, 'Check if the dragend event captured');
done();
});


</script>
</body>
</html>
262 changes: 262 additions & 0 deletions html/editing/dnd/the-draggable-attribute/draggable_attribute.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>HTML Test: draggable_attribute</title>
<link rel='author' title='Intel' href='http://www.intel.com'>
<link rel='help' href='http://www.w3.org/html/wg/drafts/html/CR/editing.html#the-draggable-attribute'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
</head>

<body>
<div id='log'> </div>

<script>
//The "data_all" below has been stolen from @Ms2ger's html/semantics/interfaces.html, thanks!
var data_all = [
["abbr", ""],
["acronym", ""],
["address", ""],
["applet", "Applet"],
["audio", "Audio"],
["b", ""],
["base", "Base"],
["basefont", "BaseFont"],
["bdo", ""],
["bgsound", "Unknown"],
["big", ""],
["blink", "Unknown"],
["blockquote", "Quote"],
["body", "Body"],
["br", "BR"],
["button", "Button"],
["canvas", "Canvas"],
["caption", "TableCaption"],
["center", ""],
["cite", ""],
["code", ""],
["col", "TableCol"],
["colgroup", "TableCol"],
["dd", ""],
["del", "Mod"],
["dfn", ""],
["dir", "Directory"],
["div", "Div"],
["dl", "DList"],
["dt", ""],
["em", ""],
["embed", "Embed"],
["fieldset", "FieldSet"],
["font", "Font"],
["form", "Form"],
["frame", "Frame"],
["frameset", "FrameSet"],
["h1", "Heading"],
["h2", "Heading"],
["h3", "Heading"],
["h4", "Heading"],
["h5", "Heading"],
["h6", "Heading"],
["head", "Head"],
["hr", "HR"],
["html", "Html"],
["i", ""],
["iframe", "IFrame"],
["image", "Unknown"],
["img", "Image"],
["input", "Input"],
["ins", "Mod"],
["isindex", "Unknown"],
["kbd", ""],
["keygen", "Keygen"],
["label", "Label"],
["legend", "Legend"],
["li", "LI"],
["link", "Link"],
["listing", ""],
["map", "Map"],
["marquee", "Marquee"],
["menu", "Menu"],
["meta", "Meta"],
["multicol", "Unknown"],
["nobr", ""],
["noembed", ""],
["noframes", ""],
["noscript", ""],
["object", "Object"],
["ol", "OList"],
["optgroup", "OptGroup"],
["option", "Option"],
["p", "Paragraph"],
["param", "Param"],
["plaintext", ""],
["pre", "Pre"],
["q", "Quote"],
["s", ""],
["samp", ""],
["script", "Script"],
["select", "Select"],
["small", ""],
["source", "Source"],
["spacer", "Unknown"],
["span", "Span"],
["strike", ""],
["strong", ""],
["style", "Style"],
["sub", ""],
["sup", ""],
["table", "Table"],
["tbody", "TableSection"],
["td", "TableDataCell"],
["textarea", "TextArea"],
["tfoot", "TableSection"],
["th", "TableHeaderCell"],
["thead", "TableSection"],
["title", "Title"],
["tr", "TableRow"],
["tt", ""],
["u", ""],
["ul", "UList"],
["var", ""],
["video", "Video"],
["wbr", ""],
["xmp", ""],
["section", ""],
["nav", ""],
["article", ""],
["aside", ""],
["hgroup", ""],
["header", ""],
["footer", ""],
["time", "Unknown"],
["mark", ""],
["progress", "Progress"],
["meter", "Meter"],
["ruby", ""],
["rt", ""],
["rp", ""],
["figure", ""],
["datalist", "DataList"],
["output", "Output"],
["details", "Details"],
["command", "Command"],
["nextid", "Unknown"],
["rb", "Unknown"],
["bdi", ""],
["data", "Data"],
["a", "Anchor"],
["area", "Area"],
["dialog", "Dialog"],
["figcaption", ""],
["summary", ""],
["track", "Track"]
];

data_all.forEach(function(a) {
test(function() {
var eElement = document.createElement(a[0]);
assert_inherits(eElement, 'draggable', 'Element ' + a[0] +' should have draggable property');
}, 'Element ' + a[0] +' should have draggable property');
});

function run_test(element, element_name, exp) {
if (exp) {
assert_true(element.draggable, 'Element ' + element_name +' should be draggable');
} else {
assert_false(element.draggable, 'Element ' + element_name +' should not be draggable');
}
}

function run_idl_test(element, element_name, exp) {
if (exp) {
assert_equals(element.getAttribute('draggable'), 'true', 'Element ' + element_name +' should be draggable');
} else {
assert_equals(element.getAttribute('draggable'), 'false', 'Element ' + element_name +' should not be draggable');
}
}

data_all.forEach(function(a) {

test(function() {
//Default values for elements
//If the element is an img element, or, if the element is an a element with an href content attribute,
//the draggable IDL attribute must return true.
var eElement = document.createElement(a[0]);
switch (a[0]) {
case 'a':
eElement.setAttribute('href', 'http://w3.org');
run_test(eElement, 'a', true);
break;
case 'img':
run_test(eElement, 'img', true);
break;
default:
run_test(eElement, a[0], false);
}

//If an element's draggable content attribute has the state true,
//the draggable IDL attribute must return true.
eElement.setAttribute('draggable', 'true');
run_test(eElement, a[0] + ' draggable=\'true\'', true);

//If an element's draggable content attribute has the state false,
//the draggable IDL attribute must return false.
eElement.setAttribute('draggable', 'false');
run_test(eElement, a[0] + ' draggable=\'false\'', false);

//auto values for elements
//The element's draggable content attribute has the state auto.
//If the element is an img element, or, if the element is an a element with an href content attribute,
//the draggable IDL attribute must return true.
switch (a[0]) {
case 'a':
eElement.setAttribute('href', 'http://w3.org');
eElement.setAttribute('draggable', 'auto');
run_test(eElement, 'Element ' + 'a' + ' draggable=\'auto\'', true);
break;
case 'img':
eElement.setAttribute('draggable', 'auto');
run_test(eElement, 'Element ' + 'img' + ' draggable=\'auto\'', true);
break;
default:
run_test(eElement, 'Element ' + a[0] + ' draggable=\'auto\'', false);
}

//Foo values for elements
//The element's draggable content attribute value is not enumerated (true, false, auto) but unexpected.
//Fallback to defaults
switch (a[0]) {
case 'a':
eElement.setAttribute('href', 'http://w3.org');
eElement.setAttribute('draggable', 'foo');
run_test(eElement, 'Element ' + 'a' + ' draggable=\'foo\'', true);
break;
case 'img':
eElement.setAttribute('draggable', 'foo');
run_test(eElement, 'Element ' + 'img' + ' draggable=\'foo\'', true);
break;
default:
run_test(eElement, 'Element ' + a[0] + ' draggable=\'foo\'', false);
}

//An element with a draggable attribute should also have a title attribute
//that names the element for the purpose of non-visual interactions.
eElement.setAttribute('title', 'foo as title value');
assert_equals(typeof eElement.title, 'string', '<' + a[0] + '> draggable block has title attribute');

//If the draggable IDL attribute is set to the value false,
//the draggable content attribute must be set to the literal value false.
eElement.draggable = false;
run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'false\'', false);

//If the draggable IDL attribute is set to the value true,
//the draggable content attribute must be set to the literal value true.
eElement.draggable = true;
run_idl_test(eElement, a[0] + '.getAttribute(\'draggable\') is \'true\'', true);
}, 'Element ' + a[0] +' draggable attribute test');

});
</script>
</body>
</html>
Loading