UIEvents: Tentative test for textInput with drag and drop

See w3c/uievents#367
web-platform-tests · Apr 3, 2024 · ee2fe53 · ee2fe53
1 parent a1b4718
commit ee2fe53
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 0 deletions.
diff --git a/html/editing/dnd/drop/events-contenteditable-manual.tentative.html b/html/editing/dnd/drop/events-contenteditable-manual.tentative.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for contenteditable</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+[data-placeholder]:empty::before { content: attr(data-placeholder); }
+</style>
+<body data-expected-events="
+  b:drop:,
+  a:beforeinput:deleteByDrag,
+  a:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<div><input id=a data-select="0,7" value="Drag me"></div>
+<div contenteditable=true id=b data-placeholder="...to here"></div>
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/events-contenteditable-same-element-manual.tentative.html b/html/editing/dnd/drop/events-contenteditable-same-element-manual.tentative.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for contenteditable (same element)</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body data-expected-events="
+  b:drop:,
+  b:beforeinput:deleteByDrag,
+  b:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<div contenteditable=true id=b data-select="0,7">Drag me ...to here:</div>
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/events-input-manual.tentative.html b/html/editing/dnd/drop/events-input-manual.tentative.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for &lt;input></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body data-expected-events="
+  b:drop:,
+  a:beforeinput:deleteByDrag,
+  a:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<div><input id=a data-select="0,7" value="Drag me"></div>
+<div><input id=b placeholder="...to here"></div>
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/events-input-same-element-manual.tentative.html b/html/editing/dnd/drop/events-input-same-element-manual.tentative.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for &lt;input> (same element)</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body data-expected-events="
+  b:drop:,
+  b:beforeinput:deleteByDrag,
+  b:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<input id=b data-select="0,7" value="Drag me ...to here:">
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/events-textarea-manual.tentative.html b/html/editing/dnd/drop/events-textarea-manual.tentative.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for &lt;textarea></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body data-expected-events="
+  b:drop:,
+  a:beforeinput:deleteByDrag,
+  a:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<div><input id=a data-select="0,7" value="Drag me"></div>
+<div><textarea id=b placeholder="...to here"></textarea></div>
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/events-textarea-same-element-manual.tentative.html b/html/editing/dnd/drop/events-textarea-same-element-manual.tentative.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Selection drag and drop: events for &lt;textarea> (same element)</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body data-expected-events="
+  b:drop:,
+  b:beforeinput:deleteByDrag,
+  b:input:deleteByDrag,
+  b:beforeinput:insertFromDrop,
+  b:textInput:,
+  b:input:insertFromDrop">
+<textarea id=b data-select="0,7">Drag me ...to here:</textarea>
+<script src="/uievents/textInput/support/common.js"></script>
+<script src="support/events.js"></script>
diff --git a/html/editing/dnd/drop/support/events.js b/html/editing/dnd/drop/support/events.js
@@ -0,0 +1,31 @@
+setup({ explicit_timeout: true, single_test: true });
+function rAF() {
+  return new Promise(resolve => {
+    requestAnimationFrame(resolve);
+  });
+}
+const a = document.getElementById('a');
+const b = document.getElementById('b');
+const actualEvents = [];
+const expectedEvents = document.body.dataset.expectedEvents.replace(/\s+/g, '').split(',');
+const eventTypes = new Set(expectedEvents.map(s => s.split(':')[1]));
+for (const eventType of eventTypes) {
+  if (a) {
+    a.addEventListener(eventType, e => {
+      actualEvents.push(`a:${e.type}:${e.inputType || ''}`);
+    });
+  }
+  b.addEventListener(eventType, async (e) => {
+    actualEvents.push(`b:${e.type}:${e.inputType || ''}`);
+    if (e.type === "input") {
+      await rAF();
+      await rAF();
+      assert_array_equals(actualEvents, expectedEvents);
+      done();
+    }
+  });
+}
+const dragMeElement = document.querySelector('[data-select]');
+const [selectionStart, selectionEnd] = dragMeElement.dataset.select.split(',').map(s => parseInt(s, 10));
+setSelection(dragMeElement, selectionStart, selectionEnd);
+dragMeElement.focus();