fire-selectionchange-event-on-pressing-backspace.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /selection/fire-selectionchange-event-on-pressing-backspace.html - WPT Dashboard Interop Dashboard

<!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>

<script src="/resources/testdriver-actions.js"></script>

<body>

  <div contenteditable="true" id="target"></div>

  <script>

    promise_test(async () => {

      let selectionChangeCount = 0;

      const target = document.getElementById("target");

      target.innerHTML = '<p>wor<i id="caret">l</i>d</p>';

      document.addEventListener("selectionchange", () => {

        ++selectionChangeCount;

});

      await new test_driver.click(document.querySelector('#caret')); // wor|ld

      await new Promise(resolve => step_timeout(resolve, 500));

      assert_equals(selectionChangeCount, 1, "Selection change count should match");

      // Simulate the backspace key press to remove 'r'

      await new 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 = '<p>wo<i id="caret">l</i>d</p>';

      assert_equals(target.innerHTML, expectedHTML, "target.innerHTML should match");

      assert_equals(selectionChangeCount, 2, "Selection change count should match");

    }, "Selectionchange event is fired after removing the character");

    promise_test(async () => {

      let selectionChangeCount = 0;

      const target = document.getElementById("target");

      target.innerHTML = '<p>wor<i id="caret">l</i>d</p>';

      await new test_driver.click(document.querySelector('#caret')); //wor|ld

      await new test_driver.Actions()

        .keyDown('\uE008') // Shift

        .keyDown('\uE012') // Arrow Left

        .keyUp('\uE012')

        .keyDown('\uE012') // Arrow Left

        .keyUp('\uE012')

        .keyUp('\uE008')

        .send();

      await new Promise(resolve => step_timeout(resolve, 500));

      document.addEventListener("selectionchange", () => {

        ++selectionChangeCount;

});

      // Simulate the backspace key press to remove 'or'

      await new 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 = '<p>w<i id="caret">l</i>d</p>';

      assert_equals(target.innerHTML, expectedHTML, "target.innerHTML should match");

      assert_equals(selectionChangeCount, 1, "Selection change count should match");

    }, "Selectionchange event is fired after removing the range");

  </script>

</body>