dom/base/test/test_bug424359-2.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 -->
   5 <head>
   6   <title>Test HTML serializer with entities</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=424359">Mozilla Bug </a>
  12 <p id="display"></p>
  13 <div id="content" style="display: none">
  14   <iframe id="testframe" src="file_htmlserializer_2.html">
  15   </iframe>
  16 </div>
  17 <pre id="test">
  18 <script class="testbody" type="text/javascript">
  19
  20
  21 function loadFileContent(aFile, aCharset) {
  22     //if(aAsIso == undefined) aAsIso = false;
  23     if(aCharset == undefined)
  24         aCharset = 'UTF-8';
  25
  26     var baseUri = SpecialPowers.Cc['@mozilla.org/network/standard-url-mutator;1']
  27                                   .createInstance(SpecialPowers.Ci.nsIURIMutator)
  28                                   .setSpec(window.location.href)
  29                                   .finalize();
  30
  31     var ios = SpecialPowers.Cc['@mozilla.org/network/io-service;1']
  32             .getService(SpecialPowers.Ci.nsIIOService);
  33     var chann = ios.newChannel(aFile,
  34                                aCharset,
  35                                baseUri,
  36                                null,      // aLoadingNode
  37                                SpecialPowers.Services.scriptSecurityManager.getSystemPrincipal(),
  38                                null,      // aTriggeringPrincipal
  39                                SpecialPowers.Ci.nsILoadInfo.SEC_ALLOW_CROSS_ORIGIN_SEC_CONTEXT_IS_NULL,
  40                                SpecialPowers.Ci.nsIContentPolicy.TYPE_OTHER);
  41
  42     var cis = SpecialPowers.Ci.nsIConverterInputStream;
  43
  44     var inputStream = SpecialPowers.Cc["@mozilla.org/intl/converter-input-stream;1"]
  45                        .createInstance(cis);
  46     inputStream.init(chann.open(), aCharset, 1024, cis.DEFAULT_REPLACEMENT_CHARACTER);
  47     var str = {}, content = '';
  48     while (inputStream.readString(4096, str) != 0) {
  49         content += str.value;
  50     }
  51     return content;
  52 }
  53
  54 function isRoughly(actual, expected, message) {
  55   return is(actual.replace("<!DOCTYPE HTML", "<!DOCTYPE html"),
  56             expected,
  57             message);
  58 }
  59
  60 function testHtmlSerializer_1 () {
  61   const de = SpecialPowers.Ci.nsIDocumentEncoder;
  62   var encoder = SpecialPowers.Cu.createDocumentEncoder("text/html");
  63
  64   var doc = $("testframe").contentDocument;
  65   var out, expected;
  66
  67   // in the following test, we must use the OutputLFLineBreak flag, to avoid
  68   // to have the default line break of the platform in the result, so the test
  69   // can pass on all platform
  70
  71   //------------ OutputEncodeBasicEntities
  72   encoder.init(doc, "text/html", de.OutputLFLineBreak | de.OutputEncodeBasicEntities);
  73   out = encoder.encodeToString();
  74   expected = loadFileContent("file_htmlserializer_2_basic.html");
  75   isRoughly(out, expected, "test OutputEncodeBasicEntities");
  76
  77   // tests on the serialization of selections
  78
  79   var node = document.getElementById('draggable');
  80
  81   var select = window.getSelection();
  82   select.selectAllChildren(node);
  83
  84   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  85   encoder.setSelection(select);
  86   out = encoder.encodeToString();
  87   expected = 'This is a <em>draggable</em> bit of text.';
  88   is(out, expected, "test selection");
  89
  90   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  91   encoder.setSelection(null);
  92   encoder.setContainerNode(node);
  93   out = encoder.encodeToString();
  94   expected = 'This is a <em>draggable</em> bit of text.';
  95   is(out, expected, "test container node");
  96
  97   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  98   encoder.setNode(node);
  99   out = encoder.encodeToString();
 100   expected = "<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">This is a <em>draggable</em> bit of text.</div>";
 101   is(out, expected, "test node");
 102
 103   node = document.getElementById('aList');
 104
 105   var select = window.getSelection();
 106   select.selectAllChildren(node);
 107
 108   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 109   encoder.setSelection(select);
 110   out = encoder.encodeToString();
 111   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';
 112   is(out, expected, "test list selection");
 113
 114   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 115   encoder.setSelection(null);
 116   encoder.setContainerNode(node);
 117   out = encoder.encodeToString();
 118   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';
 119   is(out, expected, "test list container node");
 120
 121   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 122   encoder.setNode(node);
 123   out = encoder.encodeToString();
 124   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>";
 125   is(out, expected, "test list node");
 126
 127   var liList = node.getElementsByTagName("li");
 128   var range = document.createRange();
 129
 130   // selection start at the first child of the ol, and end after the element ol
 131   range.setStart(node, 1);
 132   range.setEnd(node.parentNode, 2);
 133   select.removeAllRanges();
 134   select.addRange(range);
 135   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 136   encoder.setSelection(select);
 137   out = encoder.encodeToString();
 138   expected = '<ol id="aList"><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>';
 139   is(out, expected, "test list selection with range: selection start at the first child of the ol, and end after the element ol");
 140
 141   // selection start at the third child of the ol, and end after the element ol
 142   range.setStart(node, 3);
 143   range.setEnd(node.parentNode, 2);
 144   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 145   encoder.setSelection(select);
 146   out = encoder.encodeToString();
 147   expected = '<ol id="aList"><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>';
 148   is(out, expected, "test list selection with range: selection start at the third child of the ol, and end after the element ol");
 149
 150
 151   // selection start at the third child of the ol, and end after the element ol + ol start at the value 5
 152   range.setStart(node, 3);
 153   range.setEnd(node.parentNode, 2);
 154   node.setAttribute("start","5");
 155   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 156   encoder.setSelection(select);
 157   out = encoder.encodeToString();
 158   expected = '<ol id="aList" start="5"><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>';
 159   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");
 160
 161
 162   // selection contains only some child of the ol
 163   node.removeAttribute("start");
 164   range.setStart(node, 3);
 165   range.setEnd(node, 5);
 166   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 167   encoder.setSelection(select);
 168   out = encoder.encodeToString();
 169   expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
 170   is(out, expected, "test list selection with range: selection contains only some child of the ol");
 171
 172   // selection contains only some child of the ol  + ol start at the value 5
 173   node.setAttribute("start","5");
 174   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 175   encoder.setSelection(select);
 176   out = encoder.encodeToString();
 177   expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
 178   is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5");
 179
 180   // selection contains only some child of the ol  + a value is set on the first li
 181   node.removeAttribute("start");
 182   liList[0].setAttribute("value","8");
 183   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
 184   encoder.setSelection(select);
 185   out = encoder.encodeToString();
 186   expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
 187   is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5");
 188
 189
 190
 191   // test on short attributes
 192   node = document.getElementById('shortattr1');
 193   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 194   encoder.setNode(node);
 195   out = encoder.encodeToString();
 196   expected = '<input id="shortattr1" checked="checked" value="" disabled="disabled" ismap="ismap" readonly="readonly" foo="">';
 197   is(out, expected, "test short attr #1");
 198
 199   node = document.getElementById('shortattr2');
 200   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 201   encoder.setNode(node);
 202   out = encoder.encodeToString();
 203   expected = '<ol id="shortattr2" compact="compact"><li></li></ol>';
 204   is(out, expected, "test short attr #2");
 205
 206   node = document.getElementById('shortattr3');
 207   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 208   encoder.setNode(node);
 209   out = encoder.encodeToString();
 210   expected = '<object id="shortattr3" declare="declare"></object>';
 211   is(out, expected, "test short attr #3");
 212
 213   node = document.getElementById('shortattr4');
 214   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 215   encoder.setNode(node);
 216   out = encoder.encodeToString();
 217   expected = '<script id="shortattr4" defer="defer"></'+ 'script>';
 218   is(out, expected, "test short attr #4");
 219
 220   node = document.getElementById('shortattr5');
 221   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 222   encoder.setNode(node);
 223   out = encoder.encodeToString();
 224   expected = '<select id="shortattr5" multiple="multiple"><option selected="selected">aaa</option></select>';
 225   is(out, expected, "test short attr #5");
 226
 227   node = document.getElementById('shortattr6');
 228   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 229   encoder.setNode(node);
 230   out = encoder.encodeToString();
 231   expected = '<hr id="shortattr6" noshade="noshade">';
 232   is(out, expected, "test short attr #6");
 233
 234   node = document.getElementById('shortattr7');
 235   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 236   encoder.setNode(node);
 237   out = encoder.encodeToString();
 238   expected = '<div id="shortattr7"><foo checked="" value="" disabled="" ismap="" readonly=""></foo></div>';
 239   is(out, expected, "test short attr #7");
 240
 241   // test on _moz and -moz attr
 242   node = document.getElementById('mozattr');
 243   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 244   encoder.setNode(node);
 245   out = encoder.encodeToString();
 246   expected = '<div id="mozattr" __moz_b="b"> lorem ipsum</div>';
 247   is(out, expected, "test -moz/_moz attr");
 248
 249   node.setAttribute('_moz_c','barc');
 250   node.setAttribute('_-moz_d','bard');
 251   node.setAttribute('__moz_e','bare');
 252
 253   encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
 254   encoder.setNode(node);
 255   out = encoder.encodeToString();
 256   expected = '<div id="mozattr" __moz_b="b" _-moz_d="bard" __moz_e="bare"> lorem ipsum</div>';
 257   is(out, expected, "test -moz/_moz attr #2");
 258
 259   SimpleTest.finish();
 260 }
 261
 262
 263 SimpleTest.waitForExplicitFinish();
 264
 265 addLoadEvent(testHtmlSerializer_1);
 266
 267 </script>
 268 </pre>
 269 <div style="display: none">
 270
 271 <div id="draggable" ondragstart="doDragStartSelection(event)">This is a <em>draggable</em> bit of text.</div>
 272
 273 </div>
 274 <div style="display: none">
 275
 276 <ol id="aList">
 277    <li>Lorem ipsum dolor</li>
 278   <li>sit amet, <strong>consectetuer</strong> </li>
 279   <li>adipiscing elit</li>
 280   <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>
 281   <li>aptent taciti</li>
 282 </ol>
 283
 284
 285 <!-- test for some short attr -->
 286 <div id="shortattr">
 287    <input id="shortattr1" checked="" value="" disabled="" ismap="" readonly="" foo="">
 288    <ol id="shortattr2" compact=""><li></li></ol>
 289    <object id="shortattr3" declare=""></object>
 290    <script id="shortattr4" defer=""></script>
 291    <select id="shortattr5" multiple=""><option selected="">aaa</option></select>
 292    <hr noshade="" id="shortattr6">
 293    <div id="shortattr7"><foo checked="" value="" disabled="" ismap="" readonly=""></div>
 294    <div id="mozattr" _moz_a="a" __moz_b="b"> lorem ipsum</div>
 295 </div>
 296
 297
 298
 299 </div>
 300 </body>
 301 </html>