<!DOCTYPE html> <html> <head> <title>Test user-select: none in editable contexts</title> <meta charset="utf-8"> <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> <link rel="help" href="https://drafts.csswg.org/css-ui/#valdef-user-select-none"> <style> .user-select-none { -webkit-user-select: none; user-select: none; } </style> </head> <body> <div id="container"> 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="outer" contenteditable="true"> abc<span id="inner" class="user-select-none">XYZ</span>def </div> </div> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> setup({ single_test: true }); const selection = window.getSelection(); selection.collapse(document.getElementById("outer"), 1); selection.modify("move", "forward", "character"); selection.modify("move", "forward", "character"); assert_equals(selection.focusNode, document.getElementById("inner").firstChild); assert_equals(selection.focusOffset, 2); done(); </script> </body> </html>