editor/composer/test/test_bug384147.html

   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