<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();
    extendSelectionForwardByLineCommand();
	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 at the beginning of a
paragraph preceded by another block and extends into the middle of a following paragraph. 
</div>
<div class="expected-results">
Expected Results:
<br>
Should see the three lines in the red box. First line should be "one". Next one should be "two".  Next one should be "ur". Insertion point should be blinking at the start of the third 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>
