<!DOCTYPE html>
<style>
#draggable {
position: relative;
width: 100px;
height: 100px;
background: red;
-webkit-user-drag: element;
}
#descendant-painting-sibling {
position: relative;
width: 100px;
height: 100px;
background: green;
-webkit-user-drag: none;
}
</style>
<div id="draggable">
<div id="descendant-painting-sibling"></div>
</div>
This test passes if the generated drag image is a 100x100 green box.
The purpose of this test is to verify elements that are descendants of the dragged element
but paint into an ancestor stacking context are correctly included in the drag image.
<script>
function drag() {
testRunner.dumpDragImage();
var image = document.getElementById('draggable');
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>