1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/editor/composer/test/test_bug384147.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,204 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=384147
1.8 +-->
1.9 +<head>
1.10 + <title>Test for Bug 384147</title>
1.11 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
1.13 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.14 +</head>
1.15 +<body>
1.16 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=384147">Mozilla Bug 384147</a>
1.17 +<p id="display"></p>
1.18 +<div id="content" style="display: block">
1.19 +<div contentEditable id="editor"></div>
1.20 +</div>
1.21 +<pre id="test">
1.22 +<script class="testbody" type="text/javascript;version=1.7">
1.23 +
1.24 +/** Test for Bug 384147 **/
1.25 +
1.26 +SimpleTest.waitForExplicitFinish();
1.27 +
1.28 +var editor = document.getElementById("editor");
1.29 +
1.30 +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>";
1.31 +editor.focus();
1.32 +
1.33 +// If executed directly, a race condition exists that will cause execCommand
1.34 +// to fail occasionally (but often). Defer test execution to page load.
1.35 +addLoadEvent(function() {
1.36 +
1.37 + var sel = window.getSelection();
1.38 +
1.39 + // Test the effect that the tab key has on list items. Each test is
1.40 + // documented with the initial state of the list on the left, and the
1.41 + // expected state of the list on the right. {\t} indicates the list item
1.42 + // that will be indented. {\st} indicates that a shift-tab will be simulated
1.43 + // on that list item, outdenting it.
1.44 + //
1.45 + // Note: any test failing will likely result in all following tests failing
1.46 + // as well, since each test depends on the document being in a given state.
1.47 + // Unfortunately, due to the problems getting document focus and key events
1.48 + // to fire consistently, it's difficult to reset state between tests.
1.49 + // If there are test failures here, only debug the first test failure.
1.50 +
1.51 + // *** test 1 ***
1.52 + // 1. Item 1 1. Item 1
1.53 + // 2. {\t}Item 2 1. Item 2
1.54 + // 1. Item 3 2. Item 3
1.55 + // * Item 4 * Item 4
1.56 + // * Item 5 * Item 5
1.57 + sel.removeAllRanges();
1.58 + sel.selectAllChildren(editor.getElementsByTagName("li")[1]);
1.59 + document.execCommand("indent", false, null);
1.60 + 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>",
1.61 + "html output doesn't match expected value in test 1");
1.62 +
1.63 + // *** test 2 ***
1.64 + // 1. Item 1 1. Item 1
1.65 + // 1. Item 2 1. Item 2
1.66 + // 2. {\t}Item 3 1. Item 3
1.67 + // * Item 4 * Item 4
1.68 + // * Item 5 * Item 5
1.69 + sel.removeAllRanges();
1.70 + sel.selectAllChildren(editor.getElementsByTagName("li")[2]);
1.71 + document.execCommand("indent", false, null);
1.72 + 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>",
1.73 + "html output doesn't match expected value in test 2");
1.74 +
1.75 + // *** test 3 ***
1.76 + // 1. Item 1 1. Item 1
1.77 + // 1. Item 2 1. Item 2
1.78 + // 1. {\st}Item 3 2. Item 3
1.79 + // * Item 4 * Item 4
1.80 + // * Item 5 * Item 5
1.81 + document.execCommand("outdent", false, null);
1.82 + 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>",
1.83 + "html output doesn't match expected value in test 3");
1.84 +
1.85 + // *** test 4 ***
1.86 + // 1. Item 1 1. Item 1
1.87 + // 1. Item 2 1. Item 2
1.88 + // 2. {\st}Item 3 2. Item 3
1.89 + // * Item 4 * Item 4
1.90 + // * Item 5 * Item 5
1.91 + document.execCommand("outdent", false, null);
1.92 + 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>",
1.93 + "html output doesn't match expected value in test 4");
1.94 +
1.95 + // *** test 5 ***
1.96 + // 1. Item 1 1. Item 1
1.97 + // 1. {\st}Item 2 2. Item 2
1.98 + // 2. Item 3 3. Item 3
1.99 + // * Item 4 * Item 4
1.100 + // * Item 5 * Item 5
1.101 + sel.removeAllRanges();
1.102 + sel.selectAllChildren(editor.getElementsByTagName("li")[1]);
1.103 + document.execCommand("outdent", false, null);
1.104 + 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>",
1.105 + "html output doesn't match expected value in test 5");
1.106 +
1.107 + // *** test 6 ***
1.108 + // 1. Item 1 1. Item 1
1.109 + // 2. {\t}Item 2 1. Item 2
1.110 + // 3. Item 3 2. Item 3
1.111 + // * Item 4 * Item 4
1.112 + // * Item 5 * Item 5
1.113 + document.execCommand("indent", false, null);
1.114 + 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>",
1.115 + "html output doesn't match expected value in test 6");
1.116 +
1.117 + // *** test 7 ***
1.118 + // 1. Item 1 1. Item 1
1.119 + // 1. Item 2 1. Item 2
1.120 + // 2. {\t}Item 3 2. Item 3
1.121 + // * Item 4 * Item 4
1.122 + // * Item 5 * Item 5
1.123 + sel.removeAllRanges();
1.124 + sel.selectAllChildren(editor.getElementsByTagName("li")[2]);
1.125 + document.execCommand("indent", false, null);
1.126 + 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>",
1.127 + "html output doesn't match expected value in test 7");
1.128 +
1.129 + // That covers the basics of merging lists on indent and outdent.
1.130 + // We also want to check that ul / ol lists won't be merged together,
1.131 + // since they're different types of lists.
1.132 + // *** test 8 ***
1.133 + // 1. Item 1 1. Item 1
1.134 + // 1. Item 2 1. Item 2
1.135 + // 2. Item 3 2. Item 3
1.136 + // * {\t}Item 4 * Item 4
1.137 + // * Item 5 * Item 5
1.138 + sel.removeAllRanges();
1.139 + sel.selectAllChildren(editor.getElementsByTagName("li")[3]);
1.140 + document.execCommand("indent", false, null);
1.141 + 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>",
1.142 + "html output doesn't match expected value in test 8");
1.143 +
1.144 + // Better test merging with <ul> rather than <ol> too.
1.145 + // *** test 9 ***
1.146 + // 1. Item 1 1. Item 1
1.147 + // 1. Item 2 1. Item 2
1.148 + // 2. Item 3 2. Item 3
1.149 + // * Item 4 * Item 4
1.150 + // * {\t}Item 5 * Item 5
1.151 + sel.removeAllRanges();
1.152 + sel.selectAllChildren(editor.getElementsByTagName("li")[4]);
1.153 + document.execCommand("indent", false, null);
1.154 + 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>",
1.155 + "html output doesn't match expected value in test 9");
1.156 +
1.157 + // Same test as test 8, but with outdent rather than indent.
1.158 + // *** test 10 ***
1.159 + // 1. Item 1 1. Item 1
1.160 + // 1. Item 2 1. Item 2
1.161 + // 2. Item 3 2. Item 3
1.162 + // * {\st}Item 4 * Item 4
1.163 + // * Item 5 * Item 5
1.164 + sel.removeAllRanges();
1.165 + sel.selectAllChildren(editor.getElementsByTagName("li")[3]);
1.166 + document.execCommand("outdent", false, null);
1.167 + 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>",
1.168 + "html output doesn't match expected value in test 10");
1.169 +
1.170 + // Test indenting multiple items at once. Hold down "shift" and select
1.171 + // upwards to get all the <ol> items and the first <ul> item.
1.172 + // *** test 11 ***
1.173 + // 1. Item 1 1. Item 1
1.174 + // 1. {\t}Item 2 1. Item 2
1.175 + // 2. {\t}Item 3 2. Item 3
1.176 + // * {\t}Item 4 * Item 4
1.177 + // * Item 5 * Item 5
1.178 + sel.removeAllRanges();
1.179 + var range = document.createRange();
1.180 + range.setStart(editor.getElementsByTagName("li")[1], 0);
1.181 + range.setEnd(editor.getElementsByTagName("li")[3], editor.getElementsByTagName("li")[3].childNodes.length);
1.182 + sel.addRange(range);
1.183 + document.execCommand("indent", false, null);
1.184 + 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>",
1.185 + "html output doesn't match expected value in test 11");
1.186 +
1.187 + // Test outdenting multiple items at once. Selection is already ready...
1.188 + // *** test 12 ***
1.189 + // 1. Item 1 1. Item 1
1.190 + // 1. {\st}Item 2 1. Item 2
1.191 + // 2. {\st}Item 3 2. Item 3
1.192 + // * {\st}Item 4 * Item 4
1.193 + // * Item 5 * Item 5
1.194 + document.execCommand("outdent", false, null);
1.195 + 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>",
1.196 + "html output doesn't match expected value in test 12");
1.197 +
1.198 + SimpleTest.finish();
1.199 +});
1.200 +
1.201 +
1.202 +
1.203 +</script>
1.204 +</pre>
1.205 +</body>
1.206 +</html>
1.207 +
