Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../resources/test-helper.js"></script>
<head>
<title>JPG image drag and drop</title>
<style type="text/css">
div[ondragenter]
{width:105px;
min-height:105px;
text-align:center;
margin-top:20px;
padding:10px;
border:solid thin navy;}
p:first-child
{padding-left:12px;}
</style>
<script type="application/ecmascript">
function addImage(event)
{var c = document.createElement('img');
c.setAttribute('src',event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,''));
document.querySelector('div').appendChild(c);}
</script>
</head>
<body>
<p><img src="data:image/jpeg;base64,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" alt="JPG circle" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/></p>
<p>Drag circle above to the box below. It should be copied to the box once you drop it there.</p>
<div
ondragenter="event.preventDefault()"
ondragover="return false"
/>
</body>
<script>
async function test() {
const img = document.querySelector('img');
const div = document.querySelector('div');
function onDropCallBack(event) {
addImage(event);
assert_equals(img.src, event.dataTransfer.getData('text/uri-list').replace(/\r\n$/,''));
return true;
}
dragDropTest(img, div, onDropCallBack, 'Dragging the dataURL JPG image to the bottom div should copy the image there');
}
test();
</script>
</html>