<!DOCTYPE html>
<style>
body {
background-color: red;
}
#image {
width: 50px;
height: 50px;
background-image: url('resources/grid-transparent.png');
-webkit-user-drag: element;
}
</style>
<body>
<!-- Simulate dragging an element and dump the generated drag image.
The expected result should be the same as the input image,
without seeing a red background. -->
<div id="image"></div>
</body>
<script>
function drag() {
testRunner.dumpDragImage();
var image = document.getElementById('image');
var startX = image.offsetLeft + image.offsetWidth / 2;
var startY = image.offsetTop + image.offsetHeight / 2;
var positionX = startX + image.offsetWidth;
var positionY = startY + image.offsetHeight;
eventSender.dragMode = true;
eventSender.mouseMoveTo(startX, startY);
eventSender.mouseDown();
eventSender.mouseMoveTo(positionX, positionY);
eventSender.mouseUp();
}
if (!window.testRunner || !window.eventSender) {
document.write("This test does not work in manual mode.");
} else {
window.onload = drag;
}
</script>