<!DOCTYPE html>
<html>
<body>

<div id="targetContainer" style="position: relative;"></div>
<div id="comparisonContainer" style="position: relative;"></div>

<script src="../../../resources/js-test-pre.js"></script>
<script><!--
description("HTMLContentElement should be able to survive even outside shadow.");

function removeContainerLines(text)
{
    var lines = text.split("\n");
    lines.splice(0, 2);
    return lines.join("\n");
}

var cases = [
    ["<div><content></content></div>",
     "<div><unknown></unknown></div>"],
    ["<div><content>Here is a text.</content></div>",
     "<div><unknown>Here is a text.</unknown></div>"],
    ["<div><content><div>Here is a </div><div>series of</div><div>blocks</div></content></div>",
     "<div><unknown><div>Here is a </div><div>series of</div><div>blocks</div></unknown></div>"],
    ["<div><content><span>Here is a<span><span>series of</span><span>inlines.</span></content></div>",
     "<div><unknown><span>Here is a<span><span>series of</span><span>inlines.</span></unknown></div>"],
    ["<div><content>Here is a <content>nested content</content> inside content.</content></div>",
     "<div><unknown>Here is a <unknown>nested content</unknown> inside content.</unknown></div>"],
    ["<div><content>Here is a <div>block and <content>nested content</content> inside the block</div>.</content></div>",
     "<div><unknown>Here is a <div>block and <unknown>nested content</unknown> inside the block</div>.</unknown></div>"]
];

var targetContainer = document.getElementById("targetContainer");
var comparisonContainer = document.getElementById("comparisonContainer");

for (var i = 0; i < cases.length; ++i) {
    var targetMarkup = cases[i][0];
    var expectedMarkup = cases[i][1];

    targetContainer.innerHTML = targetMarkup;
    comparisonContainer.innerHTML = expectedMarkup;
    targetRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(targetContainer));
    targetRenderTree = targetRenderTree.replace(/CONTENT/g, "UNKNOWN");
    comparisonRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(comparisonContainer));
    debug(escapeHTML(targetMarkup));
    shouldBe("targetRenderTree", "comparisonRenderTree");
}

targetContainer.innerHTML = comparisonContainer.innerHTML = "";

--></script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>