delete-around-linebreak-or-block-boundary.html (4568B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?white-space=normal"> 7 <meta name="variant" content="?white-space=pre"> 8 <meta name="variant" content="?white-space=pre-line"> 9 <meta name="variant" content="?white-space=pre-wrap"> 10 <title>Making block empty or joining paragraphs in contenteditable=plaintext-only should work as same as contenteditable=true</title> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="../include/editor-test-utils.js"></script> 14 <script> 15 "use strict"; 16 17 const searchParams = new URLSearchParams(document.location.search); 18 const whiteSpace = searchParams.get("white-space"); 19 const useBR = whiteSpace == "normal"; 20 21 /** 22 * contenteditable=plaintext-only may have any complicated DOM tree. Therefore, 23 * deletion around line breaks and block boundaries should work same as the 24 * case of contenteditable=true. 25 */ 26 27 addEventListener("load", () => { 28 const richTextEditingHost = document.querySelector("div[contenteditable=true]"); 29 richTextEditingHost.style.whiteSpace = whiteSpace; 30 const plainTextEditingHost = document.querySelector("div[contenteditable=plaintext-only]"); 31 plainTextEditingHost.style.whiteSpace = whiteSpace; 32 const utilsForRichText = new EditorTestUtils(richTextEditingHost); 33 const utilsForPlainText = new EditorTestUtils(plainTextEditingHost); 34 for (const data of [ 35 { 36 init: `<div>A[]</div>`, 37 }, 38 { 39 init: `<div>A<br>[]B</div>`, 40 }, 41 { 42 init: `<div>A\n[]B</div>`, 43 skipIf: useBR, 44 }, 45 { 46 init: `<div>A</div><div>[]B</div>`, 47 }, 48 { 49 init: `<div>A<div>B[]</div></div>`, 50 }, 51 { 52 init: `<div>A<div>[]B</div></div>`, 53 }, 54 { 55 init: `<div><div>A</div>[]B</div>`, 56 }, 57 { 58 init: `<div><div>A</div>B[]</div>`, 59 }, 60 { 61 init: `<div>A<ul><li>[]B</li></ul></div>`, 62 }, 63 { 64 init: `<div>A<ul><li>[]B</li><li>C</li></ul></div>`, 65 }, 66 { 67 init: `<ul><li>A[]</li></ul>`, 68 }, 69 { 70 init: `<ul><li>A</li><li>[]B</li></ul>`, 71 }, 72 { 73 init: `<ul><li>A</li><li>B[]</li></ul>`, 74 }, 75 { 76 init: `<ul><li>A[]</li><li>B</li></ul>`, 77 }, 78 { 79 init: `<div>A<ol><li>[]B</li></ol></div>`, 80 }, 81 { 82 init: `<div>A<ol><li>[]B</li><li>C</li></ol></div>`, 83 }, 84 { 85 init: `<ol><li>A[]</li></ol>`, 86 }, 87 { 88 init: `<ol><li>A</li><li>[]B</li></ol>`, 89 }, 90 { 91 init: `<ol><li>A</li><li>B[]</li></ol>`, 92 }, 93 { 94 init: `<ol><li>A[]</li><li>B</li></ol>`, 95 }, 96 { 97 init: `<div>A<dl><dt>[]B</dt></dl></div>`, 98 }, 99 { 100 init: `<div>A<dl><dt>[]B</dt><dt>C</dt></dl></div>`, 101 }, 102 { 103 init: `<div>A<dl><dt>[]B</dt><dd>C</dd></dl></div>`, 104 }, 105 { 106 init: `<div>A<dl><dd>[]B</dd></dl></div>`, 107 }, 108 { 109 init: `<div>A<dl><dd>[]B</dd><dt>C</dt></dl></div>`, 110 }, 111 { 112 init: `<div>A<dl><dd>[]B</dd><dd>C</dd></dl></div>`, 113 }, 114 { 115 init: `<dl><dt>A</dt><dt>[]B</dt></ol>`, 116 }, 117 { 118 init: `<dl><dd>A</dd><dt>[]B</dt></ol>`, 119 }, 120 { 121 init: `<dl><dt>A</dt><dd>[]B</dd></ol>`, 122 }, 123 { 124 init: `<dl><dd>A</dd><dd>[]B</dd></ol>`, 125 }, 126 { 127 init: `<table><tr><td>A</td><td>[]B</td></tr></table>`, 128 }, 129 { 130 init: `<table><tr><td>A</td></tr><tr><td>[]B</td></tr></table>`, 131 }, 132 { 133 init: `<table><tr><th>A</th><td>[]B</td></tr></table>`, 134 }, 135 { 136 init: `<table><tr><th>A</th></tr><tr><td>[]B</td></tr></table>`, 137 }, 138 { 139 init: `<table><tr><td>A</td><th>[]B</th></tr></table>`, 140 }, 141 { 142 init: `<table><tr><td>A</td></tr><tr><th>[]B</th></tr></table>`, 143 }, 144 { 145 init: `<table><tr><th>A</th><th>[]B</th></tr></table>`, 146 }, 147 { 148 init: `<table><tr><th>A</th></tr><tr><th>[]B</th></tr></table>`, 149 }, 150 ]) { 151 if (data.skipIf !== undefined && data.skipIf) { 152 continue; 153 } 154 test(() => { 155 utilsForRichText.setupEditingHost(data.init); 156 document.execCommand("delete"); 157 const richTextResult = richTextEditingHost.innerHTML; 158 utilsForPlainText.setupEditingHost(data.init); 159 document.execCommand("delete"); 160 const plainTextResult = plainTextEditingHost.innerHTML; 161 assert_equals(plainTextResult, richTextResult); 162 }, `document.execCommand("delete") when ${data.init}`); 163 } 164 }, {once: true}); 165 </script> 166 </head> 167 <body> 168 <div contenteditable="true"></div> 169 <div contenteditable="plaintext-only"></div> 170 </body> 171 </html>