test_htmlcopyencoder_range_end_comment.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

-->

<head>

<title>Test on the html copy encoder for different range end</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=1922000">Mozilla Bug 1922000</a>

<p id="display"></p>

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

<div id="container">

  <div id="comment">

    <div id="start">First</div>

    <div>Second</div>

    <div><div id="end"><!-- Third --><br></div><br></div>

  </div>

</div>

<script>

/* global describe, it, beforeEach */

const de = SpecialPowers.Ci.nsIDocumentEncoder;

const encoder = SpecialPowers.Cu.createHTMLCopyEncoder();

function testSelectAndSerialize(aDescription, aGetRangeFun, aExpectedTextResult,

                                aExpectedHTMLResult) {

  it(aDescription, () => {

    info("Setup selection");

    const selection = window.getSelection();

    selection.removeAllRanges();

    const range = aGetRangeFun();

    selection.addRange(range);

    info("Initialize encoder for text/plain");

    // Force LF line breaks; otherwise, on Windows we would get CRLF.

    encoder.init(document, "text/plain", de.OutputLFLineBreak | de.AllowCrossShadowBoundary);

    encoder.setSelection(selection);

    is(encoder.encodeToString(), aExpectedTextResult, "check text/plain result");

    info("Initialize encoder for text/html");

    // Force LF line breaks; otherwise, on Windows we would get CRLF.

    encoder.init(document, "text/html", de.OutputLFLineBreak | de.AllowCrossShadowBoundary);

    encoder.setSelection(selection);

    const htmlContext = { value: '' };

    const htmlInfo = { value: '' };

    is(encoder.encodeToStringWithContext(htmlContext, htmlInfo),

       aExpectedHTMLResult, "check text/html result");

});

testSelectAndSerialize(

  "Test selecting range with end in the beginning of a element",

  () => {

    const div = document.querySelector("div#comment");

    const range = document.createRange();

    // Start at the beginning of the <div> with "First" text node

    const start = div.querySelector("#start");

    range.setStart(start, 0);

    // End at the beginning of the <div> with comment node with "Third" content

    const end = div.querySelector("#end");

    range.setEnd(end, 0);

    return range;

},

  "First\nSecond\n",

  "<div id=\"start\">First</div>\n" +

    "    <div>Second</div>\n" +

    "    <div><div id=\"end\"></div></div>"

);

testSelectAndSerialize(

  "Test selecting range with end after the comment node",

  () => {

    const div = document.querySelector("div#comment");

    const range = document.createRange();

    // Start at the beginning of the <div> with "First" text node

    const start = div.querySelector("#start");

    range.setStart(start, 0);

    // End after thecomment node with "Third" content

    const end = div.querySelector("#end");

    range.setEnd(end, 1);

    return range;

},

  "First\nSecond\n",

  "<div id=\"start\">First</div>\n" +

    "    <div>Second</div>\n" +

    "    <div><div id=\"end\"><!-- Third --></div></div>"

);

testSelectAndSerialize(

  "Test selecting range with end in the beginning of comment node",

  () => {

    const div = document.querySelector("div#comment");

    const range = document.createRange();

    // Start at the beginning of the <div> with "First" text node

    const start = div.querySelector("#start");

    range.setStart(start, 0);

    // End at the comment node with "Third" content

    const end = div.querySelector("#end");

    range.setEnd(end.firstChild, 0);

    return range;

},

  "First\nSecond\n",

  "<div id=\"start\">First</div>\n" +

    "    <div>Second</div>\n" +

    "    <div><div id=\"end\"><!-- Third --></div></div>"

);

testSelectAndSerialize(

  "Test selecting range with end in the comment node with non-zero offset",

  () => {

    const div = document.querySelector("div#comment");

    const range = document.createRange();

    // Start at the beginning of the <div> with "First" text node

    const start = div.querySelector("#start");

    range.setStart(start, 0);

    // End at the comment node with "Third" content with non-zero offset.

    const end = div.querySelector("#end");

    range.setEnd(end.firstChild, 1);

    return range;

},

  // XXX We always promote the end point to the end of the comment node, if the

  // range contains only part of the comment node.

  "First\nSecond\n",

  "<div id=\"start\">First</div>\n" +

    "    <div>Second</div>\n" +

    "    <div><div id=\"end\"><!-- Third --></div></div>"

);

</script>

</body>

</html>