<!DOCTYPE html>
<html>
<body contentEditable="true">
<font id="fonts">
First line
<div id="secondDiv">
Second line
</div>
</font>
</body>
<script src="../editing.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function fail(msg) {
        console.log(msg);
        throw msg;
    }

    // Inserting HTML to replace the "line" in the "Second line" should not insert an extra div (line break).
    var targetDiv = document.getElementById("secondDiv");
    var targetText = targetDiv.firstChild;
    execSetSelectionCommand(targetText, 8, targetText, targetText.textContent.length);
    document.execCommand("inserthtml", false, "<span id='red' style='color:red'>line</span>");

    // Verify that the font still only has one div.
    var font = document.getElementById("fonts");
    var divs = font.querySelectorAll("div");
    if (divs.length != 1)
        fail("An extra div is inserted which is incorrect. There are " + divs.length + " divs inside font element.");

    // Inserting HTML into "Second line" should not insert an extra div (line break).
    execSetSelectionCommand(targetText, 8, targetText, 8);
    document.execCommand("inserthtml", false, "<span id='green' style='color:green'>green</span>");

    // Verify that the font still only has one div.
    var font = document.getElementById("fonts");
    var divs = font.querySelectorAll("div");
    if (divs.length != 1)
        fail("An extra div is inserted which is incorrect. There are " + divs.length + " divs inside font element.");

    // Replace text with SUCCESS.
    document.body.innerHTML = "SUCCESS";
</script>
</html>