UIEvents: Test the textInput event

See w3c/uievents#362
web-platform-tests · Feb 8, 2024 · a53bd11 · a53bd11
1 parent cdafbec
commit a53bd11
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 0 deletions.
diff --git a/uievents/textInput/api.html b/uievents/textInput/api.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: API</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(() => {
+  assert_throws_js(TypeError, () => {
+    new TextEvent('textInput');
+  });
+}, "No constructor");
+
+test(() => {
+  const e = document.createEvent('TextEvent');
+  assert_equals(Object.getPrototypeOf(e), window.TextEvent.prototype);
+  assert_equals(Object.getPrototypeOf(Object.getPrototypeOf(e)), window.UIEvent.prototype);
+  assert_equals(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(e))), window.Event.prototype);
+}, "document.CreateEvent('TextEvent') prototype chain");
+
+test(() => {
+  const e = document.createEvent('TextEvent');
+  assert_throws_js(TypeError, () => { e.initTextEvent(); });
+}, "initTextEvent() no arguments");
+
+test(() => {
+  const e = document.createEvent('TextEvent');
+  e.initTextEvent('foo');
+  assert_equals(e.type, 'foo');
+  assert_equals(e.bubbles, false);
+  assert_equals(e.cancelable, false);
+  assert_equals(e.view, null);
+  assert_equals(e.data, 'undefined');
+}, "initTextEvent('foo')");
+
+test(() => {
+  const e = document.createEvent('TextEvent');
+  e.initTextEvent('foo', true, true, window, 'bar');
+  assert_equals(e.type, 'foo');
+  assert_equals(e.bubbles, true);
+  assert_equals(e.cancelable, true);
+  assert_equals(e.view, window);
+  assert_equals(e.data, 'bar');
+}, "initTextEvent('foo', true, true, window, 'bar')");
+
+test(() => {
+  const div = document.createElement('div');
+  let textinputCount = 0;
+  let textInputCount = 0;
+  div.addEventListener('textinput', e => {
+    assert_equals(e.type, 'textinput');
+    textinputCount++;
+  });
+  div.addEventListener('textInput', e => {
+    assert_equals(e.type, 'textInput');
+    textInputCount++;
+  });
+  const textinputEvent = document.createEvent('TextEvent');
+  textinputEvent.initTextEvent('textinput');
+  div.dispatchEvent(textinputEvent);
+
+  const textInputEvent = document.createEvent('TextEvent');
+  textInputEvent.initTextEvent('textInput');
+  div.dispatchEvent(textInputEvent);
+
+  assert_equals(textinputCount, 1);
+  assert_equals(textInputCount, 1);
+}, "case sensitivity: textInput vs textinput");
+</script>
diff --git a/uievents/textInput/backspace.html b/uievents/textInput/backspace.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: backspace</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+[contenteditable] { border: thin inset silver; }
+</style>
+<p>Press Backspace in each text field below.</p>
+<input class=test-el value=a>
+<textarea class=test-el>a</textarea>
+<div contenteditable=true class=test-el>a</div>
+<script src="support/common.js"></script>
+<script src="support/no-textInput.sub.js?key=Backspace&selectionStart=1&selectionEnd=1"></script>
diff --git a/uievents/textInput/basic.html b/uievents/textInput/basic.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+[contenteditable] { border: thin inset silver; }
+</style>
+<p>Type "a" into each text field below.</p>
+<input class=test-el>
+<textarea class=test-el></textarea>
+<div contenteditable=true class=test-el></div>
+<script src="support/common.js"></script>
+<script src="support/basic.sub.js?key=a&selectionStart=0&selectionEnd=0"></script>
diff --git a/uievents/textInput/delete.html b/uievents/textInput/delete.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: delete</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+[contenteditable] { border: thin inset silver; }
+</style>
+<p>Press Delete (Fn+Backspace for macOS) in each text field below.</p>
+<input class=test-el value=a>
+<textarea class=test-el>a</textarea>
+<div contenteditable=true class=test-el>a</div>
+<script src="support/common.js"></script>
+<script src="support/no-textInput.sub.js?key=Delete&selectionStart=0&selectionEnd=0"></script>
diff --git a/uievents/textInput/enter-input.html b/uievents/textInput/enter-input.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: Enter key for input element</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+[contenteditable] { border: thin inset silver; }
+</style>
+<p>Press Enter in the text field below.</p>
+<input class=test-el>
+<script src="support/common.js"></script>
+<script src="support/no-textInput.sub.js?key=Enter&selectionStart=0&selectionEnd=0"></script>
diff --git a/uievents/textInput/enter-textarea-contenteditable.html b/uievents/textInput/enter-textarea-contenteditable.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>textInput: Enter key for textarea and contenteditable</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+[contenteditable] { border: thin inset silver; }
+</style>
+<p>Press Enter in each text field below.</p>
+<textarea class=test-el></textarea>
+<div contenteditable=true class=test-el></div>
+<script src="support/common.js"></script>
+<script src="support/basic.sub.js?key=Enter&selectionStart=0&selectionEnd=0"></script>
diff --git a/uievents/textInput/support/basic.sub.js 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
@@ -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
@@ -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)}`);
+}