| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="variant" content="?white-space=normal"> |
| <meta name="variant" content="?white-space=pre"> |
| <meta name="variant" content="?white-space=pre-wrap"> |
| <meta name="variant" content="?white-space=pre-line"> |
| <title>Delete per word should not change the deleting range whether the surrounding word is wrapped in an inline element</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> |
| <script src="../include/editor-test-utils.js"></script> |
| <script> |
| "use strict"; |
| |
| const searchParams = new URLSearchParams(document.location.search); |
| const whiteSpace = searchParams.get("white-space"); |
| |
| document.addEventListener("DOMContentLoaded", () => { |
| const editingHost = document.querySelector("div[contenteditable]"); |
| editingHost.style.whiteSpace = whiteSpace; |
| const utils = new EditorTestUtils(editingHost); |
| /** |
| * How to delete per word may depend on the browser and the platform. On the |
| * other hand, the result (at least in the plaintext point of view) should be |
| * same even if surrounding word is wrapped in a <span>. |
| */ |
| for (const data of [ |
| { |
| innerHTML: `abc <span>def</span> ghi[]`, |
| referenceInnerHTML: `abc def ghi[]`, |
| }, |
| { |
| innerHTML: `abc <span>def</span>[] ghi`, |
| referenceInnerHTML: `abc def[] ghi`, |
| }, |
| { |
| innerHTML: `abc <span>def[]</span> ghi`, |
| referenceInnerHTML: `abc def[] ghi`, |
| }, |
| { |
| innerHTML: `abc <span>[]def</span> ghi`, |
| referenceInnerHTML: `abc []def ghi`, |
| }, |
| { |
| innerHTML: `abc []<span>def</span> ghi`, |
| referenceInnerHTML: `abc []def ghi`, |
| }, |
| { |
| innerHTML: `abc[] <span>def</span> ghi`, |
| referenceInnerHTML: `abc[] def ghi`, |
| }, |
| ]) { |
| promise_test(async () => { |
| utils.setupEditingHost(data.referenceInnerHTML); |
| await utils.sendBackspaceKey(utils.deleteWordModifier); |
| const expectedInnerText = editingHost.innerText; |
| utils.setupEditingHost(data.innerHTML); |
| await utils.sendBackspaceKey(utils.deleteWordModifier); |
| assert_equals( |
| editingHost.innerText.replaceAll("\u00A0", " "), |
| expectedInnerText.replaceAll("\u00A0", " ") |
| ); |
| }, `Ctrl/Cmd - Backspace when "${data.innerHTML}" should get same innerText as when "${data.referenceInnerHTML}"`); |
| } |
| }, {once: true}); |
| </script> |
| </head> |
| <body> |
| <div contenteditable></div> |
| </body> |
| </html> |
