<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.someClass {
    color: blue;
}
</style>
<p id="description">You should see "hello webKit" all in blue:</p>
<div id="editor" contenteditable>
<p><span style="font-size: 12pt;" class="someClass">hello</span> <span style="font-size: 12pt;" class="someClass">world</span></p>
<p><span style="font-size: 12pt;" class="someClass">WebKit</span></p>
</div>
<div id="log"></div>
<script src="../../resources/dump-as-markup.js"></script>
<script>

if (window.testRunner)
    testRunner.dumpAsText();

document.getElementById('editor').focus();
for (var i = 0; i < 7; i++)
    getSelection().modify('move', 'forward', 'character');
for (var i = 0; i < 6; i++)
    getSelection().modify('extend', 'forward', 'character');
document.execCommand('delete');

Markup.description(document.getElementById('description').textContent);
Markup.dump('editor');

</script>
</body>
</html>