<!DOCTYPE html>
<html>
<head>
<style>
#draggableContainer {
-webkit-user-drag: element;
}
#draggableContainer img {
-webkit-user-drag: none;
}
#drop {
border: 1px solid black;
height: 200px;
width: 200px;
}
</style>
<script>
function runTest() {
var drag = document.getElementById('drag');
var drop = document.getElementById('drop');
drop.addEventListener('dragenter', onDragEnterOrOver);
drop.addEventListener('dragover', onDragEnterOrOver);
drop.addEventListener('drop', onDrop);
if (!window.testRunner)
return;
testRunner.dumpAsText();
testRunner.waitUntilDone();
var x;
var y;
x = drag.offsetLeft + drag.offsetWidth / 2;
y = drag.offsetTop + drag.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
eventSender.mouseDown();
eventSender.leapForward(500);
x = drop.offsetLeft + drop.offsetWidth / 2;
y = drop.offsetTop + drop.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
eventSender.mouseUp();
}
function onDragEnterOrOver(e) {
e.preventDefault();
}
function onDrop() {
var console = document.getElementById('console');
console.appendChild(document.createTextNode('PASS'));
console.appendChild(document.createElement('br'));
if (window.testRunner)
testRunner.notifyDone();
}
</script>
</head>
<body onload="runTest()">
<p>This test verifies that starting a drag on an image inside a
-webkit-user-drag: element container succeeds. To run this test manually,
try dragging the image to the box below. You should see the word "PASS"
appear if it succeeds.</p>
<div id="draggableContainer">
<img id="drag" src="resources/apple.gif">
</div>
<div id="drop"></div>
<div id="console"></div>
</body>
</html>
Codebase Browser
chromium