<html> 
<head>

<style>
.editing { 
    border: 2px solid red; 
    font-size: 24px; 
}
.explanation { 
    border: 2px solid blue; 
    padding: 12px; 
    font-size: 24px; 
    margin-bottom: 24px;
}
.scenario { margin-bottom: 16px;}
.scenario:first-line { font-weight: bold; margin-bottom: 16px;}
.expected-results:first-line { font-weight: bold }
</style>
<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>

<script>

function editingTest() {
    moveSelectionForwardByLineCommand();
    moveSelectionForwardByLineCommand();
    moveSelectionForwardByLineCommand();
	for (i = 0; i < 2; i++)
		moveSelectionForwardByCharacterCommand();    
	for (i = 0; i < 2; i++)
		extendSelectionForwardByCharacterCommand();    
    deleteCommand();
}

</script>

<title>Editing Test</title> 
</head> 
<body>

<div class="explanation">
<div class="scenario">
Tests: 
<br>
Deleting when a selection starts in the middle of the last paragraph and extends to the end of that paragraph
</div>
<div class="expected-results">
Expected Results:
<br>
Should see the four lines in the red box. First line should be "one". Next one should be "two".  Next one should be "three". Last one should be "fo".  Insertion point should be blinking at the start of the fourth (last) line.
</div>
</div>

<div contenteditable id="root" style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space;">
<div id="test" class="editing">
one
<p style="margin-top: 0; margin-bottom: 0">two</p>
<p style="margin-top: 0; margin-bottom: 0">three</p>
<p style="margin-top: 0; margin-bottom: 0">four</p>
</div>
</div>

<script>
runEditingTest();
</script>

</body>
</html>
