test_bug384147.html (9461B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=384147 5 --> 6 <head> 7 <title>Test for Bug 384147</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=384147">Mozilla Bug 384147</a> 14 <p id="display"></p> 15 <div id="content" style="display: block"> 16 <div contentEditable id="editor"></div> 17 </div> 18 <pre id="test"> 19 <script class="testbody" type="text/javascript"> 20 21 /** Test for Bug 384147 */ 22 23 SimpleTest.waitForExplicitFinish(); 24 25 var editor = document.getElementById("editor"); 26 27 editor.innerHTML = "<ol><li>Item 1</li><li>Item 2</li><ol><li>Item 3</li></ol></ol><ul><li>Item 4</li><li>Item 5</li></ul>"; 28 editor.focus(); 29 30 // If executed directly, a race condition exists that will cause execCommand 31 // to fail occasionally (but often). Defer test execution to page load. 32 addLoadEvent(function() { 33 var sel = window.getSelection(); 34 35 // Test the effect that the tab key has on list items. Each test is 36 // documented with the initial state of the list on the left, and the 37 // expected state of the list on the right. {\t} indicates the list item 38 // that will be indented. {\st} indicates that a shift-tab will be simulated 39 // on that list item, outdenting it. 40 // 41 // Note: any test failing will likely result in all following tests failing 42 // as well, since each test depends on the document being in a given state. 43 // Unfortunately, due to the problems getting document focus and key events 44 // to fire consistently, it's difficult to reset state between tests. 45 // If there are test failures here, only debug the first test failure. 46 47 // *** test 1 *** 48 // 1. Item 1 1. Item 1 49 // 2. {\t}Item 2 1. Item 2 50 // 1. Item 3 2. Item 3 51 // * Item 4 * Item 4 52 // * Item 5 * Item 5 53 sel.removeAllRanges(); 54 sel.selectAllChildren(editor.getElementsByTagName("li")[1]); 55 document.execCommand("indent", false, null); 56 is( 57 editor.innerHTML, 58 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 59 "html output doesn't match expected value in test 1" 60 ); 61 62 // *** test 2 *** 63 // 1. Item 1 1. Item 1 64 // 1. Item 2 1. Item 2 65 // 2. {\t}Item 3 1. Item 3 66 // * Item 4 * Item 4 67 // * Item 5 * Item 5 68 sel.removeAllRanges(); 69 sel.selectAllChildren(editor.getElementsByTagName("li")[2]); 70 document.execCommand("indent", false, null); 71 is( 72 editor.innerHTML, 73 "<ol><li>Item 1</li><ol><li>Item 2</li><ol><li>Item 3</li></ol></ol></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 74 "html output doesn't match expected value in test 2" 75 ); 76 77 // *** test 3 *** 78 // 1. Item 1 1. Item 1 79 // 1. Item 2 1. Item 2 80 // 1. {\st}Item 3 2. Item 3 81 // * Item 4 * Item 4 82 // * Item 5 * Item 5 83 document.execCommand("outdent", false, null); 84 is( 85 editor.innerHTML, 86 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 87 "html output doesn't match expected value in test 3" 88 ); 89 90 // *** test 4 *** 91 // 1. Item 1 1. Item 1 92 // 1. Item 2 1. Item 2 93 // 2. {\st}Item 3 2. Item 3 94 // * Item 4 * Item 4 95 // * Item 5 * Item 5 96 document.execCommand("outdent", false, null); 97 is( 98 editor.innerHTML, 99 "<ol><li>Item 1</li><ol><li>Item 2</li></ol><li>Item 3</li></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 100 "html output doesn't match expected value in test 4" 101 ); 102 103 // *** test 5 *** 104 // 1. Item 1 1. Item 1 105 // 1. {\st}Item 2 2. Item 2 106 // 2. Item 3 3. Item 3 107 // * Item 4 * Item 4 108 // * Item 5 * Item 5 109 sel.removeAllRanges(); 110 sel.selectAllChildren(editor.getElementsByTagName("li")[1]); 111 document.execCommand("outdent", false, null); 112 is( 113 editor.innerHTML, 114 "<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 115 "html output doesn't match expected value in test 5" 116 ); 117 118 // *** test 6 *** 119 // 1. Item 1 1. Item 1 120 // 2. {\t}Item 2 1. Item 2 121 // 3. Item 3 2. Item 3 122 // * Item 4 * Item 4 123 // * Item 5 * Item 5 124 document.execCommand("indent", false, null); 125 is( 126 editor.innerHTML, 127 "<ol><li>Item 1</li><ol><li>Item 2</li></ol><li>Item 3</li></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 128 "html output doesn't match expected value in test 6" 129 ); 130 131 // *** test 7 *** 132 // 1. Item 1 1. Item 1 133 // 1. Item 2 1. Item 2 134 // 2. {\t}Item 3 2. Item 3 135 // * Item 4 * Item 4 136 // * Item 5 * Item 5 137 sel.removeAllRanges(); 138 sel.selectAllChildren(editor.getElementsByTagName("li")[2]); 139 document.execCommand("indent", false, null); 140 is( 141 editor.innerHTML, 142 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><li>Item 4</li><li>Item 5</li></ul>", 143 "html output doesn't match expected value in test 7" 144 ); 145 146 // That covers the basics of merging lists on indent and outdent. 147 // We also want to check that ul / ol lists won't be merged together, 148 // since they're different types of lists. 149 // *** test 8 *** 150 // 1. Item 1 1. Item 1 151 // 1. Item 2 1. Item 2 152 // 2. Item 3 2. Item 3 153 // * {\t}Item 4 * Item 4 154 // * Item 5 * Item 5 155 sel.removeAllRanges(); 156 sel.selectAllChildren(editor.getElementsByTagName("li")[3]); 157 document.execCommand("indent", false, null); 158 is( 159 editor.innerHTML, 160 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><ul><li>Item 4</li></ul><li>Item 5</li></ul>", 161 "html output doesn't match expected value in test 8" 162 ); 163 164 // Better test merging with <ul> rather than <ol> too. 165 // *** test 9 *** 166 // 1. Item 1 1. Item 1 167 // 1. Item 2 1. Item 2 168 // 2. Item 3 2. Item 3 169 // * Item 4 * Item 4 170 // * {\t}Item 5 * Item 5 171 sel.removeAllRanges(); 172 sel.selectAllChildren(editor.getElementsByTagName("li")[4]); 173 document.execCommand("indent", false, null); 174 is( 175 editor.innerHTML, 176 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><ul><li>Item 4</li><li>Item 5</li></ul></ul>", 177 "html output doesn't match expected value in test 9" 178 ); 179 180 // Same test as test 8, but with outdent rather than indent. 181 // *** test 10 *** 182 // 1. Item 1 1. Item 1 183 // 1. Item 2 1. Item 2 184 // 2. Item 3 2. Item 3 185 // * {\st}Item 4 * Item 4 186 // * Item 5 * Item 5 187 sel.removeAllRanges(); 188 sel.selectAllChildren(editor.getElementsByTagName("li")[3]); 189 document.execCommand("outdent", false, null); 190 is( 191 editor.innerHTML, 192 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><li>Item 4</li><ul><li>Item 5</li></ul></ul>", 193 "html output doesn't match expected value in test 10" 194 ); 195 196 // Test indenting multiple items at once. Hold down "shift" and select 197 // upwards to get all the <ol> items and the first <ul> item. 198 // *** test 11 *** 199 // 1. Item 1 1. Item 1 200 // 1. {\t}Item 2 1. Item 2 201 // 2. {\t}Item 3 2. Item 3 202 // * {\t}Item 4 * Item 4 203 // * Item 5 * Item 5 204 sel.removeAllRanges(); 205 var range = document.createRange(); 206 range.setStart(editor.getElementsByTagName("li")[1], 0); 207 range.setEnd(editor.getElementsByTagName("li")[3], editor.getElementsByTagName("li")[3].childNodes.length); 208 sel.addRange(range); 209 document.execCommand("indent", false, null); 210 is( 211 editor.innerHTML, 212 "<ol><li>Item 1</li><ol><ol><li>Item 2</li><li>Item 3</li></ol></ol></ol><ul><ul><li>Item 4</li><li>Item 5</li></ul></ul>", 213 "html output doesn't match expected value in test 11" 214 ); 215 216 // Test outdenting multiple items at once. Selection is already ready... 217 // *** test 12 *** 218 // 1. Item 1 1. Item 1 219 // 1. {\st}Item 2 1. Item 2 220 // 2. {\st}Item 3 2. Item 3 221 // * {\st}Item 4 * Item 4 222 // * Item 5 * Item 5 223 document.execCommand("outdent", false, null); 224 is( 225 editor.innerHTML, 226 "<ol><li>Item 1</li><ol><li>Item 2</li><li>Item 3</li></ol></ol><ul><li>Item 4</li><ul><li>Item 5</li></ul></ul>", 227 "html output doesn't match expected value in test 12" 228 ); 229 230 SimpleTest.finish(); 231 }); 232 233 234 235 </script> 236 </pre> 237 </body> 238 </html>