editor/libeditor/tests/test_bug677752.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=677752
   5 -->
   6 <head>
   7   <title>Test for Bug 677752</title>
   8   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script type="text/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=677752">Mozilla Bug 677752</a>
  14 <p id="display"></p>
  15 <div id="content">
  16   <section contenteditable> foo bar </section>
  17   <div contenteditable> foo bar </div>
  18   <p contenteditable> foo bar </p>
  19 </div>
  20
  21 <pre id="test">
  22 <script type="application/javascript">
  23
  24 /** Test for Bug 677752 **/
  25 SimpleTest.waitForExplicitFinish();
  26 SimpleTest.waitForFocus(runTests);
  27
  28 function selectEditor(aEditor) {
  29   aEditor.focus();
  30   var selection = window.getSelection();
  31   selection.selectAllChildren(aEditor);
  32   selection.collapseToStart();
  33 }
  34
  35 function runTests() {
  36   var editor, node, initialHTML;
  37   document.execCommand('styleWithCSS', false, true);
  38
  39   // editable <section>
  40   editor = document.querySelector("section[contenteditable]");
  41   initialHTML = editor.innerHTML;
  42   selectEditor(editor);
  43   // editable <section>: justify
  44   document.execCommand("justifyright", false, null);
  45   node = editor.querySelector("*");
  46   is(node.nodeName.toLowerCase(), "div", "'justifyright' should create a <div> in the editable <section>.");
  47   is(node.style.textAlign,      "right", "'justifyright' should create a 'text-align: right' CSS rule.");
  48   document.execCommand("undo", false, null);
  49   // editable <section>: indent
  50   document.execCommand("indent", false, null);
  51   node = editor.querySelector("*");
  52   is(node.nodeName.toLowerCase(), "div", "'indent' should create a <div> in the editable <section>.");
  53   is(node.style.marginLeft,      "40px", "'indent' should create a 'margin-left: 40px' CSS rule.");
  54   // editable <section>: undo with outdent
  55   // this should remove the whole <div> but only removing the CSS rule would be acceptable, too
  56   document.execCommand("outdent", false, null);
  57   is(editor.innerHTML, initialHTML, "'outdent' should undo the 'indent' action.");
  58   // editable <section>: outdent again
  59   document.execCommand("outdent", false, null);
  60   is(editor.innerHTML, initialHTML, "another 'outdent' should not modify the <section> element.");
  61
  62   // editable <div>
  63   editor = document.querySelector("div[contenteditable]");
  64   initialHTML = editor.innerHTML;
  65   selectEditor(editor);
  66   // editable <div>: justify
  67   document.execCommand("justifyright", false, null);
  68   node = editor.querySelector("*");
  69   is(node.nodeName.toLowerCase(), "div", "'justifyright' should create a <div> in the editable <div>.");
  70   is(node.style.textAlign,      "right", "'justifyright' should create a 'text-align: right' CSS rule.");
  71   document.execCommand("undo", false, null);
  72   // editable <div>: indent
  73   document.execCommand("indent", false, null);
  74   node = editor.querySelector("*");
  75   is(node.nodeName.toLowerCase(), "div", "'indent' should create a <div> in the editable <div>.");
  76   is(node.style.marginLeft,      "40px", "'indent' should create a 'margin-left: 40px' CSS rule.");
  77   // editable <div>: undo with outdent
  78   // this should remove the whole <div> but only removing the CSS rule would be acceptable, too
  79   document.execCommand("outdent", false, null);
  80   is(editor.innerHTML, initialHTML, "'outdent' should undo the 'indent' action.");
  81   // editable <div>: outdent again
  82   document.execCommand("outdent", false, null);
  83   is(editor.innerHTML, initialHTML, "another 'outdent' should not modify the <div> element.");
  84
  85   // editable <p>
  86   // all block-level commands should be ignored (<p><div/></p> is not valid)
  87   editor = document.querySelector("p[contenteditable]");
  88   initialHTML = editor.innerHTML;
  89   selectEditor(editor);
  90   // editable <p>: justify
  91   document.execCommand("justifyright", false, null);
  92   is(editor.innerHTML, initialHTML, "'justifyright' should have no effect on <p>.");
  93   // editable <p>: indent
  94   document.execCommand("indent", false, null);
  95   is(editor.innerHTML, initialHTML, "'indent' should have no effect on <p>.");
  96   // editable <p>: outdent
  97   document.execCommand("outdent", false, null);
  98   is(editor.innerHTML, initialHTML, "'outdent' should have no effect on <p>.");
  99
 100   // done
 101   SimpleTest.finish();
 102 }
 103
 104 </script>
 105 </pre>
 106 </body>
 107 </html>