no-beforeinput-when-no-selection.html (2728B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>beforeinput should not be fired if there is no selection and builtin editor does nothing</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="../include/editor-test-utils.js"></script> 12 <script> 13 "use strict"; 14 15 /** 16 * Currently, browsers do not dispatch `beforeinput` event for user operation 17 * when an editable element has focus but there is no selection ranges. 18 * This checks the result of each basic common features. 19 */ 20 21 addEventListener("load", () => { 22 const editingHost = document.querySelector("div[contenteditable]"); 23 const utils = new EditorTestUtils(editingHost); 24 25 function promiseFocusAndRemoveAllRanges() { 26 return new Promise(resolve => { 27 document.activeElement?.blur(); 28 editingHost.addEventListener("focus", () => { 29 // Chrome and Safari set selection immediately after "focus" event 30 // dispatching. Therefore, we need to wait for a tick. 31 requestAnimationFrame(() => { 32 getSelection().removeAllRanges(); 33 resolve(getSelection().rangeCount); 34 }); 35 }, {once: true}); 36 editingHost.focus(); 37 }); 38 } 39 40 async function runTest(t, initialInnerHTML, func) { 41 editingHost.innerHTML = initialInnerHTML; 42 assert_equals( 43 await promiseFocusAndRemoveAllRanges(), 44 0, 45 `${t.name}: Selection.removeAllRanges() should make its rangeCount 0` 46 ); 47 let beforeInput; 48 function onBeforeInput(event) { 49 beforeInput = event; 50 } 51 addEventListener("beforeinput", onBeforeInput); 52 await func(); 53 removeEventListener("beforeinput", onBeforeInput); 54 assert_equals( 55 beforeInput, 56 undefined, 57 `${t.name}: beforeinput event should not be fired (inputType="${ 58 beforeInput?.inputType 59 }", data="${beforeInput?.data}")` 60 ); 61 } 62 63 promise_test(async t => { 64 await runTest(t, "<br>", () => utils.sendKey("a")); 65 }, 'Typing "a"'); 66 67 promise_test(async t => { 68 await runTest(t, "abc<br>", () => utils.sendBackspaceKey()); 69 }, 'Typing Backspace'); 70 71 promise_test(async t => { 72 await runTest(t, "abc<br>", () => utils.sendDeleteKey()); 73 }, 'Typing Delete'); 74 75 promise_test(async t => { 76 await runTest(t, "<br>", () => utils.sendEnterKey()); 77 }, 'Typing Enter'); 78 79 promise_test(async t => { 80 await runTest(t, "<br>", () => utils.sendEnterKey(utils.kShift)); 81 }, 'Typing Shift + Enter'); 82 }, {once: true}); 83 </script> 84 <head> 85 <body> 86 <div contenteditable>abc</div> 87 </html>