test_bug677752.html (4337B)
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 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=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>