toString-user-select-none.html (1937B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Selection.toString() with user-select: none elements</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id="test-content"> 8 <!-- Test case 1: Basic user-select: none --> 9 <div id="basic"> 10 a<span style="user-select: none;">b</span>c 11 </div> 12 13 <!-- Test case 2: Nested user-select: none --> 14 <div id="nested"> 15 start <span style="user-select: none;">unselectable <strong>nested</strong> 16 text</span> end 17 </div> 18 19 <!-- Test case 3: Selectable children inside unselectable container --> 20 <div id="container" style="user-select: none;"> 21 <span style="user-select: text;">selectable</span> unselectable 22 <span style="user-select: text;">text</span> 23 </div> 24 </div> 25 26 <script> 27 function selectAllAndGetSelectionTextInElement(element) { 28 const selection = getSelection(); 29 selection.removeAllRanges(); 30 const range = document.createRange(); 31 range.selectNodeContents(element); 32 selection.addRange(range); 33 return selection.toString(); 34 } 35 36 test(() => { 37 const result = selectAllAndGetSelectionTextInElement(document.getElementById('basic')); 38 assert_equals(result, 'ac', 39 'Basic user-select: none content should be excluded'); 40 }, 'Selection.toString() excludes basic user-select: none content'); 41 42 test(() => { 43 const result = selectAllAndGetSelectionTextInElement(document.getElementById('nested')); 44 assert_equals(result, 'start end', 45 'Nested user-select: none content should be excluded'); 46 }, 'Selection.toString() excludes nested user-select: none content'); 47 48 test(() => { 49 const result = selectAllAndGetSelectionTextInElement(document.getElementById('container')); 50 assert_equals(result, 'selectabletext', 51 'Selectable children should be included even in unselectable container'); 52 }, 'Selection.toString() includes selectable children in unselectable ' + 53 'container'); 54 </script>