diff --git a/uievents/textInput/api.html b/uievents/textInput/api.html new file mode 100644 index 000000000000000..c313c89e0d8e672 --- /dev/null +++ b/uievents/textInput/api.html @@ -0,0 +1,68 @@ + + +
Press Backspace in each text field below.
+ + +Type "a" into each text field below.
+ + + + + diff --git a/uievents/textInput/delete.html b/uievents/textInput/delete.html new file mode 100644 index 000000000000000..b5a6ff8579df5cf --- /dev/null +++ b/uievents/textInput/delete.html @@ -0,0 +1,16 @@ + + +Press Delete (Fn+Backspace for macOS) in each text field below.
+ + +Press Enter in the text field below.
+ + + diff --git a/uievents/textInput/enter-textarea-contenteditable.html b/uievents/textInput/enter-textarea-contenteditable.html new file mode 100644 index 000000000000000..5e7bc3c0ec97b08 --- /dev/null +++ b/uievents/textInput/enter-textarea-contenteditable.html @@ -0,0 +1,15 @@ + + +Press Enter in each text field below.
+ + + + diff --git a/uievents/textInput/support/basic.sub.js b/uievents/textInput/support/basic.sub.js new file mode 100644 index 000000000000000..ad87195bc23cce6 --- /dev/null +++ b/uievents/textInput/support/basic.sub.js @@ -0,0 +1,37 @@ +const els = document.querySelectorAll('.test-el'); +const key = "{{GET[key]}}"; +const keyRaw = keyMapping[key] || key; +const expectedData = key === "Enter" ? "\n" : key; +const selectionStart = {{GET[selectionStart]}}; +const selectionEnd = {{GET[selectionEnd]}}; + +for (const el of els) { + promise_test(t => { + return new Promise((resolve, reject) => { + let textInputEvents = 0; + el.addEventListener('textInput', t.step_func(e => { + textInputEvents++; + assert_equals(e.data, expectedData); + assert_true(e.bubbles); + assert_true(e.cancelable); + assert_equals(e.view, window); + assert_equals(e.detail, 0); + assert_true(e instanceof window.TextEvent); + el.removeEventListener('input', reject); + })); + el.addEventListener('input', reject); + el.addEventListener('keyup', t.step_func(e => { + if (e.key !== key) { + return; + } + assert_equals(textInputEvents, 1); + resolve(); + })); + el.onfocus = t.step_func(e => { + test_driver.send_keys(el, keyRaw); + }); + el.focus(); + setSelection(el, selectionStart, selectionEnd); + }); + }, `${document.title}, ${elDesc(el)}`); +} diff --git a/uievents/textInput/support/common.js b/uievents/textInput/support/common.js new file mode 100644 index 000000000000000..bdda6e1fe82254f --- /dev/null +++ b/uievents/textInput/support/common.js @@ -0,0 +1,31 @@ +function elDesc(el) { + let rv = `<${el.localName}`; + if (el.hasAttribute('contenteditable')) { + rv += ` contenteditable="${el.getAttribute('contenteditable')}"`; + } + if (el.hasAttribute('type')) { + rv += ` type="${el.getAttribute('type')}"`; + } + rv += `>`; + return rv; +} + +function setSelection(el) { + if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) { + el.selectionStart = selectionStart; + el.selectionEnd = selectionEnd; + } else { + const s = getSelection(); + s.removeAllRanges(); + const r = new Range(); + r.setStart(el, selectionStart); + r.setEnd(el, selectionEnd); + s.addRange(r); + } +} + +const keyMapping = { + "Enter": "\uE006", + "Backspace": "\uE003", + "Delete": "\uE017", +}; diff --git a/uievents/textInput/support/no-textInput.sub.js b/uievents/textInput/support/no-textInput.sub.js new file mode 100644 index 000000000000000..b952b95cf62e960 --- /dev/null +++ b/uievents/textInput/support/no-textInput.sub.js @@ -0,0 +1,24 @@ +const els = document.querySelectorAll('.test-el'); +const key = "{{GET[key]}}"; +const keyRaw = keyMapping[key] || key; +const selectionStart = {{GET[selectionStart]}}; +const selectionEnd = {{GET[selectionEnd]}}; + +for (const el of els) { + promise_test(t => { + return new Promise((resolve, reject) => { + el.addEventListener('textInput', reject); + el.addEventListener('keyup', t.step_func(e => { + if (e.key !== key) { + return; + } + resolve(); + })); + el.onfocus = t.step_func(e => { + test_driver.send_keys(el, keyRaw); + }); + el.focus(); + setSelection(el, selectionStart, selectionEnd); + }); + }, `${document.title}, ${elDesc(el)}`); +}