|
Lines 1-54
a/LayoutTests/editing/selection/drag-list-item.html_sec1
|
| 1 |
<!DOCTYPE html> |
|
|
| 2 |
|
| 3 |
<body> |
| 4 |
<script src="../../resources/dump-as-markup.js"></script> |
| 5 |
<div contenteditable="true"> |
| 6 |
<ol id="test"> |
| 7 |
<li id="one">one</li><li id="two">two</li><li id="three">three</li><li id="four">four</li> |
| 8 |
</ol> |
| 9 |
</div> |
| 10 |
|
| 11 |
<script> |
| 12 |
Markup.description('This test drags a selection of one <li> and drops them after another <li> in the first list. The same test is repeated in the second list but this time with two selected items instead of one. It verifies that the behavior is independent of how many fully selected items we move, i.e. fully selected <li> are moved as <li> and not just as plain text'); |
| 13 |
|
| 14 |
function editingTest(testElement, startSelectionElement, endSelectionElement, endSelectionElementOffset, targetElement) { |
| 15 |
|
| 16 |
var testElement = document.getElementById(testElement); |
| 17 |
var selection = window.getSelection(); |
| 18 |
selection.setPosition(testElement, 0); |
| 19 |
|
| 20 |
var start = document.getElementById(startSelectionElement); |
| 21 |
var startx = start.offsetLeft; |
| 22 |
var starty = start.offsetTop + start.offsetHeight / 2; |
| 23 |
selection.setBaseAndExtent(start, 0, document.getElementById(endSelectionElement), endSelectionElementOffset); |
| 24 |
|
| 25 |
eventSender.mouseMoveTo(startx, starty); |
| 26 |
eventSender.mouseDown(); |
| 27 |
|
| 28 |
eventSender.leapForward(200); |
| 29 |
|
| 30 |
var target = document.getElementById(targetElement); |
| 31 |
var targetx = target.parentNode.offsetLeft + target.offsetLeft + target.offsetWidth / 2; |
| 32 |
var targety = target.offsetTop + target.offsetHeight / 2; |
| 33 |
|
| 34 |
eventSender.mouseMoveTo(targetx, targety); |
| 35 |
eventSender.mouseUp(); |
| 36 |
|
| 37 |
selection.collapse(); |
| 38 |
} |
| 39 |
|
| 40 |
if (window.testRunner) { |
| 41 |
|
| 42 |
Markup.dump("test", "The original list looks like this. 'two' is going to be selected and pasted after 'four'"); |
| 43 |
editingTest("test", "two", "two", 4, "four"); |
| 44 |
Markup.dump("test", "'two' should appear as a new <li> after 'four'"); |
| 45 |
|
| 46 |
document.getElementById("test").innerHTML = "<li id=\"one\">one</li><li id=\"two\">two</li>" |
| 47 |
+ "<li id=\"three\">three</li><li id=\"four\">four</li>"; |
| 48 |
Markup.dump("test", "The original list looks like this. 'two' and 'three' are going to be selected and pasted after 'four'"); |
| 49 |
editingTest("test", "two", "three", 5, "four"); |
| 50 |
Markup.dump("test", "'two' and 'three' should appear as <li> after 'four'"); |
| 51 |
} |
| 52 |
</script> |
| 53 |
</body> |
| 54 |
</html> |