editing/inserting/replace-at-visible-boundary.html

<body contentEditable="true">
<b id="bold">bold</b>regular text<br>
</body>
<script src="../editing.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

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

    // Inserting HTML over "regular text" shouldn't be in the bold tag.
    var bold = document.getElementById("bold");
    var unboldText = bold.nextSibling;
    execSetSelectionCommand(unboldText, 0, unboldText, unboldText.textContent.length);
    document.execCommand("insertHTML", false, "<img id='img' src='../resources/abe.png' /> not bold");

    // Verify that the image isn't in the bold tag.
    var image = document.getElementById("img");
    if (image.previousSibling != bold)
        fail("Image should be adjacent to the bold node.");

    // Now try inserting HTML over the image.
    execSetSelectionCommand(image, 0, image, 1);
    document.execCommand("inserthtml", false, "<span id='red' style='color:red'>red text</span>");

    // Verify that the red text isn't in the bold tag.
    var red = document.getElementById("red");
    if (red.previousSibling != bold)
        fail("Red text should be adjacent to the bold node.");

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