input-events/input-events-get-target-ranges-forwarddelete.tentative.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <meta name="timeout" content="long">
 <title>InputEvent.getTargetRanges() at Delete (forward 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>
 <script src="/resources/testdriver-actions.js"></script>
 <div contenteditable></div>
 <script>
 const kDeleteKey =  "\uE017";
 const kArrowRight = "\uE014";
 const kShift =      "\uE008";
 const kMeta =       "\uE03d";
 const kControl =    "\uE009";
 const kAlt =        "\uE00A";

 const kImgSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVR42mNgaGD4D8YwBgAw9AX9Y9zBwwAAAABJRU5ErkJggg==";

 let selection = getSelection();
 let editor = document.querySelector("div[contenteditable]");
 let beforeinput = [];
 let input = [];
 editor.addEventListener("beforeinput", (e) => {
   // NOTE: Blink makes `getTargetRanges()` return empty range after propagation,
   //       but this test wants to check the result during propagation.
   //       Therefore, we need to cache the result, but will assert if
   //       `getTargetRanges()` returns different ranges after checking the
   //       cached ranges.
   e.cachedRanges = e.getTargetRanges();
   beforeinput.push(e);
 });
 editor.addEventListener("input", (e) => {
   e.cachedRanges = e.getTargetRanges();
   input.push(e);
 });

 function reset() {
   editor.focus();
   beforeinput = [];
   input = [];
 }

 function getRangeDescription(range) {
   function getNodeDescription(node) {
     if (!node) {
       return "null";
     }
     switch (node.nodeType) {
       case Node.TEXT_NODE:
       case Node.COMMENT_NODE:
       case Node.CDATA_SECTION_NODE:
         return `${node.nodeName} "${node.data}"`;
       case Node.ELEMENT_NODE:
         return `<${node.nodeName.toLowerCase()}>`;
       default:
         return `${node.nodeName}`;
     }
   }
   if (range === null) {
     return "null";
   }
   if (range === undefined) {
     return "undefined";
   }
   return range.startContainer == range.endContainer && range.startOffset == range.endOffset
       ? `(${getNodeDescription(range.startContainer)}, ${range.startOffset})`
       : `(${getNodeDescription(range.startContainer)}, ${range.startOffset}) - (${getNodeDescription(range.endContainer)}, ${range.endOffset})`;
 }

 function getArrayOfRangesDescription(arrayOfRanges) {
   if (arrayOfRanges === null) {
     return "null";
   }
   if (arrayOfRanges === undefined) {
     return "undefined";
   }
   if (!Array.isArray(arrayOfRanges)) {
     return "Unknown Object";
   }
   if (arrayOfRanges.length === 0) {
     return "[]";
   }
   let result = "[";
   for (let range of arrayOfRanges) {
     result += `{${getRangeDescription(range)}},`;
   }
   result += "]";
   return result;
 }

 function sendDeleteKey(modifier) {
   if (!modifier) {
     return new test_driver.Actions()
         .keyDown(kDeleteKey)
         .keyUp(kDeleteKey)
         .send();
   }
   return new test_driver.Actions()
       .keyDown(modifier)
       .keyDown(kDeleteKey)
       .keyUp(kDeleteKey)
       .keyUp(modifier)
       .send();
 }

 function sendArrowRightKey() {
   return new test_driver.Actions()
       .keyDown(kArrowRight)
       .keyUp(kArrowRight)
       .send();
 }

 function checkGetTargetRangesKeepReturningSameValue(event) {
   // https://github.com/w3c/input-events/issues/114
   assert_equals(getArrayOfRangesDescription(event.getTargetRanges()),
       getArrayOfRangesDescription(event.cachedRanges),
       `${event.type}.getTargetRanges() should keep returning the same array of ranges even after its propagation finished`);
 }

 function checkGetTargetRangesOfBeforeinputOnDeleteSomething(expectedRange) {
   assert_equals(beforeinput.length, 1,
       "One beforeinput event should be fired if the key operation deletes something");
   assert_true(Array.isArray(beforeinput[0].cachedRanges),
       "beforeinput[0].getTargetRanges() should return an array of StaticRange instances during propagation");
   // Before checking the length of array of ranges, we should check the first
   // range first because the first range data is more important than whether
   // there are additional unexpected ranges.
   if (beforeinput[0].cachedRanges.length > 0) {
     assert_equals(
         getRangeDescription(beforeinput[0].cachedRanges[0]),
         getRangeDescription(expectedRange),
         `beforeinput.getTargetRanges() should return expected range (inputType is "${beforeinput[0].inputType}")`);
     assert_equals(beforeinput[0].cachedRanges.length, 1,
         "beforeinput.getTargetRanges() should return one range within an array");
   }
   assert_equals(beforeinput[0].cachedRanges.length, 1,
       "One range should be returned from getTargetRanges() when the key operation deletes something");
   checkGetTargetRangesKeepReturningSameValue(beforeinput[0]);
 }

 function checkGetTargetRangesOfInputOnDeleteSomething() {
   assert_equals(input.length, 1,
       "One input event should be fired if the key operation deletes something");
   // https://github.com/w3c/input-events/issues/113
   assert_true(Array.isArray(input[0].cachedRanges),
       "input[0].getTargetRanges() should return an array of StaticRange instances during propagation");
   assert_equals(input[0].cachedRanges.length, 0,
       "input[0].getTargetRanges() should return empty array during propagation");
   checkGetTargetRangesKeepReturningSameValue(input[0]);
 }

 function checkGetTargetRangesOfInputOnDoNothing() {
   assert_equals(input.length, 0,
       "input event shouldn't be fired when the key operation does not cause modifying the DOM tree");
 }

 function checkBeforeinputAndInputEventsOnNOOP() {
   assert_equals(beforeinput.length, 0,
       "beforeinput event shouldn't be fired when the key operation does not cause modifying the DOM tree");
   assert_equals(input.length, 0,
       "input event shouldn't be fired when the key operation does not cause modifying the DOM tree");
 }

 // Simply deletes the next ASCII character of caret position.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc</p>";
   selection.collapse(editor.firstChild.firstChild, 2);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>ab</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild.firstChild,
     startOffset: 2,
     endContainer: editor.firstChild.firstChild,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>ab[]c</p>"');

 // Simply deletes the next ASCII character of caret position.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc</p>";
   selection.collapse(editor.firstChild.firstChild, 1);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>ac</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild.firstChild,
     startOffset: 1,
     endContainer: editor.firstChild.firstChild,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>a[]bc</p>"');

 // Simply deletes the next ASCII character of caret position.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc</p>";
   selection.collapse(editor.firstChild.firstChild, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>bc</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild.firstChild,
     startOffset: 0,
     endContainer: editor.firstChild.firstChild,
     endOffset: 1,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>[]abc</p>"');

 // Should delete the `<span>` element because it becomes empty.
 // However, we need discussion whether the `<span>` element should be
 // contained by a range of `getTargetRanges()`.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>a<span>b</span>c</p>";
   let a = editor.querySelector("span").previousSibling;
   selection.collapse(a, 1);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>ac</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: a,
     startOffset: 1,
     endContainer: editor.firstChild,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>a[]<span>b</span>c</p>"');

 // Should delete the `<span>` element because it becomes empty.
 // However, we need discussion whether the `<span>` element should be
 // contained by a range of `getTargetRanges()`.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>a<span>b</span>c</p>";
   let b = editor.querySelector("span").firstChild;
   selection.collapse(b, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>ac</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild,
     startOffset: 1,
     endContainer: editor.firstChild,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>a<span>[]b</span>c</p>"');

 // Invisible trailing white-space may be deleted when the last visible
 // character is deleted.  If it's deleted, it should be contained by
 // the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc </p>";
   selection.collapse(editor.firstChild.firstChild, 2);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p>ab</p>", "<p>ab </p>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild.firstChild,
     startOffset: 2,
     endContainer: editor.firstChild.firstChild,
     endOffset: editor.firstChild.firstChild.data.length == 2 ? 4 : 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>ab[]c </p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc</p><p>def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]</p><p>def</p>"');

 // Invisible trailing white-spaces in current block and invisible leading
 // white-spaces in the following block should be deleted for avoiding they
 // becoming visible when the blocks are joined.  Perhaps, they should be
 // contained by the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><p>   def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]   </p><p>   def</p>"');

 // Invisible trailing white-spaces in current block and invisible leading
 // white-spaces in the following block should be deleted for avoiding they
 // becoming visible when the blocks are joined.  Perhaps, they should be
 // contained by the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><p>   def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 4);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc []  </p><p>   def</p>"');

 // Invisible trailing white-spaces in current block and invisible leading
 // white-spaces in the following block should be deleted for avoiding they
 // becoming visible when the blocks are joined.  Perhaps, they should be
 // contained by the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><p>   def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 5);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc  [] </p><p>   def</p>"');

 // Invisible trailing white-spaces in current block and invisible leading
 // white-spaces in the following block should be deleted for avoiding they
 // becoming visible when the blocks are joined.  Perhaps, they should be
 // contained by the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><p>   def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 6);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc   []</p><p>   def</p>"');

 // Invisible trailing white-spaces in current block and invisible leading
 // white-spaces in the following block should be deleted for avoiding they
 // becoming visible when the blocks are joined.  Perhaps, they should be
 // contained by the range of `getTargetRanges()`, but needs discussion.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><p>   def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.setBaseAndExtent(abc, 6, def, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc   [</p><p>]   def</p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc</p><p><b>def</b></p>";
   let abc = editor.querySelector("p").firstChild;
   let def = editor.querySelector("b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc<b>def</b></p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]</p><p><b>def</b></p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><b>abc</b></p><p><b>def</b></p>";
   let abc = editor.querySelector("p > b").firstChild;
   let def = editor.querySelector("P + p > b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p><b>abc</b><b>def</b></p>",
                                      "<p><b>abcdef</b></p>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p><b>abc[]</b></p><p><b>def</b></p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><i>abc</i></p><p><b>def</b></p>";
   let abc = editor.querySelector("i").firstChild;
   let def = editor.querySelector("b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p><i>abc</i><b>def</b></p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p><i>abc[]</i></p><p><b>def</b></p>"');

 // Invisible leading white-spaces in the following block should be deleted
 // for avoiding they becoming visible when the blocks are joined, but
 // preformatted trailing white-spaces in the first block shouldn't be
 // deleted.  Perhaps, the invisible white-spaces should be contained by
 // the range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<pre>abc   </pre><p>   def</p>";
   let pre = editor.firstChild;
   let abc = pre.firstChild;
   let p = pre.nextSibling;
   let def = p.firstChild;
   selection.collapse(abc, 6);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<pre>abc   def</pre>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 6,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<pre>abc   []</pre><p>   def</p>"');

 // Invisible leading/trailing white-spaces in the following block should be
 // deleted for avoiding they becoming visible when the blocks are joined, but
 // preformatted trailing white-spaces in the first block shouldn't be
 // deleted.  Perhaps, the invisible leading white-spaces should be contained
 // by the range of `getTargetRanges()`, but needs discussion.
 // And also not sure whether the trailing white-spaces should be contained
 // by additional range of `getTargetRanges()` or not because of the
 // implementation cost and runtime cost.  Needs discuss.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<pre>abc   </pre><p>   def</p>";
   let pre = editor.firstChild;
   let abc = pre.firstChild;
   let p = pre.nextSibling;
   let def = p.firstChild;
   selection.collapse(abc, 6);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<pre>abc   def</pre>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 6,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<pre>abc   []</pre><p>   def   </p>"');

 // Invisible trailing white-spaces in the first block should be deleted
 // when the block is joined with the preformatted following block, but
 // the leading white-spaces in the preformatted block shouldn't be
 // removed.  So, in this case, the invisible trailing white-spaces should
 // be in the range of `getTargetRanges()`, but not so for the preformatted
 // visible leading white-spaces.  But needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc   </p><pre>   def</pre>";
   let p = editor.firstChild;
   let abc = p.firstChild;
   let pre = p.nextSibling;
   let def = pre.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p>abc &nbsp; def</p>",
                                      "<p>abc&nbsp;&nbsp; def</p>",
                                      "<p>abc&nbsp; &nbsp;def</p>",
                                      "<p>abc &nbsp;&nbsp;def</p>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]   </p><pre>   def</pre>"');

 // Deleting from before invisible trailing `<br>` element of a block
 // should delete the `<br>` element and join the blocks.  Therefore,
 // the target range should contain the `<br>` element and block boundaries.
 // But maybe needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc<br></p><p>def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<br></p><p>def</p>"');

 // Deleting from last empty line in the first block should delete the
 // invisible `<br>` element for the last empty line and join the blocks.
 // In this case, the invisible `<br>` element should be contained in the
 // range of `getTargetRanges()`, but needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc<br><br></p><p>def</p>";
   let p1 = editor.firstChild;
   let abc = p1.firstChild;
   let p2 = p1.nextSibling;
   let def = p2.firstChild;
   selection.collapse(p1, 2);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc<br>def</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 2,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc<br>{}<br></p><p>def</p>"');

 // Deleting visible `<br>` element should be contained by a range of
 // `getTargetRanges()`.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc<br>def</p>";
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<br>def</p>"');

 // Deleting visible `<br>` element following white-space should not include
 // the preceding white-space in the range.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc <br>def</p>";
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 4);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc def</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc []<br>def</p>"');

 // Deleting visible `<br>` element followed by white-space should include
 // the following white-space in the range because it shouldn't become
 // visible and should be deleted for avoiding it.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc<br> def</p>";
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   let def = editor.querySelector("br").nextSibling;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: def,
     endOffset: 1,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<br> def</p>"');

 // Deleting visible `<br>` element should be contained by a range of
 // `getTargetRanges()`.  However, when only the `<br>` element is selected,
 // the range shouldn't start from nor end by surrounding text nodes?
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>abc<br>def</p>";
   selection.setBaseAndExtent(editor.firstChild, 1, editor.firstChild, 2);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: editor.firstChild,
     startOffset: 1,
     endContainer: editor.firstChild,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc{<br>}def</p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = `<p>abc<img src="${kImgSrc}">def</p>`;
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abcdef</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<img>def</p>"');

 // White-spaces around `<img>` element are visible so that they shouldn't
 // be included into the target ranges.
 promise_test(async () => {
   reset();
   editor.innerHTML = `<p>abc <img src="${kImgSrc}">def</p>`;
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 4);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc def</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc []<img>def</p>"');

 // White-spaces around `<img>` element are visible so that they shouldn't
 // be included into the target ranges.
 promise_test(async () => {
   reset();
   editor.innerHTML = `<p>abc<img src="${kImgSrc}"> def</p>`;
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc def</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<img> def</p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = `<p>abc<img src="${kImgSrc}"><img src="${kImgSrc}">def</p>`;
   let p = editor.querySelector("p");
   let abc = p.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, `<p>abc<img src="${kImgSrc}">def</p>`);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 1,
     endContainer: p,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc[]<img><img>def</p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = `<p>abc<img src="${kImgSrc}"><img src="${kImgSrc}">def</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p, 2);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, `<p>abc<img src="${kImgSrc}">def</p>`);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p,
     startOffset: 2,
     endContainer: p,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>abc<img>{}<img>def</p>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = `<div>abc<hr>def</div>`;
   let div = editor.querySelector("div");
   let abc = div.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: div,
     startOffset: 1,
     endContainer: div,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<hr>def</div>"');

 // White-spaces around block element are invisible white-spaces so that
 // they should be included into the target ranges to avoid they become
 // visible.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = `<div>abc <hr>def</div>`;
   let div = editor.querySelector("div");
   let abc = div.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: div,
     startOffset: 1,
     endContainer: div,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[] <hr>def</div>"');

 // White-spaces around block element are invisible white-spaces so that
 // they should be included into the target ranges to avoid they become
 // visible.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = `<div>abc<hr> def</div>`;
   let div = editor.querySelector("div");
   let abc = div.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: div,
     startOffset: 1,
     endContainer: div,
     endOffset: 2,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<hr> def</div>"');

 // Invisible `<br>` element immediately before `<hr>` element should be
 // delete once, and both of them should be included in the target range.
 promise_test(async () => {
   reset();
   editor.innerHTML = `<div>abc<br><hr>def</div>`;
   let div = editor.querySelector("div");
   let abc = div.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: div,
     startOffset: 1,
     endContainer: div,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<br><hr>def</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<p>def<br>ghi</p></div>";
   let p = editor.querySelector("p");
   let def = p.firstChild;
   let abc = editor.firstChild.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<div>abcdef<p>ghi</p></div>",
                                      "<div>abcdef<br><p>ghi</p></div>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc<p>[]def<br>ghi</p></div>"');

 // Joining parent block and child block should remove invisible preceding
 // white-spaces of the child block and invisible leading white-spaces in
 // the child block, and they should be contained in a range of
 // `getTargetRanges()`, but maybe needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc   <p>   def<br>ghi</p></div>";
   let p = editor.querySelector("p");
   let def = p.firstChild;
   let abc = editor.firstChild.firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef<p>ghi</p></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]   <p>   def<br>ghi</p></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<p><b>def</b></p></div>";
   let abc = editor.querySelector("div").firstChild;
   let def = editor.querySelector("b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abc<b>def</b></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<p><b>def</b></p></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><b>abc</b><p><b>def</b></p></div>";
   let abc = editor.querySelector("b").firstChild;
   let def = editor.querySelector("p > b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<div><b>abc</b><b>def</b></div>",
                                      "<div><b>abcdef</b></div>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><b>abc[]</b><p><b>def</b></p></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><i>abc</i><p><b>def</b></p></div>";
   let abc = editor.querySelector("i").firstChild;
   let def = editor.querySelector("b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div><i>abc</i><b>def</b></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><i>abc[]</i><p><b>def</b></p></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><p>abc</p>def</div>";
   let abc = editor.querySelector("p").firstChild;
   let def = editor.querySelector("p").nextSibling;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div><p>abcdef</p></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><p>abc[]</p>def</div>"');

 // Joining child block and parent block should remove invisible trailing
 // white-spaces of the child block and invisible following white-spaces
 // in the parent block, and they should be contained by a range of
 // `getTargetRanges()`, but maybe needs discussion.
 // https://github.com/w3c/input-events/issues/112
 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><p>abc   </p>   def</div>";
   let abc = editor.querySelector("p").firstChild;
   let def = editor.querySelector("p").nextSibling;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div><p>abcdef</p></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 3,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><p>abc[]   </p>   def</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><p><b>abc</b></p>def</div>";
   let abc = editor.querySelector("b").firstChild;
   let def = editor.querySelector("p").nextSibling;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div><p><b>abc</b>def</p></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><p><b>abc[]</b></p>def</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><p><b>abc</b></p><b>def</b></div>";
   let abc = editor.querySelector("b").firstChild;
   let def = editor.querySelector("div > b").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<div><p><b>abc</b><b>def</b></p></div>",
                                      "<div><p><b>abcdef</b></p></div>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><p><b>abc[]</b></p><b>def</b></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div><p><b>abc</b></p><i>def</i></div>";
   let abc = editor.querySelector("b").firstChild;
   let def = editor.querySelector("i").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div><p><b>abc</b><i>def</i></p></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div><p><b>abc[]</b></p><i>def</i></div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<ul><li>def</li></ul>ghi</div>";
   let abc = editor.querySelector("div").firstChild;
   let def = editor.querySelector("li").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdefghi</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<ul><li>def</li></ul>ghi</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<ul><li>def</li></ul>ghi</div>";
   let def = editor.querySelector("li").firstChild;
   let ghi = editor.querySelector("ul").nextSibling;
   selection.collapse(def, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abc<ul><li>defghi</li></ul></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: def,
     startOffset: 3,
     endContainer: ghi,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc<ul><li>def[]</li></ul>ghi</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<ul><li>def</li><li>ghi</li></ul>jkl</div>";
   let abc = editor.querySelector("div").firstChild;
   let def = editor.querySelector("li").firstChild;
   selection.collapse(abc, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abcdef<ul><li>ghi</li></ul>jkl</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: abc,
     startOffset: 3,
     endContainer: def,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc[]<ul><li>def</li><li>ghi</li></ul>jkl</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<ul><li>def</li><li>ghi</li></ul>jkl</div>";
   let def = editor.querySelector("li").firstChild;
   let ghi = editor.querySelector("li + li").firstChild;
   selection.collapse(def, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abc<ul><li>defghi</li></ul>jkl</div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: def,
     startOffset: 3,
     endContainer: ghi,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc<ul><li>def[]</li><li>ghi</li></ul>jkl</div>"');

 promise_test(async () => {
   reset();
   editor.innerHTML = "<div>abc<ul><li>def</li><li>ghi</li></ul>jkl</div>";
   let ghi = editor.querySelector("li + li").firstChild;
   let jkl = editor.querySelector("ul").nextSibling;
   selection.collapse(ghi, 3);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<div>abc<ul><li>def</li><li>ghijkl</li></ul></div>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: ghi,
     startOffset: 3,
     endContainer: jkl,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<div>abc<ul><li>def</li><li>ghi[]</li></ul>jkl</div>"');

 // Delete in empty paragraph should remove the empty paragraph.  In this
 // case, it should be treated as joining with the previous paragraph.
 // The target range should include the invisible <br> element in the empty
 // paragraph.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><br></p><p>abc</p>";
   let p1 = editor.querySelector("p");
   let p2 = p1.nextSibling;
   let abc = p2.firstChild;
   selection.collapse(p1, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 0,
     endContainer: abc,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>{}<br></p><p>abc</p>');

 // Delete ignore the empty span and the other things must be same as the
 // previous test.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><span></span><br></p><p>abc</p>";
   let p1 = editor.querySelector("p");
   let span = p1.firstChild;
   let p2 = p1.nextSibling;
   let abc = p2.firstChild;
   selection.collapse(span, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p>abc</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 0,
     endContainer: abc,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p><span>{}</span><br></p><p>abc</p>');

 // If invisible white-spaces are removed with same action as above tests,
 // the range should be included in the target ranges.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><br></p><p>  abc</p>";
   let p1 = editor.querySelector("p");
   let p2 = p1.nextSibling;
   let abc = p2.firstChild;
   selection.collapse(p1, 0);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p>  abc</p>",
                                      "<p>abc</p>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 0,
     endContainer: abc,
     endOffset: 5 - abc.length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>{}<br></p><p>  abc</p>');

 // If the next block begins with non-editable content, target range
 // should be at the non-editable content node.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><br></p><p><span contenteditable=\"false\">abc</span>def</p>";
   let p1 = editor.querySelector("p");
   let p2 = p1.nextSibling;
   let span = editor.querySelector("span");
   selection.collapse(p1, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<p><span contenteditable=\"false\">abc</span>def</p>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 0,
     endContainer: p2,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>{}<br></p><p><span contenteditable="false">abc</span>def</p>"');

 // If next non-editable paragraph is deleted, target range should end
 // with start of the text node in the last paragraph.  Otherwise, ends at
 // the non-editable paragraph.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><br></p><p contenteditable=\"false\">abc</p><p>def</p>";
   let p1 = editor.querySelector("p");
   let p2 = p1.nextSibling;
   let p3 = p2.nextSibling;
   let def = p3.firstChild;
   selection.collapse(p3, 0);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p>def</p>",
                                      "<p contenteditable=\"false\">abc</p><p>def</p>"]);
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p1,
     startOffset: 0,
     endContainer: p2.isConnected ? editor : p3,
     endOffset: p2.isConnected ? 1 : 0,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Delete at "<p>{}<br></p><p contenteditable=\"false\">abc</p><p>def</p>"');

 // If just removes the paragraph, target range should end at the table element.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p><br></p><table><tr><td>cell</td></tr></table>";
   let cell = editor.querySelector("td");
   let p = editor.querySelector("p");
   selection.collapse(p, 0);
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<table><tbody><tr><td>cell</td></tr></tbody></table>",
                                      "<p><br></p><table><tbody><tr><td>cell</td></tr></tbody></table>"]);
   if (p.isConnected) {
     checkGetTargetRangesOfBeforeinputOnDeleteSomething({
       startContainer: p,
       startOffset: 0,
       endContainer: p,
       endOffset: 0,
     });
     checkGetTargetRangesOfInputOnDoNothing();
   } else {
     checkGetTargetRangesOfBeforeinputOnDeleteSomething({
       startContainer: p,
       startOffset: 0,
       endContainer: editor,
       endOffset: 1,
     });
     checkGetTargetRangesOfInputOnDeleteSomething();
   }
 }, 'Delete at "<p>{}<br></p><table><tr><td>cell</td></tr></table>"');

 // If table cell won't be joined, target range should be collapsed in the
 // cell.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<table><tr><td><br></td><td>cell2</td></tr></table>";
   let cell1 = editor.querySelector("td");
   let cell2 = cell1.nextSibling;
   selection.collapse(cell1, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<table><tbody><tr><td><br></td><td>cell2</td></tr></tbody></table>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: cell1,
     startOffset: 0,
     endContainer: cell1,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDoNothing();
 }, 'Delete at "<table><tr><td>{}<br></td><td>cell2</td></tr></table>"');

 // If table caption won't be deleted, target range should be collapsed in the
 // caption element.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<table><caption><br></caption><tr><td>cell</td></tr></table>";
   let caption = editor.querySelector("caption");
   selection.collapse(caption, 0);
   await sendDeleteKey();
   assert_equals(editor.innerHTML, "<table><caption><br></caption><tbody><tr><td>cell</td></tr></tbody></table>");
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: caption,
     startOffset: 0,
     endContainer: caption,
     endOffset: 0,
   });
   checkGetTargetRangesOfInputOnDoNothing();
 }, 'Delete at "<table><caption>{}<br></caption><tr><td>cell</td></tr></table>"');

 // If caret is not adjacent of deleting character, browser may not delete the
 // character, but update the caret position for next deletion.
 promise_test(async () => {
   reset();
   editor.innerHTML = "<p>hello&#x5E9;&#x5DC;&#x5D5;&#x5DD;</p>";
   let text1 = editor.querySelector("p").firstChild;
   let text2 = text1.nextSibling;
   selection.collapse(text1, 4);
   await sendArrowRightKey();
   await sendDeleteKey();
   assert_in_array(editor.innerHTML, ["<p>hello\u05E9\u05DC\u05D5\u05DD</p>",
                                      "<p>hello\u05DC\u05D5\u05DD</p>",
                                      "<p>hello\u05E9\u05DC\u05D5</p>"]);
   if (editor.innerHTML === "<p>hello\u05E9\u05DC\u05D5\u05DD</p>") {
     checkGetTargetRangesOfBeforeinputOnDeleteSomething({
       startContainer: text2 ? text2 : text1,
       startOffset: text2 ? 0 : 5,
       endContainer: text2 ? text2 : text1,
       endOffset: text2 ? 0 : 5,
     });
     checkGetTargetRangesOfInputOnDoNothing();
   } else if (editor.innerHTML === "<p>hello\u05DC\u05D5\u05DD</p>") {
     checkGetTargetRangesOfBeforeinputOnDeleteSomething({
       startContainer: text2 ? text2: text1,
       startOffset: text2 ? 0 : 5,
       endContainer: text2 ? text2 : text1,
       endOffset: text2 ? 1 : 6,
     });
     checkGetTargetRangesOfInputOnDeleteSomething();
   } else {
     checkGetTargetRangesOfBeforeinputOnDeleteSomething({
       startContainer: text2 ? text2: text1,
       startOffset: text2 ? 3 : 8,
       endContainer: text2 ? text2 : text1,
       endOffset: text2 ? 4 : 9,
     });
     checkGetTargetRangesOfInputOnDeleteSomething();
   }
 }, 'Delete at "<p>hello[]&#x5E9;&#x5DC;&#x5D5;&#x5DD;</p>"');

 // The following tests check whether the range returned from
 // `beforeinput[0].getTargetRanges()` is modified or different range is
 // modified instead.  I.e., they don't test which type of deletion should
 // occur.  Therefore, their result depends on browser's key bindings,
 // system settings and running OS.

 function getFirstDifferentOffset(currentString, originalString) {
   for (let i = 0; i < currentString.length; i++) {
     if (currentString.charAt(i) !== originalString.charAt(i) &&
         (originalString.charAt(i) !== " " || !currentString.charAt("\u00A0"))) {
       return i;
     }
   }
   return currentString.length;
 }

 promise_test(async () => {
   reset();
   const kText = "abc def ghi";
   editor.innerHTML = `<p>${kText}</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kShift);
   let startOffset = getFirstDifferentOffset(p.firstChild.data, kText);
   let length = kText.length - p.firstChild.data.length;
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length)}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Shift + Delete at "<p>abc []def ghi</p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def ghi";
   editor.innerHTML = `<p>${kText}</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kControl);
   let startOffset = getFirstDifferentOffset(p.firstChild.data, kText);
   let length = kText.length - p.firstChild.data.length;
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length)}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Control + Delete at "<p>abc []def ghi</p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def ghi";
   editor.innerHTML = `<p>${kText}</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kAlt);
   let startOffset = getFirstDifferentOffset(p.firstChild.data, kText);
   let length = kText.length - p.firstChild.data.length;
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length)}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Alt + Delete at "<p>abc []def ghi</p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def ghi";
   editor.innerHTML = `<p>${kText}</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kMeta);
   let startOffset = getFirstDifferentOffset(p.firstChild.data, kText);
   let length = kText.length - p.firstChild.data.length;
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length)}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Meta + Delete at "<p>abc []def ghi</p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def";
   editor.innerHTML = `<p>${kText}   </p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kShift);
   let visibleText = p.firstChild.data.replace(/%s+$/, "");
   let invisibleWhiteSpaces = " ".repeat(p.firstChild.data.length - visibleText.length);
   let startOffset = invisibleWhiteSpaces.length + getFirstDifferentOffset(visibleText, kText);
   let length = kText.length + 3 - p.firstChild.data.length;
   // If invisible white-spaces are deleted, they should be contained in the target range.
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length) + invisibleWhiteSpaces}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Shift + Delete at "<p>abc []def   </p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def";
   editor.innerHTML = `<p>${kText}   </p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kControl);
   let visibleText = p.firstChild.data.replace(/%s+$/, "");
   let invisibleWhiteSpaces = " ".repeat(p.firstChild.data.length - visibleText.length);
   let startOffset = invisibleWhiteSpaces.length + getFirstDifferentOffset(visibleText, kText);
   let length = kText.length + 3 - p.firstChild.data.length;
   // If invisible white-spaces are deleted, they should be contained in the target range.
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length) + invisibleWhiteSpaces}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Control + Delete at "<p>abc []def   </p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def";
   editor.innerHTML = `<p>${kText}   </p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kAlt);
   let visibleText = p.firstChild.data.replace(/%s+$/, "");
   let invisibleWhiteSpaces = " ".repeat(p.firstChild.data.length - visibleText.length);
   let startOffset = invisibleWhiteSpaces.length + getFirstDifferentOffset(visibleText, kText);
   let length = kText.length + 3 - p.firstChild.data.length;
   // If invisible white-spaces are deleted, they should be contained in the target range.
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length) + invisibleWhiteSpaces}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Alt + Delete at "<p>abc []def   </p>"');

 promise_test(async () => {
   reset();
   const kText = "abc def";
   editor.innerHTML = `<p>${kText}   s</p>`;
   let p = editor.querySelector("p");
   selection.collapse(p.firstChild, "abc ".length);
   await sendDeleteKey(kMeta);
   let visibleText = p.firstChild.data.replace(/%s+$/, "");
   let invisibleWhiteSpaces = " ".repeat(p.firstChild.data.length - visibleText.length);
   let startOffset = invisibleWhiteSpaces.length + getFirstDifferentOffset(visibleText, kText);
   let length = kText.length + 3 - p.firstChild.data.length;
   // If invisible white-spaces are deleted, they should be contained in the target range.
   assert_equals(editor.innerHTML.replace(/&nbsp;/g, " "),
       `<p>${kText.substr(0, startOffset) + kText.substr(startOffset + length) + invisibleWhiteSpaces}</p>`);
   if (startOffset === kText.length) {
     checkBeforeinputAndInputEventsOnNOOP();
     return;
   }
   checkGetTargetRangesOfBeforeinputOnDeleteSomething({
     startContainer: p.firstChild,
     startOffset: startOffset,
     endContainer: p.firstChild,
     endOffset: startOffset + length,
   });
   checkGetTargetRangesOfInputOnDeleteSomething();
 }, 'Meta + Delete at "<p>abc []def</p>"');

 </script>