[Editing] Fire selectionchange event for backspace input

The selectionchange event does not get fired when the backspace key deletes text inside a text node. According to the specification, when the selection is associated or dissociated with its range, the user agent must schedule a selectionchange event on the document. This change ensures that the event will be scheduled as per the specification. https://w3c.github.io/selection-api/#selectionchange-event Bug: 41321247 Change-Id: I6c3067652a47b4c686c47f9b181261ec19888e78 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5948203 Reviewed-by: Siye Liu <siliu@microsoft.com> Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Tanu Jain <tanujain@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1378113}
web-platform-tests · Nov 5, 2024 · ec20a39 · ec20a39
1 parent bb5b9de
commit ec20a39
Showing 1 changed file with 65 additions and 0 deletions.
diff --git a/selection/fire-selectionchange-event-on-pressing-backspace.html b/selection/fire-selectionchange-event-on-pressing-backspace.html
@@ -0,0 +1,65 @@
+<!doctype HTML>
+<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>
+
+<body>
+  <div contenteditable="true" id="target">Hello</div>
+  <div contenteditable="true" id="target1">Hello world</div>
+  <script>
+    promise_test(async () => {
+      let selectionChangeCount = 0;
+      const selection = getSelection();
+      const range = document.createRange();
+      const target = document.getElementById("target");
+      const element = target.firstChild;
+
+      document.addEventListener("selectionchange", () => ++selectionChangeCount);
+      // Set the range to select the character 'H' in "hello"
+      range.setStart(element, 1);
+      range.setEnd(element, 1);
+      selection.removeAllRanges();
+      selection.addRange(range);
+
+      await new Promise(resolve => step_timeout(resolve, 500));
+      assert_equals(selectionChangeCount, 1, "Selection change count should be 1");
+
+      // Simulate the backspace key press to remove 'H'
+      test_driver.send_keys(target, "\uE003");
+      // Waits a short time to allow any events to be processed.
+      await new Promise(resolve => step_timeout(resolve, 500));
+
+      const expectedHTML = "ello";
+      assert_equals(target.innerHTML, expectedHTML, "target.innerHTML should be " + expectedHTML);
+      assert_equals(selectionChangeCount, 2, "Selection change count should be 2");
+    }, "Selectionchange event is fired after removing the character");
+
+    promise_test(async () => {
+      let selectionChangeCount = 0;
+      const selection = getSelection();
+      const range = document.createRange();
+      const target = document.getElementById("target1");
+      const element = target.firstChild;
+
+      document.addEventListener("selectionchange", () => ++selectionChangeCount);
+      // Set the range to select 'llo' in "Hello"
+      range.setStart(element, 2);
+      range.setEnd(element, 5);
+      selection.removeAllRanges();
+      selection.addRange(range);
+
+      await new Promise(resolve => step_timeout(resolve, 500));
+      assert_equals(selectionChangeCount, 1, "Selection change count should be 1");
+
+      // Simulate the backspace key press to remove 'llo'
+      test_driver.send_keys(target, "\uE003");
+      // Waits a short time to allow any events to be processed.
+      await new Promise(resolve => step_timeout(resolve, 500));
+
+      const expectedHTML = "He world";
+      assert_equals(target.innerHTML, expectedHTML, "target.innerHTML should be " + expectedHTML);
+      assert_equals(selectionChangeCount, 2, "Selection change count should be 2");
+    }, "Selectionchange event is fired after removing the range");
+  </script>
+</body>