<!DOCTYPE HTML>
<html>
<!--
-->
<head>
  <title>Test HTML serializer with entities</title>
  <script src="/tests/SimpleTest/SimpleTest.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=424359">Mozilla Bug </a>
<p id="display"></p>
<div id="content" style="display: none">
  <iframe id="testframe" src="file_htmlserializer_2.html">
  </iframe>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">


function loadFileContent(aFile, aCharset) {
    //if(aAsIso == undefined) aAsIso = false;
    if(aCharset == undefined)
        aCharset = 'UTF-8';

    var baseUri = SpecialPowers.Cc['@mozilla.org/network/standard-url-mutator;1']
                                  .createInstance(SpecialPowers.Ci.nsIURIMutator)
                                  .setSpec(window.location.href)
                                  .finalize();

    var ios = SpecialPowers.Cc['@mozilla.org/network/io-service;1']
            .getService(SpecialPowers.Ci.nsIIOService);
    var chann = ios.newChannel(aFile,
                               aCharset,
                               baseUri,
                               null,      // aLoadingNode
                               SpecialPowers.Services.scriptSecurityManager.getSystemPrincipal(),
                               null,      // aTriggeringPrincipal
                               SpecialPowers.Ci.nsILoadInfo.SEC_ALLOW_CROSS_ORIGIN_SEC_CONTEXT_IS_NULL,
                               SpecialPowers.Ci.nsIContentPolicy.TYPE_OTHER);

    var cis = SpecialPowers.Ci.nsIConverterInputStream;

    var inputStream = SpecialPowers.Cc["@mozilla.org/intl/converter-input-stream;1"]
                       .createInstance(cis);
    inputStream.init(chann.open(), aCharset, 1024, cis.DEFAULT_REPLACEMENT_CHARACTER);
    var str = {}, content = '';
    while (inputStream.readString(4096, str) != 0) {
        content += str.value;
    }
    return content;
}

function isRoughly(actual, expected, message) {
  return is(actual.replace("<!DOCTYPE HTML", "<!DOCTYPE html"),
            expected,
            message);
}

