<style>
p.first-letter:first-letter { color: red; }
</style>
<div id="container">
<p id="description"></p>
<p id="sample" class="first-letter"><span>0123456</span></p>
</div>
<div id="console"></div>
<script src="../../../../resources/js-test.js"></script>
<script>
description('caretRangeFromPoint() should work with :first-letter style');
function $(id) { return document.getElementById(id); }
var middle = $('sample').offsetTop + $('sample').offsetHeight / 2;
var left = $('sample').offsetLeft;
var numberOfChars = $('sample').firstChild.firstChild.length;
var charWidth = $('sample').firstChild.offsetWidth / numberOfChars;
var x = left;
for (var i = 0; i < numberOfChars; ++i) {
var range = document.caretRangeFromPoint(x + 3, middle);
shouldBe('range.startOffset', i.toString());
x += charWidth;
}
if (window.testRunner)
$('container').outerHTML = '';
</script>