|
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 type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
9 <script type="application/javascript" 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;version=1.7"> |
|
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 |
|
34 var sel = window.getSelection(); |
|
35 |
|
36 // Test the effect that the tab key has on list items. Each test is |
|
37 // documented with the initial state of the list on the left, and the |
|
38 // expected state of the list on the right. {\t} indicates the list item |
|
39 // that will be indented. {\st} indicates that a shift-tab will be simulated |
|
40 // on that list item, outdenting it. |
|
41 // |
|
42 // Note: any test failing will likely result in all following tests failing |
|
43 // as well, since each test depends on the document being in a given state. |
|
44 // Unfortunately, due to the problems getting document focus and key events |
|
45 // to fire consistently, it's difficult to reset state between tests. |
|
46 // If there are test failures here, only debug the first test failure. |
|
47 |
|
48 // *** test 1 *** |
|
49 // 1. Item 1 1. Item 1 |
|
50 // 2. {\t}Item 2 1. Item 2 |
|
51 // 1. Item 3 2. Item 3 |
|
52 // * Item 4 * Item 4 |
|
53 // * Item 5 * Item 5 |
|
54 sel.removeAllRanges(); |
|
55 sel.selectAllChildren(editor.getElementsByTagName("li")[1]); |
|
56 document.execCommand("indent", false, null); |
|
57 ok(editor.innerHTML == "<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>", |
|
58 "html output doesn't match expected value in test 1"); |
|
59 |
|
60 // *** test 2 *** |
|
61 // 1. Item 1 1. Item 1 |
|
62 // 1. Item 2 1. Item 2 |
|
63 // 2. {\t}Item 3 1. Item 3 |
|
64 // * Item 4 * Item 4 |
|
65 // * Item 5 * Item 5 |
|
66 sel.removeAllRanges(); |
|
67 sel.selectAllChildren(editor.getElementsByTagName("li")[2]); |
|
68 document.execCommand("indent", false, null); |
|
69 ok(editor.innerHTML == "<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>", |
|
70 "html output doesn't match expected value in test 2"); |
|
71 |
|
72 // *** test 3 *** |
|
73 // 1. Item 1 1. Item 1 |
|
74 // 1. Item 2 1. Item 2 |
|
75 // 1. {\st}Item 3 2. Item 3 |
|
76 // * Item 4 * Item 4 |
|
77 // * Item 5 * Item 5 |
|
78 document.execCommand("outdent", false, null); |
|
79 ok(editor.innerHTML == "<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>", |
|
80 "html output doesn't match expected value in test 3"); |
|
81 |
|
82 // *** test 4 *** |
|
83 // 1. Item 1 1. Item 1 |
|
84 // 1. Item 2 1. Item 2 |
|
85 // 2. {\st}Item 3 2. Item 3 |
|
86 // * Item 4 * Item 4 |
|
87 // * Item 5 * Item 5 |
|
88 document.execCommand("outdent", false, null); |
|
89 ok(editor.innerHTML == "<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>", |
|
90 "html output doesn't match expected value in test 4"); |
|
91 |
|
92 // *** test 5 *** |
|
93 // 1. Item 1 1. Item 1 |
|
94 // 1. {\st}Item 2 2. Item 2 |
|
95 // 2. Item 3 3. Item 3 |
|
96 // * Item 4 * Item 4 |
|
97 // * Item 5 * Item 5 |
|
98 sel.removeAllRanges(); |
|
99 sel.selectAllChildren(editor.getElementsByTagName("li")[1]); |
|
100 document.execCommand("outdent", false, null); |
|
101 ok(editor.innerHTML == "<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><ul><li>Item 4</li><li>Item 5</li></ul>", |
|
102 "html output doesn't match expected value in test 5"); |
|
103 |
|
104 // *** test 6 *** |
|
105 // 1. Item 1 1. Item 1 |
|
106 // 2. {\t}Item 2 1. Item 2 |
|
107 // 3. Item 3 2. Item 3 |
|
108 // * Item 4 * Item 4 |
|
109 // * Item 5 * Item 5 |
|
110 document.execCommand("indent", false, null); |
|
111 ok(editor.innerHTML == "<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>", |
|
112 "html output doesn't match expected value in test 6"); |
|
113 |
|
114 // *** test 7 *** |
|
115 // 1. Item 1 1. Item 1 |
|
116 // 1. Item 2 1. Item 2 |
|
117 // 2. {\t}Item 3 2. Item 3 |
|
118 // * Item 4 * Item 4 |
|
119 // * Item 5 * Item 5 |
|
120 sel.removeAllRanges(); |
|
121 sel.selectAllChildren(editor.getElementsByTagName("li")[2]); |
|
122 document.execCommand("indent", false, null); |
|
123 ok(editor.innerHTML == "<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>", |
|
124 "html output doesn't match expected value in test 7"); |
|
125 |
|
126 // That covers the basics of merging lists on indent and outdent. |
|
127 // We also want to check that ul / ol lists won't be merged together, |
|
128 // since they're different types of lists. |
|
129 // *** test 8 *** |
|
130 // 1. Item 1 1. Item 1 |
|
131 // 1. Item 2 1. Item 2 |
|
132 // 2. Item 3 2. Item 3 |
|
133 // * {\t}Item 4 * Item 4 |
|
134 // * Item 5 * Item 5 |
|
135 sel.removeAllRanges(); |
|
136 sel.selectAllChildren(editor.getElementsByTagName("li")[3]); |
|
137 document.execCommand("indent", false, null); |
|
138 ok(editor.innerHTML == "<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>", |
|
139 "html output doesn't match expected value in test 8"); |
|
140 |
|
141 // Better test merging with <ul> rather than <ol> too. |
|
142 // *** test 9 *** |
|
143 // 1. Item 1 1. Item 1 |
|
144 // 1. Item 2 1. Item 2 |
|
145 // 2. Item 3 2. Item 3 |
|
146 // * Item 4 * Item 4 |
|
147 // * {\t}Item 5 * Item 5 |
|
148 sel.removeAllRanges(); |
|
149 sel.selectAllChildren(editor.getElementsByTagName("li")[4]); |
|
150 document.execCommand("indent", false, null); |
|
151 ok(editor.innerHTML == "<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>", |
|
152 "html output doesn't match expected value in test 9"); |
|
153 |
|
154 // Same test as test 8, but with outdent rather than indent. |
|
155 // *** test 10 *** |
|
156 // 1. Item 1 1. Item 1 |
|
157 // 1. Item 2 1. Item 2 |
|
158 // 2. Item 3 2. Item 3 |
|
159 // * {\st}Item 4 * Item 4 |
|
160 // * Item 5 * Item 5 |
|
161 sel.removeAllRanges(); |
|
162 sel.selectAllChildren(editor.getElementsByTagName("li")[3]); |
|
163 document.execCommand("outdent", false, null); |
|
164 ok(editor.innerHTML == "<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>", |
|
165 "html output doesn't match expected value in test 10"); |
|
166 |
|
167 // Test indenting multiple items at once. Hold down "shift" and select |
|
168 // upwards to get all the <ol> items and the first <ul> item. |
|
169 // *** test 11 *** |
|
170 // 1. Item 1 1. Item 1 |
|
171 // 1. {\t}Item 2 1. Item 2 |
|
172 // 2. {\t}Item 3 2. Item 3 |
|
173 // * {\t}Item 4 * Item 4 |
|
174 // * Item 5 * Item 5 |
|
175 sel.removeAllRanges(); |
|
176 var range = document.createRange(); |
|
177 range.setStart(editor.getElementsByTagName("li")[1], 0); |
|
178 range.setEnd(editor.getElementsByTagName("li")[3], editor.getElementsByTagName("li")[3].childNodes.length); |
|
179 sel.addRange(range); |
|
180 document.execCommand("indent", false, null); |
|
181 ok(editor.innerHTML == "<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>", |
|
182 "html output doesn't match expected value in test 11"); |
|
183 |
|
184 // Test outdenting multiple items at once. Selection is already ready... |
|
185 // *** test 12 *** |
|
186 // 1. Item 1 1. Item 1 |
|
187 // 1. {\st}Item 2 1. Item 2 |
|
188 // 2. {\st}Item 3 2. Item 3 |
|
189 // * {\st}Item 4 * Item 4 |
|
190 // * Item 5 * Item 5 |
|
191 document.execCommand("outdent", false, null); |
|
192 ok(editor.innerHTML == "<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 12"); |
|
194 |
|
195 SimpleTest.finish(); |
|
196 }); |
|
197 |
|
198 |
|
199 |
|
200 </script> |
|
201 </pre> |
|
202 </body> |
|
203 </html> |
|
204 |