editor/libeditor/tests/test_bug570144.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=570144
   5 -->
   6 <head>
   7   <title>Test for Bug 570144</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=570144">Mozilla Bug 570144</a>
  14 <p id="display"></p>
  15 <div id="content">
  16   <!-- editable paragraphs in list item -->
  17   <section id="test1">
  18     <ol>
  19       <li><p contenteditable>foo</p></li>
  20     </ol>
  21     <ul>
  22       <li><p contenteditable>foo</p></li>
  23     </ul>
  24     <dl>
  25       <dt>foo</dt>
  26       <dd><p contenteditable>bar</p></dd>
  27     </dl>
  28   </section>
  29   <!-- paragraphs in editable list item -->
  30   <section id="test2">
  31     <ol>
  32       <li contenteditable><p>foo</p></li>
  33     </ol>
  34     <ul>
  35       <li contenteditable><p>foo</p></li>
  36     </ul>
  37     <dl>
  38       <dt>foo</dt>
  39       <dd contenteditable><p>bar</p></dd>
  40     </dl>
  41   </section>
  42   <!-- paragraphs in editable list -->
  43   <section id="test3">
  44     <ol contenteditable>
  45       <li><p>foo</p></li>
  46     </ol>
  47     <ul contenteditable>
  48       <li><p>foo</p></li>
  49     </ul>
  50     <dl contenteditable>
  51       <dt>foo</dt>
  52       <dd><p>bar</p></dd>
  53     </dl>
  54   </section>
  55 </div>
  56
  57 <pre id="test">
  58 <script type="application/javascript">
  59
  60 /** Test for Bug 570144 **/
  61 SimpleTest.waitForExplicitFinish();
  62 SimpleTest.waitForFocus(runTests);
  63
  64 function try2split(list) {
  65   var editor = list.hasAttribute("contenteditable")
  66              ? list : list.querySelector("*[contenteditable]");
  67   editor.focus();
  68   // put the caret at the end of the paragraph
  69   var selection = window.getSelection();
  70   if (editor.nodeName.toLowerCase() == "p")
  71     selection.selectAllChildren(editor);
  72   else
  73     selection.selectAllChildren(editor.querySelector("p"));
  74   selection.collapseToEnd();
  75   // simulate a [Enter] keypress
  76   synthesizeKey("KEY_Enter");
  77 }
  78
  79 function testSection(element, context, shouldCreateLI, shouldCreateP) {
  80   var nbLI = shouldCreateLI ? 2 : 1; // number of expected list items
  81   var nbP  = shouldCreateP ? 2 : 1; // number of expected paragraphs
  82
  83   function message(nodeName, dup) {
  84     return context + ":[Return] should " + (dup ? "" : "not ")
  85                    + "create another <" + nodeName + ">.";
  86   }
  87   var msgP  = message("p", shouldCreateP);
  88   var msgLI = message("li", shouldCreateLI);
  89   var msgDT = message("dt", shouldCreateLI);
  90   var msgDD = message("dd", false);
  91
  92   const ol = element.querySelector("ol");
  93   try2split(ol);
  94   is(ol.querySelectorAll("li").length, nbLI, msgLI);
  95   is(ol.querySelectorAll("p").length, nbP, msgP);
  96
  97   const ul = element.querySelector("ul");
  98   try2split(ul);
  99   is(ul.querySelectorAll("li").length, nbLI, msgLI);
 100   is(ul.querySelectorAll("p").length, nbP, msgP);
 101
 102   const dl = element.querySelector("dl");
 103   try2split(dl);
 104   is(dl.querySelectorAll("dt").length, nbLI, msgDT);
 105   is(dl.querySelectorAll("dd").length, 1, msgDD);
 106   is(dl.querySelectorAll("p").length, nbP, msgP);
 107 }
 108
 109 function runTests() {
 110   testSection(document.getElementById("test1"), "editable paragraph in list item", false, false);
 111   testSection(document.getElementById("test2"), "paragraph in editable list item", false, true);
 112   testSection(document.getElementById("test3"), "paragraph in editable list", true, false);
 113   /* Note: concerning #test3, it would be preferrable that [Return] creates
 114    * another paragraph in another list item (i.e. last argument = 'true').
 115    * Currently it just creates an empty list item, which is acceptable.
 116    */
 117   SimpleTest.finish();
 118 }
 119
 120 </script>
 121 </pre>
 122 </body>
 123 </html>