test_query_content_when_selection_in_text_control.html (5997B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>QueryContentEvent when Selection is in text control element</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 9 <script> 10 "use strict"; 11 12 SimpleTest.waitForExplicitFinish(); 13 SimpleTest.waitForFocus(() => { 14 const container = document.querySelector("div"); 15 // <input> 16 { 17 container.innerHTML = "abc<input>def"; 18 const input = container.querySelector("input"); 19 getSelection().collapse(input, 0); 20 const result = synthesizeQueryTextContent(0, 100); 21 const desc = `"<div contenteditable>abc<input>{}</input>def</div>" before explicitly setting focus to <input>`; 22 is( 23 result.succeeded ? result.text : null, 24 "abc\ndef", 25 `${desc}: All text in the editing host should be returned` 26 ); 27 } 28 { 29 container.innerHTML = "abc<input>def"; 30 const input = container.querySelector("input"); 31 input.focus(); 32 container.focus(); 33 getSelection().collapse(input, 0); 34 const result = synthesizeQueryTextContent(0, 100); 35 const desc = `"<div contenteditable>abc<input>{}</input>def</div>" after explicitly setting focus to <input>`; 36 is( 37 result.succeeded ? result.text : null, 38 "abc\ndef", 39 `${desc}: All text in the editing host should be returned` 40 ); 41 } 42 { 43 container.innerHTML = 'abc<input value="def">ghi'; 44 const input = container.querySelector("input"); 45 getSelection().collapse(input, 0); 46 const result = synthesizeQueryTextContent(0, 100); 47 const desc = `"<div contenteditable>abc<input value="def">{}</input>def</div>" before explicitly setting focus to <input>`; 48 is( 49 result.succeeded ? result.text : null, 50 "abc\nghi", 51 `${desc}: All text in the editing host should be returned` 52 ); 53 } 54 { 55 container.innerHTML = 'abc<input value="def">ghi'; 56 const input = container.querySelector("input"); 57 input.focus(); 58 container.focus(); 59 getSelection().collapse(input, 0); 60 const result = synthesizeQueryTextContent(0, 100); 61 const desc = `"<div contenteditable>abc<input>{}</input>ghi</div>" after explicitly setting focus to <input>`; 62 is( 63 result.succeeded ? result.text : null, 64 "abc\nghi", 65 `${desc}: All text in the editing host should be returned` 66 ); 67 } 68 { 69 container.innerHTML = 'abc<input value="def">ghi'; 70 const input = container.querySelector("input"); 71 input.focus(); 72 document.execCommand("insertText", false, "X"); 73 container.focus(); 74 getSelection().collapse(input, 0); 75 const result = synthesizeQueryTextContent(0, 100); 76 const desc = `"<div contenteditable>abc<input value="def">{}</input>ghi</div>" after explicitly setting focus to <input> and updating its value`; 77 is( 78 result.succeeded ? result.text : null, 79 "abc\nghi", // "X" shouldn't appear in the DOM 80 `${desc}: All text in the editing host should be returned` 81 ); 82 } 83 // <textarea> 84 { 85 container.innerHTML = "abc<textarea></textarea>def"; 86 const textarea = container.querySelector("textarea"); 87 getSelection().collapse(textarea, 0); 88 const result = synthesizeQueryTextContent(0, 100); 89 const desc = `"<div contenteditable>abc<textarea>{}</textarea>def</div>" before explicitly setting focus to <textarea>`; 90 is( 91 result.succeeded ? result.text : null, 92 "abc\ndef", 93 `${desc}: All text in the editing host should be returned` 94 ); 95 } 96 { 97 container.innerHTML = "abc<textarea></textarea>def"; 98 const textarea = container.querySelector("textarea"); 99 textarea.focus(); 100 container.focus(); 101 getSelection().collapse(textarea, 0); 102 const result = synthesizeQueryTextContent(0, 100); 103 const desc = `"<div contenteditable>abc<textarea>{}</textarea>def</div>" after explicitly setting focus to <textarea>`; 104 is( 105 result.succeeded ? result.text : null, 106 "abc\ndef", 107 `${desc}: All text in the editing host should be returned` 108 ); 109 } 110 { 111 container.innerHTML = "abc<textarea>def</textarea>ghi"; 112 const textarea = container.querySelector("textarea"); 113 getSelection().collapse(textarea.firstChild, 1); 114 const result = synthesizeQueryTextContent(0, 100); 115 const desc = `"<div contenteditable>abc<textarea>d[]ef</textarea>def</div>" before explicitly setting focus to <textarea>`; 116 is( 117 result.succeeded ? result.text : null, 118 "abc\ndefghi", // XXX Well, \n should be there at </textarea>... 119 `${desc}: All text in the editing host should be returned` 120 ); 121 } 122 { 123 container.innerHTML = "abc<textarea>def</textarea>ghi"; 124 const textarea = container.querySelector("textarea"); 125 textarea.focus(); 126 container.focus(); 127 getSelection().collapse(textarea.firstChild, 1); 128 const result = synthesizeQueryTextContent(0, 100); 129 const desc = `"<div contenteditable>abc<textarea>d[]ef</textarea>ghi</div>" after explicitly setting focus to <textarea>`; 130 is( 131 result.succeeded ? result.text : null, 132 "abc\ndefghi", // XXX Well, \n should be there at </textarea>... 133 `${desc}: All text in the editing host should be returned` 134 ); 135 } 136 { 137 container.innerHTML = "abc<textarea>def</textarea>ghi"; 138 const textarea = container.querySelector("textarea"); 139 textarea.focus(); 140 document.execCommand("insertText", false, "X"); 141 container.focus(); 142 getSelection().collapse(textarea.firstChild, 1); 143 const result = synthesizeQueryTextContent(0, 100); 144 const desc = `"<div contenteditable>abc<textarea>d[]ef</textarea>ghi</div>" after explicitly setting focus to <textarea> and updating its value`; 145 is( 146 result.succeeded ? result.text : null, 147 "abc\ndefghi", // "X" shouldn't appear in the DOM 148 `${desc}: All text in the editing host should be returned` 149 ); 150 } 151 SimpleTest.finish(); 152 }); 153 </script> 154 </head> 155 <body> 156 <div contenteditable></div> 157 </body> 158 </html>