test_bug677752.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=677752

-->

<head>

  <title>Test for Bug 677752</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script src="/tests/SimpleTest/EventUtils.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

</head>

<body>

<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=677752">Mozilla Bug 677752</a>

<p id="display"></p>

<div id="content">

  <section contenteditable> foo bar </section>

  <div contenteditable> foo bar </div>

  <p contenteditable> foo bar </p>

</div>

<pre id="test">

<script type="application/javascript">

/** Test for Bug 677752 **/

SimpleTest.waitForExplicitFinish();

SimpleTest.waitForFocus(runTests);

function selectEditor(aEditor) {

  aEditor.focus();

  var selection = window.getSelection();

  selection.selectAllChildren(aEditor);

  selection.collapseToStart();

function runTests() {

  var editor, node, initialHTML;

  document.execCommand("styleWithCSS", false, true);

  // editable <section>

  editor = document.querySelector("section[contenteditable]");

  initialHTML = editor.innerHTML;

  selectEditor(editor);

  // editable <section>: justify

  document.execCommand("justifyright", false, null);

  node = editor.querySelector("*");

  is(node.nodeName.toLowerCase(), "div", "'justifyright' should create a <div> in the editable <section>.");

  is(node.style.textAlign, "right", "'justifyright' should create a 'text-align: right' CSS rule.");

  document.execCommand("undo", false, null);

  // editable <section>: indent

  document.execCommand("indent", false, null);

  node = editor.querySelector("*");

  is(node.nodeName.toLowerCase(), "div", "'indent' should create a <div> in the editable <section>.");

  is(node.style.marginLeft, "40px", "'indent' should create a 'margin-left: 40px' CSS rule.");

  // editable <section>: undo with outdent

  // this should remove the whole <div> but only removing the CSS rule would be acceptable, too

  document.execCommand("outdent", false, null);

  is(editor.innerHTML, initialHTML, "'outdent' should undo the 'indent' action.");

  // editable <section>: outdent again

  document.execCommand("outdent", false, null);

  is(editor.innerHTML, initialHTML, "another 'outdent' should not modify the <section> element.");

  // editable <div>

  editor = document.querySelector("div[contenteditable]");

  initialHTML = editor.innerHTML;

  selectEditor(editor);

  // editable <div>: justify

  document.execCommand("justifyright", false, null);

  node = editor.querySelector("*");

  is(node.nodeName.toLowerCase(), "div", "'justifyright' should create a <div> in the editable <div>.");

  is(node.style.textAlign, "right", "'justifyright' should create a 'text-align: right' CSS rule.");

  document.execCommand("undo", false, null);

  // editable <div>: indent

  document.execCommand("indent", false, null);

  node = editor.querySelector("*");

  is(node.nodeName.toLowerCase(), "div", "'indent' should create a <div> in the editable <div>.");

  is(node.style.marginLeft, "40px", "'indent' should create a 'margin-left: 40px' CSS rule.");

  // editable <div>: undo with outdent

  // this should remove the whole <div> but only removing the CSS rule would be acceptable, too

  document.execCommand("outdent", false, null);

  is(editor.innerHTML, initialHTML, "'outdent' should undo the 'indent' action.");

  // editable <div>: outdent again

  document.execCommand("outdent", false, null);

  is(editor.innerHTML, initialHTML, "another 'outdent' should not modify the <div> element.");

  // editable <p>

  // all block-level commands should be ignored (<p><div/></p> is not valid)

  editor = document.querySelector("p[contenteditable]");

  initialHTML = editor.innerHTML;

  selectEditor(editor);

  // editable <p>: justify

  document.execCommand("justifyright", false, null);

  is(editor.innerHTML, initialHTML, "'justifyright' should have no effect on <p>.");

  // editable <p>: indent

  document.execCommand("indent", false, null);

  is(editor.innerHTML, initialHTML, "'indent' should have no effect on <p>.");

  // editable <p>: outdent

  document.execCommand("outdent", false, null);

  is(editor.innerHTML, initialHTML, "'outdent' should have no effect on <p>.");

  // done

  SimpleTest.finish();

</script>

</pre>

</body>

</html>