insert-list-preserving-selection.tentative.html (4385B)
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&command=insertOrderedList"> 7 <meta name="variant" content="?styleWithCSS=false&command=insertUnorderedList"> 8 <meta name="variant" content="?styleWithCSS=true&command=insertOrderedList"> 9 <meta name="variant" content="?styleWithCSS=true&command=insertUnorderedList"> 10 <title>Test preserving selection after insert*List</title> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/resources/testdriver.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <script src="/resources/testdriver-actions.js"></script> 16 <script src="../include/editor-test-utils.js"></script> 17 </head> 18 <body> 19 <div contenteditable></div> 20 <script> 21 "use strict"; 22 23 const editor = document.querySelector("div[contenteditable]"); 24 const utils = new EditorTestUtils(editor); 25 const searchParams = new URLSearchParams(document.location.search); 26 const styleWithCSS = searchParams.get("styleWithCSS"); 27 const command = searchParams.get("command"); 28 document.execCommand("styleWithCSS", false, styleWithCSS); 29 30 // Note that it's not scope of this test how browsers to convert the selected 31 // content to a list. 32 33 // html: Initial HTML which will be set editor.innerHTML, it should contain 34 // selection range with a pair of "[" or "{" and "]" or "}". 35 // expectedSelectedString: After executing "outdent", compared with 36 // getSelection().toString().replace(/[ \n\r\t]+/g, "") 37 const tests = [ 38 { 39 html: "<div>a[b]c</div>", 40 expectedSelectedString: "b", 41 }, 42 { 43 html: "<div>a[bc</div><div>de]f</div>", 44 expectedSelectedString: "bcde", 45 }, 46 { 47 html: "<div>a[bc<br>de]f</div>", 48 expectedSelectedString: "bcde", 49 }, 50 { 51 html: "<ul><li>a[b]c</li></ul>", 52 expectedSelectedString: "b", 53 }, 54 { 55 html: "<ul><li>a[bc</li><li>de]f</li></ul>", 56 expectedSelectedString: "bcde", 57 }, 58 { 59 html: "<ul><li>a[bc</li><li>de]f</li><li>ghi</li></ul>", 60 expectedSelectedString: "bcde", 61 }, 62 { 63 html: "<ul><li>abc</li><li>d[ef</li><li>gh]i</li></ul>", 64 expectedSelectedString: "efgh", 65 }, 66 { 67 html: "<ol><li>a[b]c</li></ol>", 68 expectedSelectedString: "b", 69 }, 70 { 71 html: "<ol><li>a[bc</li><li>de]f</li></ol>", 72 expectedSelectedString: "bcde", 73 }, 74 { 75 html: "<ol><li>a[bc</li><li>de]f</li><li>ghi</li></ol>", 76 expectedSelectedString: "bcde", 77 }, 78 { 79 html: "<ol><li>abc</li><li>d[ef</li><li>gh]i</li></ol>", 80 expectedSelectedString: "efgh", 81 }, 82 { 83 html: "<ul><li>a[bc</li></ul>" + 84 "<ul><li>de]f</li></ul>", 85 expectedSelectedString: "bcde", 86 }, 87 { 88 html: "<ol><li>a[bc</li></ol>" + 89 "<ul><li>de]f</li></ul>", 90 expectedSelectedString: "bcde", 91 }, 92 { 93 html: "<ul><li>a[bc</li></ul>" + 94 "<ol><li>de]f</li></ol>", 95 expectedSelectedString: "bcde", 96 }, 97 { 98 html: "<div>a[bc</div>" + 99 "<ul><li>de]f</li><li>ghi</li></ul>", 100 expectedSelectedString: "bcde", 101 }, 102 { 103 html: "<ul><li>abc</li><li>d[ef</li></ul>" + 104 "<div>gh]i</div>", 105 expectedSelectedString: "efgh", 106 }, 107 { 108 html: "<div>a[bc</div>" + 109 "<ol><li>de]f</li><li>ghi</li></ol>", 110 expectedSelectedString: "bcde", 111 }, 112 { 113 html: "<ol><li>abc</li><li>d[ef</li></ol>" + 114 "<div>gh]i</div>", 115 expectedSelectedString: "efgh", 116 }, 117 { 118 html: "<table><tr><td>a[b]c</td></tr></table>", 119 expectedSelectedString: "b", 120 }, 121 { 122 html: "<table><tr><td>a[bc</td><td>de]f</td></tr></table>", 123 expectedSelectedString: "bcde", 124 }, 125 { 126 html: "<table><tr><td>a[bc</td></tr><tr><td>de]f</td></tr></table>", 127 expectedSelectedString: "bcde", 128 }, 129 { 130 html: "<div>a[bc</div>" + 131 "<table><tr><td>de]f</td></tr></table>", 132 expectedSelectedString: "bcde", 133 }, 134 { 135 html: "<table><tr><td>a[bc</td></tr></table>" + 136 "<div>de]f</div>", 137 expectedSelectedString: "bcde", 138 }, 139 ]; 140 141 for (const t of tests) { 142 test(() => { 143 utils.setupEditingHost(t.html); 144 document.execCommand(command); 145 assert_equals( 146 getSelection().toString().replace(/[ \n\r\t]+/g, ""), 147 t.expectedSelectedString, 148 `Result: ${editor.innerHTML}` 149 ); 150 }, `Preserve selection after ${command} at ${t.html}`); 151 } 152 153 </script> 154 </body> 155 </html>