<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();
    extendSelectionForwardByLineCommand();
    extendSelectionForwardByCharacterCommand();
    deleteCommand();
}

</script>

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

<div class="explanation">
<div class="scenario">
Tests: 
<br>
Deleting when a selection starts in a blank line created by a BR element and extends to the end of a block.
</div>
<div class="expected-results">
Expected Results:
<br>
Should see the three lines in the red box. First line should be "A". Next two lines should be empty. Insertion point should
be blinking on the second line (the first blank one).
</div>
</div>

<div contenteditable id="root" style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">
<div id="test" class="editing">
<p style="margin-top: 0; margin-bottom: 0">A</p>
<BR>
<p style="margin-top: 0; margin-bottom: 0">A</p>
<p style="margin-top: 0; margin-bottom: 0"><BR class="webkit-block-placeholder"></p>
</div>
</div>

<script>
runEditingTest();
</script>

</body>
</html>
