test_htmlcopyencoder.html (10415B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 --> 5 <head> 6 <title>Test on the html copy encoder</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=422403">Mozilla Bug </a> 12 <p id="display"></p> 13 <div id="content" style="display: none"> 14 </div> 15 <pre id="test"> 16 <script class="testbody" type="text/javascript"> 17 18 function testHtmlCopyEncoder () { 19 const de = SpecialPowers.Ci.nsIDocumentEncoder; 20 var encoder = SpecialPowers.Cu.createHTMLCopyEncoder(); 21 var out, expected; 22 23 var node = document.getElementById('draggable'); 24 25 const includeCommonAncestor = SpecialPowers.getBoolPref( 26 "dom.serializer.includeCommonAncestor.enabled" 27 ); 28 29 // in the following tests, we must use the OutputLFLineBreak flag, to avoid 30 // to have the default line break of the platform in the result, so the test 31 // can pass on all platform 32 33 34 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 35 encoder.setContainerNode(node); 36 out = encoder.encodeToString(); 37 expected = 'This is a <em>draggable</em> bit of text.'; 38 is(out, expected, "test container node "); 39 40 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 41 encoder.setNode(node); 42 out = encoder.encodeToString(); 43 expected = "<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">This is a <em>draggable</em> bit of text.</div>"; 44 is(out, expected, "test node"); 45 46 var select = window.getSelection(); 47 select.selectAllChildren(node); 48 49 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 50 encoder.setSelection(select); 51 out = encoder.encodeToString(); 52 expected = `${includeCommonAncestor ? "<div style=\"display: none\">\n\n<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">" : ""}` + 53 `This is a <em>draggable</em> bit of text.` + 54 `${includeCommonAncestor ? "</div>\n\n</div>" : ""}`; 55 is(out, expected, "test selection"); 56 57 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputAbsoluteLinks | de.OutputEncodeHTMLEntities | de.OutputSelectionOnly | de.OutputRaw); 58 encoder.setSelection(select); 59 var outContext = {value:''}, outInfo = {value:''}; 60 out = encoder.encodeToStringWithContext(outContext, outInfo); 61 expected = `${includeCommonAncestor ? "<div style=\"display: none\">\n\n<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">" : ""}` + 62 `This is a <em>draggable</em> bit of text.` + 63 `${includeCommonAncestor ? "</div>\n\n</div>" : ""}`; 64 is(out, expected, "test encodeToStringWithContext with selection "); 65 66 node.nextSibling.data="\nfoo bar\n"; 67 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 68 encoder.setSelection(select); 69 out = encoder.encodeToString(); 70 expected = `${includeCommonAncestor ? "<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">" : ""}` + 71 `This is a <em>draggable</em> bit of text.` + 72 `${includeCommonAncestor ? "</div>" : ""}`; 73 is(out, expected, "test selection with additional data"); 74 75 node = document.getElementById('aList'); 76 77 select = window.getSelection(); 78 select.selectAllChildren(node); 79 80 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 81 encoder.setSelection(select); 82 out = encoder.encodeToString(); 83 expected = `${includeCommonAncestor ? "<ol id=\"aList\">" : ""}` + 84 `\n <li>Lorem ipsum dolor</li>\n <li>sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n` + 85 `${includeCommonAncestor ? "</ol>" : ""}`; 86 is(out, expected, "test list selection"); 87 88 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 89 encoder.setContainerNode(node); 90 out = encoder.encodeToString(); 91 expected = '\n <li>Lorem ipsum dolor</li>\n <li>sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n'; 92 is(out, expected, "test list container node"); 93 94 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 95 encoder.setNode(node); 96 out = encoder.encodeToString(); 97 expected = "<ol id=\"aList\">\n <li>Lorem ipsum dolor</li>\n <li>sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n</ol>"; 98 is(out, expected, "test list node"); 99 100 var liList = node.getElementsByTagName("li"); 101 var range = document.createRange(); 102 103 // selection start at the first child of the ol, and end after the element ol 104 range.setStart(node, 1); 105 range.setEnd(node.parentNode, 2); 106 select.removeAllRanges(); 107 select.addRange(range); 108 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 109 encoder.setSelection(select); 110 out = encoder.encodeToString(); 111 expected = '<ol id="aList">\n <li>Lorem ipsum dolor</li>\n <li>sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n</ol>'; 112 is(out, expected, "test list selection with range: selection start at the first child of the ol, and end after the element ol"); 113 114 // selection start at the third child of the ol, and end after the element ol 115 range.setStart(node, 3); 116 range.setEnd(node.parentNode, 2); 117 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 118 encoder.setSelection(select); 119 out = encoder.encodeToString(); 120 expected = '<ol id="aList"><li value=\"2\">sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n</ol>'; 121 is(out, expected, "test list selection with range: selection start at the third child of the ol, and end after the element ol"); 122 123 124 // selection start at the third child of the ol, and end after the element ol + ol start at the value 5 125 range.setStart(node, 3); 126 range.setEnd(node.parentNode, 2); 127 node.setAttribute("start","5"); 128 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 129 encoder.setSelection(select); 130 out = encoder.encodeToString(); 131 expected = '<ol id=\"aList\" start=\"5\"><li value=\"6\">sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n</ol>'; 132 is(out, expected, "test list selection with range: selection start at the third child of the ol, and end after the element ol + ol start at the value 5"); 133 134 // selection contains only some child of the ol 135 node.removeAttribute("start"); 136 range.setStart(node, 3); 137 range.setEnd(node, 5); 138 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 139 encoder.setSelection(select); 140 out = encoder.encodeToString(); 141 expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n '; 142 is(out, expected, "test list selection with range: selection contains only some child of the ol"); 143 144 // selection contains only some child of the ol + ol start at the value 5 145 node.setAttribute("start","5"); 146 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 147 encoder.setSelection(select); 148 out = encoder.encodeToString(); 149 expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n '; 150 is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5"); 151 152 // selection contains only some child of the ol + a value is set on the first li 153 node.removeAttribute("start"); 154 liList[0].setAttribute("value","8"); 155 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 156 encoder.setSelection(select); 157 out = encoder.encodeToString(); 158 expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n '; 159 is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5"); 160 161 select.selectAllChildren(node); 162 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 163 encoder.setSelection(select); 164 out = encoder.encodeToString(); 165 expected = `${includeCommonAncestor ? "<ol id=\"aList\">" : ""}` + 166 `\n <li value=\"8\">Lorem ipsum dolor</li>\n <li>sit amet, <strong>consectetuer</strong> </li>\n <li>adipiscing elit</li>\n <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>\n <li>aptent taciti</li>\n` + 167 `${includeCommonAncestor ? "</ol>" : ""}`; 168 is(out, expected, "test list selection with a value on a LI"); 169 170 //test Bug 436703 171 node = document.getElementById('aContentEditable'); 172 select.selectAllChildren(node); 173 encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly); 174 encoder.setSelection(select); 175 out = encoder.encodeToString(); 176 expected = '<p>one</p><p>two</p>'; 177 is(out, expected, "select all children in an contentEditable div should not select the div itself"); 178 179 SimpleTest.finish(); 180 } 181 182 183 SimpleTest.waitForExplicitFinish(); 184 185 addLoadEvent(testHtmlCopyEncoder); 186 187 </script> 188 </pre> 189 <div style="display: none"> 190 191 <div id="draggable" ondragstart="doDragStartSelection(event)">This is a <em>draggable</em> bit of text.</div> 192 193 </div> 194 <div style="display: none"> 195 196 <ol id="aList"> 197 <li>Lorem ipsum dolor</li> 198 <li>sit amet, <strong>consectetuer</strong> </li> 199 <li>adipiscing elit</li> 200 <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li> 201 <li>aptent taciti</li> 202 </ol> 203 foo bar 204 </div> 205 206 <div id="aContentEditable" contentEditable="true"><p>one</p><p>two</p></div> 207 </body> 208 </html>