editor/libeditor/tests/test_bug674861.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=674861
   5 -->
   6 <head>
   7   <title>Test for Bug 674861</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=674861">Mozilla Bug 674861</a>
  14 <p id="display"></p>
  15 <div id="content">
  16   <section id="test1">
  17     <h2> Editable Bullet List </h2>
  18     <ul contenteditable>
  19       <li> item A </li>
  20       <li> item B </li>
  21       <li> item C </li>
  22     </ul>
  23
  24     <h2> Editable Ordered List </h2>
  25     <ol contenteditable>
  26       <li> item A </li>
  27       <li> item B </li>
  28       <li> item C </li>
  29     </ol>
  30
  31     <h2> Editable Definition List </h2>
  32     <dl contenteditable>
  33       <dt> term A </dt>
  34       <dd> definition A </dd>
  35       <dt> term B </dt>
  36       <dd> definition B </dd>
  37       <dt> term C </dt>
  38       <dd> definition C </dd>
  39     </dl>
  40   </section>
  41
  42   <section id="test2" contenteditable>
  43     <h2> Bullet List In Editable Section </h2>
  44     <ul>
  45       <li> item A </li>
  46       <li> item B </li>
  47       <li> item C </li>
  48     </ul>
  49
  50     <h2> Ordered List In Editable Section </h2>
  51     <ol>
  52       <li> item A </li>
  53       <li> item B </li>
  54       <li> item C </li>
  55     </ol>
  56
  57     <h2> Definition List In Editable Section </h2>
  58     <dl>
  59       <dt> term A </dt>
  60       <dd> definition A </dd>
  61       <dt> term B </dt>
  62       <dd> definition B </dd>
  63       <dt> term C </dt>
  64       <dd> definition C </dd>
  65     </dl>
  66   </section>
  67 </div>
  68
  69 <pre id="test">
  70 <script type="application/javascript">
  71
  72 /** Test for Bug 674861 **/
  73 SimpleTest.waitForExplicitFinish();
  74 SimpleTest.waitForFocus(runTests);
  75
  76 const CARET_BEGIN  = 0;
  77 const CARET_MIDDLE = 1;
  78 const CARET_END    = 2;
  79
  80 function try2split(element, caretPos) {
  81   // compute the requested position
  82   var len = element.textContent.length;
  83   var pos = -1;
  84   switch (caretPos) {
  85     case CARET_BEGIN:
  86       pos = 0;
  87       break;
  88     case CARET_MIDDLE:
  89       pos = Math.floor(len / 2);
  90       break;
  91     case CARET_END:
  92       pos = len;
  93       break;
  94   }
  95
  96   // put the caret on the requested position
  97   var sel = window.getSelection();
  98   for (var i = 0; i < sel.rangeCount; i++) {
  99     var range = sel.getRangeAt(i);
 100     sel.removeRange(range);
 101   }
 102   range = document.createRange();
 103   range.setStart(element.firstChild, pos);
 104   range.setEnd(element.firstChild, pos);
 105   sel.addRange(range);
 106
 107   // simulates two [Return] keypresses
 108   synthesizeKey("KEY_Enter");
 109   synthesizeKey("KEY_Enter");
 110 }
 111
 112 function runTests() {
 113   const test1 = document.getElementById("test1");
 114   const test2 = document.getElementById("test2");
 115
 116   // -----------------------------------------------------------------------
 117   // #test1: editable lists should NOT be splittable
 118   // -----------------------------------------------------------------------
 119   const ul = test1.querySelector("ul");
 120   const ol = test1.querySelector("ol");
 121   const dl = test1.querySelector("dl");
 122
 123   // bullet list
 124   ul.focus();
 125   try2split(ul.querySelector("li"), CARET_END);
 126   is(test1.querySelectorAll("ul").length, 1,
 127     "The <ul contenteditable> list should not be splittable.");
 128   is(ul.querySelectorAll("li").length, 5,
 129     "Two new <li> elements should have been created.");
 130
 131   // ordered list
 132   ol.focus();
 133   try2split(ol.querySelector("li"), CARET_END);
 134   is(test1.querySelectorAll("ol").length, 1,
 135     "The <ol contenteditable> list should not be splittable.");
 136   is(ol.querySelectorAll("li").length, 5,
 137     "Two new <li> elements should have been created.");
 138
 139   // definition list
 140   dl.focus();
 141   try2split(dl.querySelector("dd"), CARET_END);
 142   is(test1.querySelectorAll("dl").length, 1,
 143     "The <dl contenteditable> list should not be splittable.");
 144   is(dl.querySelectorAll("dt").length, 5,
 145     "Two new <dt> elements should have been created.");
 146
 147   // -----------------------------------------------------------------------
 148   // #test2: lists in editable blocks should be splittable
 149   // -----------------------------------------------------------------------
 150   test2.focus();
 151
 152   function testNewParagraph(expected) {
 153     // bullet list
 154     try2split(test2.querySelector("ul li"), CARET_END);
 155     is(test2.querySelectorAll("ul").length, 2,
 156       "The <ul> list should have been splitted.");
 157     is(test2.querySelectorAll("ul li").length, 3,
 158       "No new <li> element should have been created.");
 159     is(test2.querySelectorAll("ul+" + expected).length, 1,
 160       "A new " + expected + " should have been created in the <ul>.");
 161
 162     // ordered list
 163     try2split(test2.querySelector("ol li"), CARET_END);
 164     is(test2.querySelectorAll("ol").length, 2,
 165       "The <ol> list should have been splitted.");
 166     is(test2.querySelectorAll("ol li").length, 3,
 167       "No new <li> element should have been created.");
 168     is(test2.querySelectorAll("ol+" + expected).length, 1,
 169       "A new " + expected + " should have been created in the <ol>.");
 170
 171     // definition list
 172     try2split(test2.querySelector("dl dd"), CARET_END);
 173     is(test2.querySelectorAll("dl").length, 2,
 174       "The <dl> list should have been splitted.");
 175     is(test2.querySelectorAll("dt").length, 3,
 176       "No new <dt> element should have been created.");
 177     is(test2.querySelectorAll("dl+" + expected).length, 1,
 178       "A new " + expected + " should have been created in the <dl>.");
 179   }
 180
 181   document.execCommand("defaultParagraphSeparator", false, "div");
 182   testNewParagraph("div");
 183   document.execCommand("defaultParagraphSeparator", false, "p");
 184   testNewParagraph("p");
 185   document.execCommand("defaultParagraphSeparator", false, "br");
 186   testNewParagraph("p");
 187
 188   // done
 189   SimpleTest.finish();
 190 }
 191 </script>
 192 </pre>
 193 </body>
 194 </html>