<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function log(msg)
        {
            document.body.appendChild(document.createTextNode(msg + '\n'));
        }

        function runTests()
        {
            if (window.testRunner)
                testRunner.dumpAsText();

            var listener = function(e) {
                var el = document.getElementById('cont');
                if (el.firstElementChild && el.lastElementChild != el.firstElementChild) {
                    el.lastElementChild.appendChild(el.firstElementChild);
                    el.lastElementChild && el.removeChild(el.lastElementChild);
                }
                if (e.target.firstChild && e.target.firstChild.className == 'foo')
                    e.target.firstChild.innerHTML = e.target.firstChild.innerHTML.split(' ')[0];
            };
            document.addEventListener("DOMSubtreeModified", listener);

            var el = document.getElementById('cont');
            window.getSelection().setBaseAndExtent(document.getElementById('start'), 0, document.getElementById('end'), 0);
            var str = '<span class="foo" style="color: red;"><span>styled</span> <span>content</span></span>';
            document.execCommand("InsertHTML", false, str);

            document.removeEventListener("DOMSubtreeModified", listener);

            log('PASS: No crash.');
        }

    </script>
</head>
<body onload="runTests();">
    <div id="cont" contenteditable="true">
        <span>This <span id="start">tests</span></span>
        <span>that we don't crash when <code id="end">mutating</code> the dom</span>
        <span>during execution of an InsertHTML command.</span>
    </div>
</body>
</html>