test_multiline_editor_selection.html (4277B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Multiline editor selection test</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link 8 rel="stylesheet" 9 href="chrome://mochikit/content/tests/SimpleTest/test.css" 10 /> 11 <link rel="stylesheet" href="chrome://global/skin/global.css" /> 12 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 13 <script src="../../../../../toolkit/content/tests/widgets/lit-test-helpers.js"></script> 14 <script 15 type="module" 16 src="chrome://browser/content/multilineeditor/multiline-editor.mjs" 17 ></script> 18 <script> 19 let html; 20 let testHelpers; 21 22 add_setup(async function setup() { 23 testHelpers = new LitTestHelpers(); 24 ({ html } = await testHelpers.setupLit()); 25 testHelpers.setupTests({ 26 templateFn: (attributes) => html`<moz-multiline-editor ${attributes}></moz-multiline-editor>`, 27 }); 28 }); 29 30 add_task(async function testSelectionProperties() { 31 const result = await testHelpers.renderTemplate(); 32 const editor = result.querySelector("moz-multiline-editor"); 33 34 editor.value = "Hello World"; 35 is(editor.selectionStart, 11, "Selection starts at end of text after setting value"); 36 is(editor.selectionEnd, 11, "Selection ends at end of text after setting value"); 37 }); 38 39 add_task(async function testSetSelectionRange() { 40 const result = await testHelpers.renderTemplate(); 41 const editor = result.querySelector("moz-multiline-editor"); 42 43 editor.value = "Hello World"; 44 editor.setSelectionRange(0, 5); 45 is(editor.selectionStart, 0, "Selection start is 0"); 46 is(editor.selectionEnd, 5, "Selection end is 5"); 47 }); 48 49 add_task(async function testSelectAll() { 50 const result = await testHelpers.renderTemplate(); 51 const editor = result.querySelector("moz-multiline-editor"); 52 53 const text = "Hello World"; 54 editor.value = text; 55 editor.select(); 56 is(editor.selectionStart, 0, "Selection starts at beginning"); 57 is(editor.selectionEnd, text.length, "Selection ends at text length"); 58 }); 59 60 add_task(async function testSelectionWithMultiline() { 61 const result = await testHelpers.renderTemplate(); 62 const editor = result.querySelector("moz-multiline-editor"); 63 64 editor.value = "Line 1\nLine 2"; 65 editor.setSelectionRange(0, 6); 66 is(editor.selectionStart, 0, "Selection start is correct"); 67 is(editor.selectionEnd, 6, "Selection end is correct"); 68 }); 69 70 add_task(async function testSelectionStartProperty() { 71 const result = await testHelpers.renderTemplate(); 72 const editor = result.querySelector("moz-multiline-editor"); 73 74 editor.value = "Hello World"; 75 const initialEnd = editor.selectionEnd; 76 editor.selectionStart = 6; 77 is(editor.selectionStart, 6, "Selection start is set via property"); 78 is(editor.selectionEnd, initialEnd, "Selection end remains unchanged"); 79 }); 80 81 add_task(async function testSelectionEndProperty() { 82 const result = await testHelpers.renderTemplate(); 83 const editor = result.querySelector("moz-multiline-editor"); 84 85 editor.value = "Hello World"; 86 editor.setSelectionRange(0, 5); 87 editor.selectionEnd = 11; 88 is(editor.selectionStart, 0, "Selection start remains at 0"); 89 is(editor.selectionEnd, 11, "Selection end is set via property"); 90 }); 91 92 add_task(async function testSelectionchangeEvent() { 93 const result = await testHelpers.renderTemplate(); 94 const editor = result.querySelector("moz-multiline-editor"); 95 96 let selectionChangeEventFired = false; 97 editor.addEventListener("selectionchange", () => { 98 selectionChangeEventFired = true; 99 }); 100 101 editor.value = "Hello World"; 102 editor.setSelectionRange(0, 5); 103 104 ok(selectionChangeEventFired, "Selectionchange event was fired"); 105 }); 106 </script> 107 </head> 108 <body> 109 <p id="display"></p> 110 <div id="content" style="display: none"></div> 111 <pre id="test"></pre> 112 </body> 113 </html>