| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="timeout" content="long"> |
| <meta name="variant" content="?white-space=normal"> |
| <meta name="variant" content="?white-space=pre"> |
| <meta name="variant" content="?white-space=pre-line"> |
| <meta name="variant" content="?white-space=pre-wrap"> |
| <title>Making block empty or joining paragraphs in contenteditable=plaintext-only should work as same as contenteditable=true</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.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"); |
| const useBR = whiteSpace == "normal"; |
| |
| /** |
| * contenteditable=plaintext-only may have any complicated DOM tree. Therefore, |
| * deletion around line breaks and block boundaries should work same as the |
| * case of contenteditable=true. |
| */ |
| |
| addEventListener("load", () => { |
| const richTextEditingHost = document.querySelector("div[contenteditable=true]"); |
| richTextEditingHost.style.whiteSpace = whiteSpace; |
| const plainTextEditingHost = document.querySelector("div[contenteditable=plaintext-only]"); |
| plainTextEditingHost.style.whiteSpace = whiteSpace; |
| const utilsForRichText = new EditorTestUtils(richTextEditingHost); |
| const utilsForPlainText = new EditorTestUtils(plainTextEditingHost); |
| for (const data of [ |
| { |
| init: `<div>[]A</div>`, |
| }, |
| { |
| init: `<div>A[]<br>B</div>`, |
| }, |
| { |
| init: `<div>A[]\nB</div>`, |
| skipIf: useBR, |
| }, |
| { |
| init: `<div>A[]</div><div>B</div>`, |
| }, |
| { |
| init: `<div>A<div>[]B</div></div>`, |
| }, |
| { |
| init: `<div>A[]<div>B</div></div>`, |
| }, |
| { |
| init: `<div><div>A[]</div>B</div>`, |
| }, |
| { |
| init: `<div><div>A</div>[]B</div>`, |
| }, |
| { |
| init: `<div>A[]<ul><li>B</li></ul></div>`, |
| }, |
| { |
| init: `<div>A[]<ul><li>B</li><li>C</li></ul></div>`, |
| }, |
| { |
| init: `<ul><li>[]A</li></ul>`, |
| }, |
| { |
| init: `<ul><li>A[]</li><li>B</li></ul>`, |
| }, |
| { |
| init: `<ul><li>A</li><li>[]B</li></ul>`, |
| }, |
| { |
| init: `<ul><li>[]A</li><li>B</li></ul>`, |
| }, |
| { |
| init: `<div>A[]<ol><li>B</li></ol></div>`, |
| }, |
| { |
| init: `<div>A[]<ol><li>B</li><li>C</li></ol></div>`, |
| }, |
| { |
| init: `<ol><li>[]A</li></ol>`, |
| }, |
| { |
| init: `<ol><li>A[]</li><li>B</li></ol>`, |
| }, |
| { |
| init: `<ol><li>A</li><li>[]B</li></ol>`, |
| }, |
| { |
| init: `<ol><li>[]A</li><li>B</li></ol>`, |
| }, |
| { |
| init: `<div>A[]<dl><dt>B</dt></dl></div>`, |
| }, |
| { |
| init: `<div>A[]<dl><dt>B</dt><dt>C</dt></dl></div>`, |
| }, |
| { |
| init: `<div>A[]<dl><dt>B</dt><dd>C</dd></dl></div>`, |
| }, |
| { |
| init: `<div>A[]<dl><dd>B</dd></dl></div>`, |
| }, |
| { |
| init: `<div>A[]<dl><dd>B</dd><dt>C</dt></dl></div>`, |
| }, |
| { |
| init: `<div>A[]<dl><dd>B</dd><dd>C</dd></dl></div>`, |
| }, |
| { |
| init: `<dl><dt>A[]</dt><dt>B</dt></ol>`, |
| }, |
| { |
| init: `<dl><dd>A[]</dd><dt>B</dt></ol>`, |
| }, |
| { |
| init: `<dl><dt>A[]</dt><dd>B</dd></ol>`, |
| }, |
| { |
| init: `<dl><dd>A[]</dd><dd>B</dd></ol>`, |
| }, |
| { |
| init: `<table><tr><td>A[]</td><td>B</td></tr></table>`, |
| }, |
| { |
| init: `<table><tr><td>A[]</td></tr><tr><td>B</td></tr></table>`, |
| }, |
| { |
| init: `<table><tr><th>A[]</th><td>B</td></tr></table>`, |
| }, |
| { |
| init: `<table><tr><th>A[]</th></tr><tr><td>B</td></tr></table>`, |
| }, |
| { |
| init: `<table><tr><td>A[]</td><th>B</th></tr></table>`, |
| }, |
| { |
| init: `<table><tr><td>A[]</td></tr><tr><th>B</th></tr></table>`, |
| }, |
| { |
| init: `<table><tr><th>A[]</th><th>B</th></tr></table>`, |
| }, |
| { |
| init: `<table><tr><th>A[]</th></tr><tr><th>B</th></tr></table>`, |
| }, |
| ]) { |
| if (data.skipIf !== undefined && data.skipIf) { |
| continue; |
| } |
| test(() => { |
| utilsForRichText.setupEditingHost(data.init); |
| document.execCommand("forwardDelete"); |
| const richTextResult = richTextEditingHost.innerHTML; |
| utilsForPlainText.setupEditingHost(data.init); |
| document.execCommand("forwardDelete"); |
| const plainTextResult = plainTextEditingHost.innerHTML; |
| assert_equals(plainTextResult, richTextResult); |
| }, `document.execCommand("forwardDelete") when ${data.init}`); |
| } |
| }, {once: true}); |
| </script> |
| </head> |
| <body> |
| <div contenteditable="true"></div> |
| <div contenteditable="plaintext-only"></div> |
| </body> |
| </html> |
