chromium/src/third_party/blink/web_tests/fast/dom/Document/CaretRangeFromPoint/caretRangeFromPoint-with-before-style.html

<!DOCTTYPE html>
<style>
body { font-family: monospace; }
#margin:before { content: "MARGIN"; color: red; margin-left: -60px; }
#margin { margin-left: 60px; }
#noMargin:before { content: "BEFORE"; color: red; }
</style>
<script src="../../../../resources/js-test.js"></script>
<script>
// Since, CSSOM View introduces document.caretPositionFromPoint to replace
// document.caretRangeFromPoint. We make a polyfill to make this script works
// with Firefox.
if (!document.caretPositionFromPoint) {
    document.caretPositionFromPoint = function(x, y) {
        var range = document.caretRangeFromPoint(x, y);
        if (range === null)
            return null;
        return {offset: range.startOffset, offsetNode: range.startContainer};
    }
}

function testIt(id, charIndex) {
    var sample = document.getElementById(id).firstChild;
    var charWidth = sample.offsetWidth / sample.textContent.length;
    var x = sample.offsetLeft + charWidth * charIndex + 1;
    var y = sample.offsetTop + sample.offsetHeight / 2;
    var position = document.caretPositionFromPoint(x, y);
    if (!position)
        return 'null';
    if (position.offsetNode.nodeType != Node.TEXT_NODE)
        return 'not text';
    return position.offsetNode.textContent[position.offset];
}

onload = function() {
    description('caretRangeFromPoint() should work with :before style');

    shouldBeEqualToString('testIt("margin", -2)', 'a');
    shouldBeEqualToString('testIt("margin", -1)', 'a');
    shouldBeEqualToString('testIt("margin", 0)', 'a');
    shouldBeEqualToString('testIt("margin", 1)', 'b');
    debug('');
    shouldBeEqualToString('testIt("noMargin", -2)', 'a');
    shouldBeEqualToString('testIt("noMargin", -1)', 'a');
    shouldBeEqualToString('testIt("noMargin", 0)', 'a');
    shouldBeEqualToString('testIt("noMargin", 1)', 'b');

    if (window.testRunner)
        document.getElementById('container').textContent = '';
};
</script>
<div id="container">
<p id="description"></p>
<p id="margin"><span>abcde</span></p>
<p id="noMargin"><span>abcde</span></p>
</div>