<!DOCTYPE html>
<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"></script>
<script src="../../resources/ui-helper.js"></script>
<div class="scenario">
<p>This tests deleting a selection created with a word granularity.  To run it manually, double click on 'bar' and hit delete.  You should see 'foo baz'.</p>
</div>
<div class="expected-results">
Expected Results:
<br>
The second word and the space before the second word should be deleted. It should like this this:
<BR>
foo baz
</div>
<div id="test" class="editing" contenteditable="true">foo b<span id="target">a</span>r baz</div>

<script>
async function editingTest() {
    var target = document.getElementById("target");
    await UIHelper.selectWordByDoubleTapOrClick(target);
    testRunner.execCommand("DeleteBackward");
}

runDumpAsTextEditingTest(true);

</script>