function testHtmlSerializer_1 () {
  const de = SpecialPowers.Ci.nsIDocumentEncoder;
  var encoder = SpecialPowers.Cu.createDocumentEncoder("text/html");

  var doc = $("testframe").contentDocument;
  var out, expected;

  // in the following test, we must use the OutputLFLineBreak flag, to avoid
  // to have the default line break of the platform in the result, so the test
  // can pass on all platform

  //------------ OutputEncodeBasicEntities
  encoder.init(doc, "text/html", de.OutputLFLineBreak | de.OutputEncodeBasicEntities);
  out = encoder.encodeToString();
  expected = loadFileContent("file_htmlserializer_2_basic.html");
  isRoughly(out, expected, "test OutputEncodeBasicEntities");

  // tests on the serialization of selections

  var node = document.getElementById('draggable');

  var select = window.getSelection();
  select.selectAllChildren(node);

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  expected = 'This is a <em>draggable</em> bit of text.';
  is(out, expected, "test selection");

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(null);
  encoder.setContainerNode(node);
  out = encoder.encodeToString();
  expected = 'This is a <em>draggable</em> bit of text.';
  is(out, expected, "test container node");

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = "<div id=\"draggable\" ondragstart=\"doDragStartSelection(event)\">This is a <em>draggable</em> bit of text.</div>";
  is(out, expected, "test node");

  node = document.getElementById('aList');

  var select = window.getSelection();
  select.selectAllChildren(node);

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  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';
  is(out, expected, "test list selection");

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(null);
  encoder.setContainerNode(node);
  out = encoder.encodeToString();
  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';
  is(out, expected, "test list container node");

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setNode(node);
  out = encoder.encodeToString();
  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>";
  is(out, expected, "test list node");

  var liList = node.getElementsByTagName("li");
  var range = document.createRange();

  // selection start at the first child of the ol, and end after the element ol
  range.setStart(node, 1);
  range.setEnd(node.parentNode, 2);
  select.removeAllRanges();
  select.addRange(range);
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  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>';
  is(out, expected, "test list selection with range: selection start at the first child of the ol, and end after the element ol");

  // selection start at the third child of the ol, and end after the element ol
  range.setStart(node, 3);
  range.setEnd(node.parentNode, 2);
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  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>';
  is(out, expected, "test list selection with range: selection start at the third child of the ol, and end after the element ol");


  // selection start at the third child of the ol, and end after the element ol + ol start at the value 5
  range.setStart(node, 3);
  range.setEnd(node.parentNode, 2);
  node.setAttribute("start","5");
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  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>';
  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");


  // selection contains only some child of the ol
  node.removeAttribute("start");
  range.setStart(node, 3);
  range.setEnd(node, 5);
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
  is(out, expected, "test list selection with range: selection contains only some child of the ol");

  // selection contains only some child of the ol  + ol start at the value 5
  node.setAttribute("start","5");
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
  is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5");

  // selection contains only some child of the ol  + a value is set on the first li
  node.removeAttribute("start");
  liList[0].setAttribute("value","8");
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly);
  encoder.setSelection(select);
  out = encoder.encodeToString();
  expected = '<li>sit amet, <strong>consectetuer</strong> </li>\n  ';
  is(out, expected, "test list selection with range: selection contains only some child of the ol + ol start at the value 5");



  // test on short attributes
  node = document.getElementById('shortattr1');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<input id="shortattr1" checked="checked" value="" disabled="disabled" ismap="ismap" readonly="readonly" foo="">';
  is(out, expected, "test short attr #1");

  node = document.getElementById('shortattr2');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<ol id="shortattr2" compact="compact"><li></li></ol>';
  is(out, expected, "test short attr #2");

  node = document.getElementById('shortattr3');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<object id="shortattr3" declare="declare"></object>';
  is(out, expected, "test short attr #3");

  node = document.getElementById('shortattr4');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<script id="shortattr4" defer="defer"></'+ 'script>';
  is(out, expected, "test short attr #4");

  node = document.getElementById('shortattr5');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<select id="shortattr5" multiple="multiple"><option selected="selected">aaa</option></select>';
  is(out, expected, "test short attr #5");

  node = document.getElementById('shortattr6');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<hr noshade="noshade" id="shortattr6">';
  is(out, expected, "test short attr #6");

  node = document.getElementById('shortattr7');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<div id="shortattr7"><foo checked="" value="" disabled="" ismap="" readonly=""></foo></div>';
  is(out, expected, "test short attr #7");

  // test on _moz and -moz attr
  node = document.getElementById('mozattr');
  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<div id="mozattr" __moz_b="b"> lorem ipsum</div>';
  is(out, expected, "test -moz/_moz attr");

  node.setAttribute('_moz_c','barc');
  node.setAttribute('_-moz_d','bard');
  node.setAttribute('__moz_e','bare');

  encoder.init(document, "text/html", de.OutputLFLineBreak | de.OutputSelectionOnly | de.OutputRaw);
  encoder.setNode(node);
  out = encoder.encodeToString();
  expected = '<div id="mozattr" __moz_b="b" _-moz_d="bard" __moz_e="bare"> lorem ipsum</div>';
  is(out, expected, "test -moz/_moz attr #2");

  SimpleTest.finish();
}


SimpleTest.waitForExplicitFinish();

addLoadEvent(testHtmlSerializer_1);

</script>
</pre>
<div style="display: none">

<div id="draggable" ondragstart="doDragStartSelection(event)">This is a <em>draggable</em> bit of text.</div>

</div>
<div style="display: none">

<ol id="aList">
   <li>Lorem ipsum dolor</li>
  <li>sit amet, <strong>consectetuer</strong> </li>
  <li>adipiscing elit</li>
  <li>Nam eu sapien. Sed viverra lacus. Donec quis ipsum. Nunc cursus aliquet lectus. Nunc vitae eros. Class</li>
  <li>aptent taciti</li>
</ol>


<!-- test for some short attr -->
<div id="shortattr">
   <input id="shortattr1" checked="" value="" disabled="" ismap="" readonly="" foo="">
   <ol id="shortattr2" compact=""><li></li></ol>
   <object id="shortattr3" declare=""></object>
   <script id="shortattr4" defer=""></script>
   <select id="shortattr5" multiple=""><option selected="">aaa</option></select>
   <hr noshade="" id="shortattr6">
   <div id="shortattr7"><foo checked="" value="" disabled="" ismap="" readonly=""></div>
   <div id="mozattr" _moz_a="a" __moz_b="b"> lorem ipsum</div>
</div>



</div>
</body>
</html>
