From 6f491c45bc5182275419be89a0820c2deaddc6b0 Mon Sep 17 00:00:00 2001
From: Utkarsh Pathak <utpathak@microsoft.com>
Date: Fri, 31 May 2024 02:42:05 -0700
Subject: [PATCH] Dispatch BeforeInput Event for number input spin button and
 Arrow key

https://w3c.github.io/uievents/#event-type-beforeinput
A user agent MUST dispatch beforeinput event when the DOM is about to be updated.

Bug: 40948436
Change-Id: Idc894f4e7427a81e684b37cc10749b4386e5aa7d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5443103
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Utkarsh Pathak <utpathak@microsoft.com>
Reviewed-by: Sanket Joshi <sajos@microsoft.com>
Reviewed-by: Anupam Snigdha <snianu@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1308524}
---
 ...w-key-on-number-input-delete-document.html | 37 +++++++++++++++++
 ...w-key-on-number-input-prevent-default.html | 33 +++++++++++++++
 ...nput-events-arrow-key-on-number-input.html | 32 +++++++++++++++
 ...click-on-number-input-delete-document.html | 40 +++++++++++++++++++
 ...click-on-number-input-prevent-default.html | 35 ++++++++++++++++
 ...nts-spin-button-click-on-number-input.html | 34 ++++++++++++++++
 6 files changed, 211 insertions(+)
 create mode 100644 input-events/input-events-arrow-key-on-number-input-delete-document.html
 create mode 100644 input-events/input-events-arrow-key-on-number-input-prevent-default.html
 create mode 100644 input-events/input-events-arrow-key-on-number-input.html
 create mode 100644 input-events/input-events-spin-button-click-on-number-input-delete-document.html
 create mode 100644 input-events/input-events-spin-button-click-on-number-input-prevent-default.html
 create mode 100644 input-events/input-events-spin-button-click-on-number-input.html
diff --git a/input-events/input-events-arrow-key-on-number-input-delete-document.html b/input-events/input-events-arrow-key-on-number-input-delete-document.html
new file mode 100644
index 00000000000000..20dad0da40a1cb
--- /dev/null
+++ b/input-events/input-events-arrow-key-on-number-input-delete-document.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<iframe id="iframe"></iframe>
+<script>
+promise_test(async function() {
+  const child = document.getElementById("iframe");
+  const childDocument = child.contentDocument;
+  const inputElement = childDocument.createElement('input');
+  inputElement.type = "number";
+  childDocument.body.appendChild(inputElement);
+  let events = [];
+  inputElement.addEventListener("beforeinput", () => {
+    child.remove();
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    evenst.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+
+  await new test_driver.send_keys(inputElement, "\uE013");
+  assert_array_equals(events, ['beforeinput']);
+}, "Number input should not crash and not fire subsequent events when event handler removes document");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/input-events/input-events-arrow-key-on-number-input-prevent-default.html b/input-events/input-events-arrow-key-on-number-input-prevent-default.html
new file mode 100644
index 00000000000000..cc3984fe64dcbc
--- /dev/null
+++ b/input-events/input-events-arrow-key-on-number-input-prevent-default.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<input type="number" id="number_input">
+<script>
+promise_test(async function() {
+  const inputElement = document.getElementById("number_input");
+  let events = [];
+  inputElement.addEventListener("beforeinput", (e) => {
+    e.preventDefault();
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    events.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+
+  await new test_driver.send_keys(inputElement, "\uE013");
+  assert_array_equals(events, ['beforeinput']);
+}, "Number input should not fire input and change event if the beforeinput event is default prevented");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/input-events/input-events-arrow-key-on-number-input.html b/input-events/input-events-arrow-key-on-number-input.html
new file mode 100644
index 00000000000000..75c594c2cbe517
--- /dev/null
+++ b/input-events/input-events-arrow-key-on-number-input.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<input type="number" id="number_input">
+<script>
+promise_test(async function() {
+  const inputElement = document.getElementById("number_input");
+  let events = [];
+  inputElement.addEventListener("beforeinput", () => {
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    events.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+
+  await new test_driver.send_keys(inputElement, "\uE013");
+  assert_array_equals(events, ['beforeinput','input','change']);
+}, "Number input should fire beforeinput event before the input and change event");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/input-events/input-events-spin-button-click-on-number-input-delete-document.html b/input-events/input-events-spin-button-click-on-number-input-delete-document.html
new file mode 100644
index 00000000000000..1b179952ca446e
--- /dev/null
+++ b/input-events/input-events-spin-button-click-on-number-input-delete-document.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<iframe id="iframe"></iframe>
+<script>
+promise_test(async function() {
+  const child = document.getElementById("iframe");
+  const childDocument = child.contentDocument;
+  const inputElement = childDocument.createElement('input');
+  inputElement.type = "number";
+  childDocument.body.appendChild(inputElement);
+  let events = [];
+  inputElement.addEventListener("beforeinput", () => {
+    child.remove();
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    events.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+  // Get the spin button up arrow key location and adjust with iframe offset to get absolute position
+  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10) + child.offsetLeft;
+  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4) + child.offsetTop;
+  await test_driver_internal.click(inputElement,{x: x1, y: y1});
+  assert_array_equals(events, ['beforeinput']);
+  assert_false(document.body.contains(child));
+}, "Number input should not crash and not fire subsequent events when event handler removes document");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/input-events/input-events-spin-button-click-on-number-input-prevent-default.html b/input-events/input-events-spin-button-click-on-number-input-prevent-default.html
new file mode 100644
index 00000000000000..558000940c987e
--- /dev/null
+++ b/input-events/input-events-spin-button-click-on-number-input-prevent-default.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<input type="number" id="number_input">
+<script>
+promise_test(async function() {
+  const inputElement = document.getElementById("number_input");
+  let events = [];
+  inputElement.addEventListener("beforeinput", (e) => {
+    e.preventDefault();
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    events.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+  // Get the spin button up arrow key location
+  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10);
+  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4);
+  await test_driver_internal.click(inputElement,{x: x1, y: y1});
+  assert_array_equals(events, ['beforeinput']);
+}, "Number input should not fire input and change event if the beforeinput event is default prevented");
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/input-events/input-events-spin-button-click-on-number-input.html b/input-events/input-events-spin-button-click-on-number-input.html
new file mode 100644
index 00000000000000..e86be1798e475b
--- /dev/null
+++ b/input-events/input-events-spin-button-click-on-number-input.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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>
+</head>
+<body>
+<input type="number" id="number_input">
+<script>
+promise_test(async function() {
+  const inputElement = document.getElementById("number_input");
+  let events = [];
+  inputElement.addEventListener("beforeinput", () => {
+    events.push("beforeinput");
+  });
+  inputElement.addEventListener("input", () => {
+    events.push("input");
+  });
+  inputElement.addEventListener("change", () => {
+    events.push("change");
+  });
+
+  inputElement.focus();
+  // Get the spin button up arrow key location
+  const x1 = (inputElement.offsetLeft + inputElement.offsetWidth - 10);
+  const y1 = (inputElement.offsetTop + inputElement.offsetHeight / 4);
+  await test_driver_internal.click(inputElement,{x: x1, y: y1});
+  assert_array_equals(events, ['beforeinput','input','change']);
+}, "Number input should fire beforeinput event before the input and change event");
+</script>
+</body>
+</html>
\ No newline at end of file
