| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| function log(s) |
| { |
| document.getElementById('console') |
| .appendChild(document.createElement('div')) |
| .appendChild(document.createTextNode(s)); |
| } |
| |
| function onDragStart1(e) |
| { |
| if (e.target.parentNode.id == 'drag1' |
| && e.target.nodeType == Node.TEXT_NODE) |
| log('Test 1: PASS'); |
| else |
| log('Test 1: FAIL: target element was ' + e.target); |
| } |
| |
| function onDragStart2(e) |
| { |
| if (e.target.id == 'drag2') |
| log('Test 2: PASS'); |
| else |
| log('Test 2: FAIL: target element was ' + e.target); |
| } |
| |
| function onDragStart3(e) |
| { |
| if (e.target.id == 'dragImage') |
| log('Test 3: PASS'); |
| else |
| log('Test 3: FAIL: target element was ' + e.target); |
| } |
| |
| function dragAndDrop(n) |
| { |
| var startX = n.offsetLeft + n.offsetWidth / 2; |
| var startY = n.offsetTop + n.offsetHeight / 2; |
| eventSender.mouseMoveTo(startX, startY); |
| eventSender.mouseDown(); |
| eventSender.leapForward(200); |
| eventSender.mouseMoveTo(startX + 400, startY); |
| eventSender.mouseUp(); |
| } |
| |
| function runTest() |
| { |
| var drag1 = document.getElementById('drag1'); |
| var drag2 = document.getElementById('drag2'); |
| var drag3 = document.getElementById('drag3'); |
| |
| drag1.addEventListener('dragstart', onDragStart1); |
| drag2.addEventListener('dragstart', onDragStart2); |
| drag3.addEventListener('dragstart', onDragStart3); |
| |
| if (!window.testRunner) |
| return; |
| testRunner.dumpAsText(); |
| |
| var s = window.getSelection(); |
| var r; |
| |
| s.removeAllRanges(); |
| r = document.createRange(); |
| r.selectNode(drag1); |
| s.addRange(r); |
| dragAndDrop(drag1); |
| |
| s.removeAllRanges(); |
| drag2.focus(); |
| drag2.select(); |
| dragAndDrop(drag2); |
| |
| s.removeAllRanges(); |
| r = document.createRange(); |
| r.selectNode(drag3); |
| dragAndDrop(document.getElementById('dragImage')); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Simple test that dragging and dropping a selection targets the right node. |
| <div id="drag1">Test 1: select this line and drag me.</div> |
| <p>Test 2: <input id="drag2" type="text" value="Select the text in this input and drag me"></input> |
| <div id="drag3">Test 3: select this line and <img id="dragImage" src="../resources/abe.png"> drag me from the image.</div> |
| <div id="console"></div> |
| </body> |
| </html> |
