outdent-preserving-selection.tentative.html (5419B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta chareset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?styleWithCSS=false"> 7 <meta name="variant" content="?styleWithCSS=true"> 8 <title>Test preserving selection after outdent</title> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="../include/editor-test-utils.js"></script> 15 </head> 16 <body> 17 <div contenteditable></div> 18 <script> 19 "use strict"; 20 21 const editor = document.querySelector("div[contenteditable]"); 22 const utils = new EditorTestUtils(editor); 23 const styleWithCSS = 24 new URLSearchParams(document.location.search).get("styleWithCSS"); 25 document.execCommand("styleWithCSS", false, styleWithCSS); 26 27 // Note that it's not scope of this test how browsers to outdent the selected 28 // content. 29 30 // html: Initial HTML which will be set editor.innerHTML, it should contain 31 // selection range with a pair of "[" or "{" and "]" or "}". 32 // expectedSelectedString: After executing "outdent", compared with 33 // getSelection().toString().replace(/[ \n\r]+/g, "") 34 const tests = [ 35 { 36 html: "<blockquote>a[b]c</blockquote>", 37 expectedSelectedString: "b", 38 }, 39 { 40 html: "<blockquote><div>a[b]c</div></blockquote>", 41 expectedSelectedString: "b", 42 }, 43 { 44 html: "<blockquote><div>a[bc</div><div>de]f</div></blockquote>", 45 expectedSelectedString: "bcde", 46 }, 47 { 48 html: "<blockquote>a[bc</blockquote>" + 49 "<blockquote>de]f</blockquote>", 50 expectedSelectedString: "bcde", 51 }, 52 { 53 html: '<div style="margin-left:15px">a[b]c</div>', 54 expectedSelectedString: "b", 55 }, 56 { 57 html: '<div style="margin-left:15px">a[bc</div>' + 58 '<div style="margin-left:15px">de]f</div>', 59 expectedSelectedString: "bcde", 60 }, 61 { 62 html: "<ul><li>a[b]c</li></ul>", 63 expectedSelectedString: "b", 64 }, 65 { 66 html: "<ul><li>a[bc</li><li>de]f</li></ul>", 67 expectedSelectedString: "bcde", 68 }, 69 { 70 html: "<ol><ul><li>a[b]c</li></ul></ol>", 71 expectedSelectedString: "b", 72 }, 73 { 74 html: "<ol><ul><li>a[bc</li><li>de]f</li></ul></ol>", 75 expectedSelectedString: "bcde", 76 }, 77 { 78 html: "<ul><ul><li>a[b]c</li></ul></ul>", 79 expectedSelectedString: "b", 80 }, 81 { 82 html: "<ul><ul><li>a[bc</li><li>de]f</li></ul></ul>", 83 expectedSelectedString: "bcde", 84 }, 85 { 86 html: "<ol><li><ul><li>a[b]c</li></ul></li></ol>", 87 expectedSelectedString: "b", 88 }, 89 { 90 html: "<ol><li><ul><li>a[bc</li><li>de]f</li></ul></li></ol>", 91 expectedSelectedString: "bcde", 92 }, 93 { 94 html: "<ul><li><ul><li>a[b]c</li></ul></li></ul>", 95 expectedSelectedString: "b", 96 }, 97 { 98 html: "<ul><li><ul><li>a[bc</li><li>de]f</li></ul></li></ul>", 99 expectedSelectedString: "bcde", 100 }, 101 { 102 html: "<blockquote><div>a[bc</div></blockquote>" + 103 "<ul><ul><li>de]f</li></ul></ul>", 104 expectedSelectedString: "bcde", 105 }, 106 { 107 html: "<blockquote><div>a[bc</div></blockquote>" + 108 "<ol><ul><li>de]f</li></ul></ol>", 109 expectedSelectedString: "bcde", 110 }, 111 { 112 html: '<div style="margin-left:15px">a[bc</div>' + 113 "<ul><ul><li>de]f</li></ul></ul>", 114 expectedSelectedString: "bcde", 115 }, 116 { 117 html: "<blockquote><div>a[bc</div></blockquote>" + 118 "<ul><li><ul><li>de]f</li></ul></li></ul>", 119 expectedSelectedString: "bcde", 120 }, 121 { 122 html: "<blockquote><div>a[bc</div></blockquote>" + 123 "<ol><li><ul><li>de]f</li></ul></li></ol>", 124 expectedSelectedString: "bcde", 125 }, 126 { 127 html: "<ol><ul><li>a[bc</li></ul></ol>" + 128 "<blockquote><div>de]f</div></blockquote>", 129 expectedSelectedString: "bcde", 130 }, 131 { 132 html: "<ul><ul><li>a[bc</li></ul></ul>" + 133 '<div style="margin-left:15px">de]f</div>', 134 expectedSelectedString: "bcde", 135 }, 136 { 137 html: "<ul><li><ul><li>a[bc</li></ul></li></ul>" + 138 "<blockquote><div>de]f</div></blockquote>", 139 expectedSelectedString: "bcde", 140 }, 141 { 142 html: "<ol><li><ul><li>a[bc</li></ul></li></ol>" + 143 "<blockquote><div>de]f</div></blockquote>", 144 expectedSelectedString: "bcde", 145 }, 146 { 147 html: "<ul><li>a[bc</li></ul>" + 148 "<ul><li>de]f</li></ul>", 149 expectedSelectedString: "bcde", 150 }, 151 { 152 html: "<ul><li>abc</li><li>d[ef</li></ul>" + 153 "<ul><li>gh]i</li></ul>", 154 expectedSelectedString: "efgh", 155 }, 156 { 157 html: "<ul><li>abc</li><li>d[ef</li></ul>" + 158 "<ul><li>gh]i</li><li>jkl</li></ul>", 159 expectedSelectedString: "efgh", 160 }, 161 { 162 html: "<ol><li>a[bc</li></ol>" + 163 "<ul><li>de]f</li></ul>", 164 expectedSelectedString: "bcde", 165 }, 166 { 167 html: "<ol><li>abc</li><li>d[ef</li></ol>" + 168 "<ul><li>gh]i</li></ul>", 169 expectedSelectedString: "efgh", 170 }, 171 { 172 html: "<ol><li>abc</li><li>d[ef</li></ol>" + 173 "<ul><li>gh]i</li><li>jkl</li></ul>", 174 expectedSelectedString: "efgh", 175 }, 176 ]; 177 178 for (const t of tests) { 179 test(() => { 180 utils.setupEditingHost(t.html); 181 document.execCommand("outdent"); 182 assert_equals( 183 getSelection().toString().replace(/[ \n\r]+/g, ""), 184 t.expectedSelectedString, 185 `Result: ${editor.innerHTML}` 186 ); 187 }, `Preserve selection after outdent at ${t.html}`); 188 } 189 190 </script> 191 </body> 192 </html>