<!DOCTYPE html>
<html>
<head>
<style>
/* relative positioning ensures underlying RenderLayer */
.container {
    position: relative;
}
</style>
<script>
function log(message)
{
    var line = document.createElement("div");
    line.textContent = message;
    document.getElementById("console").appendChild(line);
}

var contentSources = [
  "<div/>",
  "#text<div/>",
  "<div/>#text",
  "#text<div/>#text",

  "<span/>",
  "#text<span/>",
  "<span/>#text",
  "#text<span/>#text",

  "<span/>#text<div/>",
  "<div/>#text<span/>",
  "<div/><span/>",
  "<span/><div/>"

];

var shadowSources = [
  "<content/>",
  "<div/><content/><div/>",
  "<div/><content/><span/>",
  "<span/><content/><span/>",
  "<span/><content/><div/>",

  "<div/><content/><div/>",
  "<div/><content/><span/>",
  "<span/><content/><span/>",
  "<span/><content/><div/>",

  "<div/>#text<content/>#text<div/>",
  "<div/>#text<content/>#text<span/>",
  "<span/>#text<content/>#text<span/>",
  "<span/>#text<content/>#text<div/>",

  "<div><content/></div>",
  "<span><content/></span>"
];

function createTreeFrom(html)
{
    var enhancedHtml = html.replace(/<span\/>/g, "<span> </span>").replace(/<div\/>/g, "<div> </div>").replace(/<content\/>/g, "<content></content>").replace(/#text/g, " ");
    var root = document.createElement("blockquote");
    root.innerHTML = enhancedHtml;
    var contentPlaceholder = root.getElementsByTagName("CONTENT")[0];
    if (contentPlaceholder) {
        var contentParent = contentPlaceholder.parentNode;
        contentParent.replaceChild(window.internals.createContentElement(), contentPlaceholder);
    };

    return root;
}

function moveChildren(fromParent, toParent)
{
    var children = fromParent.childNodes;
    while (fromParent.firstChild)
        toParent.appendChild(fromParent.firstChild);
}

function createTargetTree(contentHtml, shadowHtml)
{
    var content = createTreeFrom(contentHtml);
    var shadow = createTreeFrom(shadowHtml);
    var host = document.createElement("blockquote");
    var shadowRoot = internals.ensureShadowRoot(host);
    moveChildren(content, host);
    moveChildren(shadow, shadowRoot); 
    return host;
}

function cleanupContainer(container)
{
    var child = container.firstChild;
    if (child)
        container.removeChild(child);
    container.offsetLeft;
}

function testWithContentAndShadow(contentHtml, shadowHtml, label)
{
    var targetContainer = document.getElementById("targetContainer");
    cleanupContainer(targetContainer);
    var target = createTargetTree(contentHtml, shadowHtml);
    targetContainer.appendChild(target);
    var targetRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(targetContainer));

    var referenceContainer = document.getElementById("referenceContainer");
    cleanupContainer(referenceContainer);
    var separator = "<!-- -->"; // Uses a separator for keeping text node separate.
    var referenceHtml = shadowHtml.replace("<content/>", (separator + contentHtml + separator));
    var reference = createTreeFrom(referenceHtml);
    referenceContainer.appendChild(reference);
    var referenceRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(referenceContainer));
    if (targetRenderTree == referenceRenderTree)
        log("PASS[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
    else {
        log("FAIL[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
        log("Expected: (for " + reference.innerHTML + ")");
        log(referenceRenderTree);
        log("Actual: (for " + target.innerHTML + ")");
        log(targetRenderTree);
    }
}

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

function test()
{
    testRunner.dumpAsText();
    log("This test compares a shadow-based render tree with one for a reference DOM tree.");
    log("Note that this test only runs on DRT.");

    for (var i = 0; i < contentSources.length; ++i) {
        for (var j = 0; j < shadowSources.length; ++j) {
            var testLabel = i + "," + j;
            testWithContentAndShadow(contentSources[i], shadowSources[j], testLabel);
        }
    } 

    document.getElementById("test").style.display = "none";
    document.getElementById("console").style.display = "block";
}
</script>
</head>
<body onload="test()">
<div id="test">
<div class="container" id="targetContainer"></div>
<div class="container" id="referenceContainer"></div>
</div>
<pre id="console" style="display: none;"></pre>
</body>
</html>