<!DOCTYPE html>
<body>
    <div id="description">This tests deleting a selection that has a styling element in it. Should move styling elements to head to prevent style loss.</div>
    <div id="rootEditableElement" contentEditable="true">
        <div> hide styling elements in --> </div>
        <style> .text { color:red; } </style>
        <link rel="stylesheet" type="text/css" href="../editingStyle.css" />
        <div class = "text"> between </div>
    </div>
<script src="../../resources/dump-as-markup.js"></script>
<script>
Markup.description(document.getElementById('description').textContent);
document.getElementById('rootEditableElement').focus();
document.execCommand("SelectAll");
document.execCommand("Delete");
Markup.dump('rootEditableElement', 'styling elements have been moved');
document.execCommand("Undo");
Markup.dump('rootEditableElement', 'styling elements are back to their original place');
</script>
</body></html>