<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body id="body">
<div id="content">

<div id="contenteditable" contenteditable="true" role="textbox">HelloWorld</div>
<input type="text" id="text" value="Hello world">
<textarea id="textarea">Hello world</textarea>
</div>

<p id="description"></p>
<div id="console"></div>

<script>
    description("This tests that the replace with range API functions as expected.");

    if (window.accessibilityController) {
        var contenteditable = accessibilityController.accessibleElementById("contenteditable");
        shouldBeTrue('contenteditable.replaceTextInRange("Blurb", 5, 5)');
        shouldBe("contenteditable.stringValue", "'AXValue: HelloBlurb'");

        // now test what happens when a control has focus
        document.getElementById("contenteditable").focus();
        shouldBeTrue('contenteditable.replaceTextInRange("Blorg", 5, 5)');
        shouldBe("contenteditable.stringValue", "'AXValue: HelloBlorg'");
        document.getElementById("contenteditable").blur();

        var text = accessibilityController.accessibleElementById("text");
        shouldBeTrue('text.replaceTextInRange("blurb", 6, 5)');
        shouldBe("text.stringValue", "'AXValue: Hello blurb'");

        var textarea = accessibilityController.accessibleElementById("textarea");
        shouldBeTrue('textarea.replaceTextInRange("blurb", 6, 5)');
        shouldBe("textarea.stringValue", "'AXValue: Hello blurb'");

        document.getElementById("content").style.visibility = "hidden";
    }

</script>

</body>
</html>