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

   1 <style>
   2 .user-select-none {
   3     -webkit-user-select: none;
   4     -khtml-user-select: none;
   5     -moz-user-select: none;
   6     -ms-user-select: none;
   7     -o-user-select: none;
   8     user-select: none;
   9 }
  10 </style>
  11 <script src="../../resources/js-test.js"></script>
  12 <div id="container">
  13 <p id="description"></p>
  14 Manual step:
  15 <ol>
  16 <li>Move caret after "c"</li>
  17 <li>Hit right arrow key twice</li>
  18 <li>Caret should be after "Y"</li>
  19 </ol>
  20 <div id="sample1" contenteditable="true">
  21 abc<span id="sample2" class="user-select-none">XYZ</span>def
  22 </div>
  23 </div>
  24 <script>
  25 function $(id) { return document.getElementById(id); }
  26 description('Test caret movement into user-select:none content.');
  27
  28 var sample1 = $('sample1');
  29 var sample2 = $('sample2');
  30 var selection = window.getSelection();
  31 selection.collapse(sample1, 1);
  32 selection.modify('move', 'forward', 'character');
  33 selection.modify('move', 'forward', 'character');
  34 shouldBe('selection.focusNode', 'sample2.firstChild');
  35 shouldBe('selection.focusOffset', '2');
  36
  37 if (window.testRunner)
  38     $('container').outerHTML = '';
  39 </script>