Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>allowTargetOrigin should only block dragenter, dragover, dragleave and drop events</title>
<style type="text/css">
div { height: 100px; width: 100px; background: orange; margin: 0; padding: 0; float: left; }
div + div { background: blue; }
</style>
<script type="text/javascript">
window.onload = function () {
var orange = document.getElementsByTagName('div')[0], evtdone = {}, fails = [];
orange.ondragstart = function (e) {
evtdone[e.type] = true;
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text','dummy text');
try {
} catch(e) {
fails[fails.length] = 'allowTargetOrigin threw an error: '+e;
}
};
orange.ondragenter = orange.ondragover = orange.ondrop = function (e) {
e.preventDefault();
evtdone[e.type] = true;
};
orange.ondrag = orange.ondragleave = function (e) {
evtdone[e.type] = true;
};
orange.ondragend = function (e) {
evtdone[e.type] = true;
if( !evtdone.dragstart ) {
fails[fails.length] = 'dragstart did not fire - how did that happen?';
}
if( !evtdone.drag ) {
fails[fails.length] = 'drag did not fire';
}
if( !evtdone.dragend ) {
fails[fails.length] = 'dragend did not fire - OK, who broke the testcase?';
}
if( evtdone.dragenter ) {
fails[fails.length] = 'dragenter fired';
}
if( evtdone.dragover ) {
fails[fails.length] = 'dragover fired';
}
if( evtdone.dragleave ) {
fails[fails.length] = 'dragleave fired';
}
if( evtdone.drop ) {
fails[fails.length] = 'drop fired';
}
document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS';
};
};
</script>
</head>
<body>
<p>Drag the orange square over the blue square then back to the orange square, then release it. Fail if this text does not change.</p>
<div draggable="true"></div>
<div></div>
<noscript><p>Enable JavaScript and reload</p></noscript>
</body>
</html>