<html>
<head>
    <title>Left</title>
</head>

<body style="margin:0; padding:0">

<script>
function log(message) {
    console_doc = parent.frames[2].document;
    var item = console_doc.createElement("li");
    item.appendChild(console_doc.createTextNode(message));
    console_doc.getElementById('console_messages').appendChild(item);
}
</script>

<div style="width:150; height:75; text-align:center;">
  <a id="elementToDrag"
     href="#"
     style="position: relative; top: 50"
     ondrag="log('ondrag src')"
     ondragstart="log('ondragstart src')"
     ondragend="log('ondragend src')"
     ondragenter="log('ondragenter src')"
     ondragover="log('ondragover src')"
     ondragleave="log('ondragleave src')"
     ondrop="log('ondrop src')">
  Drag me
  </a>
</div>

<div id="dragTarget"
     style="width:150; height:150; background-color:lightgreen; text-align:center;"
     ondrag="alert('ondrag left target')"
     ondragstart="alert('ondragstart left target')"
     ondragend="alert('ondragend left target')"
     ondragenter="log('ondragenter left target'); return false;"
     ondragover="log('ondragover left target'); return false;"
     ondragleave="log('ondragleave left target')"
     ondrop="log('ondrop left target')">
  <span style="position: relative; top: 50">Here</span>
</div>

<p><a href="http://bugs.webkit.org/show_bug.cgi?id=7323" target="_top">Bug 7323</a>: 
REGRESSION (10.4.4): ondrag* events don't fire on page in a frame</p>
<p>This test works only in automatic mode, but you can also try dragging manually to compare the results with other browsers.</p>

</body>
</html>