LayoutTests/editing/selection/user-select-none-in-editable.html

<style>
.user-select-none {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
</style>
<script src="../../fast/js/resources/js-test-pre.js"></script>
<div id="container">
<p id="description"></p>
Manual step:
<ol>
<li>Move caret after "c"</li>
<li>Hit right arrow key twice</li>
<li>Caret should be after "Y"</li>
</ol>
<div id="sample1" contenteditable="true">
abc<span id="sample2" class="user-select-none">XYZ</span>def
</div>
</div>
<script>
function $(id) { return document.getElementById(id); }
description('Test caret movement into user-select:none content.');

var sample1 = $('sample1');
var sample2 = $('sample2');
var selection = window.getSelection();
selection.setPosition(sample1, 1);
selection.modify('move', 'forward', 'character');
selection.modify('move', 'forward', 'character');
shouldBe('selection.focusNode', 'sample2.firstChild');
shouldBe('selection.focusOffset', '2');

if (window.testRunner)
    $('container').outerHTML = '';
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>