<!DOCTYPE html>
<head>
<script src="../../resources/dump-as-markup.js"></script>
<script>
function runTest(elem)
{
    sel = window.getSelection();
    start = elem.getElementsByClassName("start")[0];
    end = elem.getElementsByClassName("end")[0];
    sel.setBaseAndExtent(start, 0, end, end.childNodes.length);
    document.execCommand("Delete");
    Markup.dump(elem.getElementsByClassName('root')[0], elem.getElementsByClassName("description")[0].textContent);
}
</script>
</head>

<body>
<div id="test1">
<p class="description">The test deletes cells 5 through 9.
Since all the cells in the third row were deleted, the third row is removed.
The cells in the second row are not removed because not all of them are deleted.
The second cell, which used to contain '5', is replaced with the 'world!' text, and the third cell is cleared</p>
<div class="root" contenteditable="true">
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td class="start">5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<div><span class="end">Hello </span>world!</div>
</div>
</div>

<script>runTest(test1);</script>



<div id="test2">
<p class="description">
This test deletes cells 5 through 9 of the first table and 1 through 5 of the second.
In the first table, cells 5-6 in the second row are cleared and the last row (cells 7-9) is removed.
In the second table, the first row (cells 1-3) is removed and cells 4-5 in the second row are cleared</p>
<div class="root" contenteditable="true">
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td class="start">5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<div>Hello world!</div>
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td class="end">5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
</div>

<script>runTest(test2);</script>
</body>
</html>
