Add new text to paragraph and update :first-letter styles

HTML

<!doctype html>
<html> 
<head>
<title>Test for first-letter that is added by DOM scripting</title>
<style type="text/css">
p:first-letter {text-decoration: underline; color: #CB000F;}
</style>
<script type="text/javascript">
if (window.testRunner)
    testRunner.waitUntilDone();
window.onload = function() {
    document.body.offsetTop;
    addTextNode();
};
function addTextNode() {
    var textNode = document.createTextNode('I am adding a new text. ');
    var para = document.getElementById('test');
    para.insertBefore(textNode, para.firstChild);
    if (window.testRunner)
        testRunner.notifyDone();
}
</script>
</head>
<body>
<p id="test">
This is a test paragraph. You can insert extra text at its start; 
the :first-letter styles should be updated to accomodate this new text.
</p>
</body>
</html>