drag-svg-image.html | Explore in Territory

<!DOCTYPE html>
<style>
    #image {
        width: 200px;
        height: 200px;
        image-rendering: pixelated;
    }
</style>
<body>
    <!-- Simulate dragging an image and dump the generated drag image. -->
    <img id="image" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 100 100'><rect width='100%' height='100%' fill='white'/><circle cx='50' cy='50' r='25' fill='green'/></svg>">
</body>
<script>
    function drag() {
        testRunner.dumpDragImage();

        var bbox = document.getElementById('image').getBoundingClientRect();
        var startX = bbox.left + bbox.width / 2;
        var startY = bbox.top + bbox.height / 2;
        var destX = bbox.right;
        var destY = bbox.bottom;

        eventSender.dragMode = true;
        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(destX, destY);
        eventSender.mouseUp();
    }

    if (!window.testRunner || !window.eventSender) {
        document.write("<p>Click the green circle and drag.</p>");
        document.write("<p>The test passes if the drag image is hi-res (looks the same as the original).</p>");
    } else {
        window.onload = drag;
    }
</script>
chromium/third_party/blink/web_tests/images/drag-svg-image.html
