test_bug1406726.html (6653B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1406726 5 --> 6 <head> 7 <title>Test for Bug 1406726</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=1406726">Mozilla Bug 1406726</a> 14 <p id="display"></p> 15 <div id="editor" contenteditable></div> 16 17 <pre id="test"> 18 <script type="application/javascript"> 19 20 /** Test for Bug 1406726 */ 21 SimpleTest.waitForExplicitFinish(); 22 SimpleTest.waitForFocus(() => { 23 let editor = document.getElementById("editor"); 24 let selection = window.getSelection(); 25 26 editor.focus(); 27 for (let paragraphSeparator of ["div", "p"]) { 28 document.execCommand("defaultParagraphSeparator", false, paragraphSeparator); 29 30 // The result of editor.innerHTML may be wrong in this tests. 31 // Currently, editor wraps following elements of <br> element with default 32 // paragraph separator only when there is only non-editable elements. 33 // This behavior should be standardized by execCommand spec. 34 35 editor.innerHTML = "foo<br>bar<br><span contenteditable=\"false\">baz</span>"; 36 selection.collapse(editor.childNodes.item(2), "bar".length); 37 document.execCommand("insertParagraph", false); 38 is(editor.innerHTML, "foo<br>" + 39 "<" + paragraphSeparator + ">bar</" + paragraphSeparator + ">" + 40 "<" + paragraphSeparator + "><br></" + paragraphSeparator + ">" + 41 "<" + paragraphSeparator + "><span contenteditable=\"false\">baz</span></" + paragraphSeparator + ">", 42 "All inline nodes including non-editable <span> element should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 43 ok(selection.isCollapsed, "Selection should be collapsed"); 44 is(selection.anchorNode, editor.childNodes.item(3), 45 "Caret should be in the third line"); 46 is(selection.anchorOffset, 0, 47 "Caret should be at start of the third line"); 48 49 editor.innerHTML = "foo<br>bar<br><span>baz</span>"; 50 selection.collapse(editor.childNodes.item(2), "bar".length); 51 document.execCommand("insertParagraph", false); 52 is(editor.innerHTML, "foo<br>" + 53 "<" + paragraphSeparator + ">bar</" + paragraphSeparator + ">" + 54 "<" + paragraphSeparator + "><br></" + paragraphSeparator + ">" + 55 "<span>baz</span>", 56 "All inline nodes in the second line should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 57 ok(selection.isCollapsed, "Selection should be collapsed"); 58 is(selection.anchorNode, editor.childNodes.item(3), 59 "Caret should be in the third line"); 60 is(selection.anchorOffset, 0, 61 "Caret should be at start of the third line"); 62 63 editor.innerHTML = "foo<br>bar<br><span contenteditable=\"false\">baz</span>qux"; 64 selection.collapse(editor.childNodes.item(2), "bar".length); 65 document.execCommand("insertParagraph", false); 66 is(editor.innerHTML, "foo<br>" + 67 "<" + paragraphSeparator + ">bar</" + paragraphSeparator + ">" + 68 "<" + paragraphSeparator + "><br></" + paragraphSeparator + ">" + 69 "<span contenteditable=\"false\">baz</span>qux", 70 "All inline nodes in the second line should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 71 ok(selection.isCollapsed, "Selection should be collapsed"); 72 is(selection.anchorNode, editor.childNodes.item(3), 73 "Caret should be in the third line"); 74 is(selection.anchorOffset, 0, 75 "Caret should be at start of the third line"); 76 77 editor.innerHTML = "foo<br>bar<br><span contenteditable=\"false\">baz</span>"; 78 selection.collapse(editor.childNodes.item(2), "ba".length); 79 document.execCommand("insertParagraph", false); 80 is(editor.innerHTML, "foo<br>" + 81 "<" + paragraphSeparator + ">ba</" + paragraphSeparator + ">" + 82 "<" + paragraphSeparator + ">r</" + paragraphSeparator + ">" + 83 "<" + paragraphSeparator + "><span contenteditable=\"false\">baz</span></" + paragraphSeparator + ">", 84 "All inline nodes including non-editable <span> element should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 85 ok(selection.isCollapsed, "Selection should be collapsed"); 86 is(selection.anchorNode, editor.childNodes.item(3).firstChild, 87 "Caret should be in the text node in the third line"); 88 is(selection.anchorOffset, 0, 89 "Caret should be at start of the text node in the third line"); 90 91 editor.innerHTML = "foo<br>bar<br><span>baz</span>"; 92 selection.collapse(editor.childNodes.item(2), "ba".length); 93 document.execCommand("insertParagraph", false); 94 is(editor.innerHTML, "foo<br>" + 95 "<" + paragraphSeparator + ">ba</" + paragraphSeparator + ">" + 96 "<" + paragraphSeparator + ">r</" + paragraphSeparator + ">" + 97 "<span>baz</span>", 98 "All inline nodes in the second line should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 99 ok(selection.isCollapsed, "Selection should be collapsed"); 100 is(selection.anchorNode, editor.childNodes.item(3).firstChild, 101 "Caret should be in the text node in the third line"); 102 is(selection.anchorOffset, 0, 103 "Caret should be at start of the text node in the third line"); 104 105 editor.innerHTML = "foo<br>bar<br><span contenteditable=\"false\">baz</span>qux"; 106 selection.collapse(editor.childNodes.item(2), "ba".length); 107 document.execCommand("insertParagraph", false); 108 is(editor.innerHTML, "foo<br>" + 109 "<" + paragraphSeparator + ">ba</" + paragraphSeparator + ">" + 110 "<" + paragraphSeparator + ">r</" + paragraphSeparator + ">" + 111 "<span contenteditable=\"false\">baz</span>qux", 112 "All inline nodes in the second line should be wrapped with default paragraph separator, <" + paragraphSeparator + ">"); 113 ok(selection.isCollapsed, "Selection should be collapsed"); 114 is(selection.anchorNode, editor.childNodes.item(3).firstChild, 115 "Caret should be in the text node in the third line"); 116 is(selection.anchorOffset, 0, 117 "Caret should be at start of the text node in the third line"); 118 } 119 120 SimpleTest.finish(); 121 }); 122 123 </script> 124 </pre> 125 </body> 126 </html>