inert-inlines-around-selection-range-in-contenteditable.html (7368B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Delete editable range around elements having inert attribute</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../editing/include/editor-test-utils.js"></script> 9 <script> 10 document.addEventListener("DOMContentLoaded", () => { 11 const editingHost = document.querySelector("div[contenteditable]"); 12 const utils = new EditorTestUtils(editingHost); 13 14 test(t => { 15 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 16 const initialInnerHTML = editingHost.innerHTML; 17 document.execCommand("delete"); 18 const desc = `execCommand("delete") at ${t.name}` 19 assert_equals( 20 editingHost.innerHTML, 21 initialInnerHTML, 22 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 23 ); 24 }, "<span inert>a[bc</span><span>de]f</span>"); 25 26 test(t => { 27 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 28 const initialInnerHTML = editingHost.innerHTML; 29 document.execCommand("delete"); 30 const desc = `execCommand("delete") at ${t.name}` 31 assert_equals( 32 !!editingHost.querySelector("span[inert]"), 33 true, 34 `${desc}: <span inert> should not be deleted` 35 ); 36 assert_equals( 37 editingHost.querySelector("span[inert]").textContent, 38 "def", 39 `${desc}: <span inert> content should not be deleted` 40 ); 41 assert_not_equals( 42 editingHost.innerHTML, 43 initialInnerHTML, 44 `${desc}: <span> content should be deleted (but how to handle it is not tested here)` 45 ); 46 }, "<span>a[bc</span><span inert>de]f</span>"); 47 48 test(t => { 49 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent-reverse" }); 50 const initialInnerHTML = editingHost.innerHTML; 51 document.execCommand("delete"); 52 const desc = `execCommand("delete") at ${t.name} (selection range direction is inverted)` 53 assert_equals( 54 !!editingHost.querySelector("span[inert]"), 55 true, 56 `${desc}: <span inert> should not be deleted` 57 ); 58 assert_equals( 59 editingHost.querySelector("span[inert]").textContent, 60 "def", 61 `${desc}: <span inert> content should not be deleted` 62 ); 63 assert_not_equals( 64 editingHost.innerHTML, 65 initialInnerHTML, 66 `${desc}: <span> content should be deleted (but how to handle it is not tested here)` 67 ); 68 }, "<span inert>d[ef</span><span>ab]c</span>"); 69 70 test(t => { 71 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent-reverse" }); 72 const initialInnerHTML = editingHost.innerHTML; 73 document.execCommand("delete"); 74 const desc = `execCommand("delete") at ${t.name} (selection range direction is inverted)` 75 assert_equals( 76 editingHost.innerHTML, 77 initialInnerHTML, 78 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 79 ); 80 }, "<span>d[ef</span><span inert>ab]c</span>"); 81 82 test(t => { 83 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 84 document.execCommand("delete"); 85 const desc = `execCommand("delete") at ${t.name}` 86 assert_equals(editingHost.innerHTML, "af", `${desc}: <span inert> should be deleted`); 87 }, "a[bc<span inert>XYZ</span>de]f"); 88 89 test(t => { 90 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 91 const initialInnerHTML = editingHost.innerHTML; 92 document.execCommand("delete"); 93 const desc = `execCommand("delete") at ${t.name}` 94 assert_equals( 95 editingHost.innerHTML, 96 initialInnerHTML, 97 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 98 ); 99 }, `<span inert style="display:contents">a[bc</span><span>de]f</span>`); 100 101 test(t => { 102 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 103 const initialInnerHTML = editingHost.innerHTML; 104 document.execCommand("delete"); 105 const desc = `execCommand("delete") at ${t.name}` 106 assert_equals( 107 editingHost.innerHTML, 108 initialInnerHTML, 109 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 110 ); 111 }, `<span inert style="display:contents">{abc</span><span>de]f</span>`); 112 113 test(t => { 114 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 115 const initialInnerHTML = editingHost.innerHTML; 116 document.execCommand("delete"); 117 const desc = `execCommand("delete") at ${t.name}` 118 assert_equals( 119 editingHost.innerHTML, 120 initialInnerHTML, 121 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 122 ); 123 }, `<span inert><span style="display:contents">a[bc</span></span><span>de]f</span>`); 124 125 test(t => { 126 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 127 const initialInnerHTML = editingHost.innerHTML; 128 document.execCommand("delete"); 129 const desc = `execCommand("delete") at ${t.name}` 130 assert_equals( 131 editingHost.innerHTML, 132 initialInnerHTML, 133 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 134 ); 135 }, `<span inert><span style="display:contents">{abc</span></span><span>de]f</span>`); 136 137 test(t => { 138 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 139 const initialInnerHTML = editingHost.innerHTML; 140 document.execCommand("delete"); 141 const desc = `execCommand("delete") at ${t.name}` 142 assert_equals( 143 editingHost.innerHTML, 144 initialInnerHTML, 145 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 146 ); 147 }, `<span inert style="display:none">a[bc</span><span>de]f</span>`); 148 149 test(t => { 150 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 151 const initialInnerHTML = editingHost.innerHTML; 152 document.execCommand("delete"); 153 const desc = `execCommand("delete") at ${t.name}` 154 assert_equals( 155 editingHost.innerHTML, 156 initialInnerHTML, 157 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 158 ); 159 }, `<span inert style="display:none">{abc</span><span>de]f</span>`); 160 161 test(t => { 162 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 163 const initialInnerHTML = editingHost.innerHTML; 164 document.execCommand("delete"); 165 const desc = `execCommand("delete") at ${t.name}` 166 assert_equals( 167 editingHost.innerHTML, 168 initialInnerHTML, 169 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 170 ); 171 }, `<span inert><span style="display:none">a[bc</span></span><span>de]f</span>`); 172 173 test(t => { 174 utils.setupEditingHost(t.name, { selection: "setBaseAndExtent" }); 175 const initialInnerHTML = editingHost.innerHTML; 176 document.execCommand("delete"); 177 const desc = `execCommand("delete") at ${t.name}` 178 assert_equals( 179 editingHost.innerHTML, 180 initialInnerHTML, 181 `${desc}: <span> content should not be deleted because anchor node of Selection is in the <span inert>` 182 ); 183 }, `<span inert><span style="display:none">{abc</span></span><span>de]f</span>`); 184 }); 185 </script> 186 </head> 187 <body> 188 <div contenteditable></div> 189 </body> 190 </html>