user-select-none-in-editable.html (1129B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test user-select: none in editable contexts</title> 5 <meta charset="utf-8"> 6 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 7 <link rel="help" href="https://drafts.csswg.org/css-ui/#valdef-user-select-none"> 8 <style> 9 .user-select-none { 10 -webkit-user-select: none; 11 user-select: none; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="container"> 17 Manual step: 18 <ol> 19 <li>Move caret after "c"</li> 20 <li>Hit right arrow key twice</li> 21 <li>Caret should be after "Y"</li> 22 </ol> 23 <div id="outer" contenteditable="true"> 24 abc<span id="inner" class="user-select-none">XYZ</span>def 25 </div> 26 </div> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script> 30 setup({ single_test: true }); 31 const selection = window.getSelection(); 32 selection.collapse(document.getElementById("outer"), 1); 33 selection.modify("move", "forward", "character"); 34 selection.modify("move", "forward", "character"); 35 assert_equals(selection.focusNode, document.getElementById("inner").firstChild); 36 assert_equals(selection.focusOffset, 2); 37 done(); 38 </script> 39 </body> 40 </html>