editor/composer/test/test_bug384147.html@b8a032363ba2
editor/composer/test/test_bug384147.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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">
21 /** Test for Bug 384147 **/
23 SimpleTest.waitForExplicitFinish();
25 var editor = document.getElementById("editor");
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();
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() {
34 var sel = window.getSelection();
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.
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");
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");
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");
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");
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");
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");
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");
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");
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");
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");
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");
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");
195 SimpleTest.finish();
196 });
200 </script>
201 </pre>
202 </body>
203 </html>
