<html> 
<head>

<style>
.editing { 
    border: 2px solid red; 
    padding: 12px; 
    font-size: 24px; 
}
</style>
<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>

<script>

function editingTest() {
    moveSelectionForwardByLineCommand();    
    moveSelectionLeftByCharacterCommand();
}

</script>

<title>Editing Test</title> 
</head> 
<body>
<p>This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the element(span) containing the text, not the parent element(div) that has the contentEditable attribute.
</p>
<div contenteditable id="root" class="editing">
<span id="test" style="color: white; background-color: black">Where is my caret?</span>
</div>

<script>
runEditingTest();
</script>

</body>
</html>