<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="anchor"></div>
<script>

description("This test checks that setting an element's .innerHTML to an identical subtree correctly detaches the replaced nodes from the document, and that any references to that subtree continue to work as expected, with custom properties intact.");

function test(rootTagName, innerTagName)
{
    htmlString = "<" + rootTagName + "><" + innerTagName + ">text here</" + innerTagName + "></" + rootTagName + ">";

    subtreeRoot = document.createElement(rootTagName);
    innerElement = document.createElement(innerTagName);
    subtreeRoot.appendChild(innerElement);
    textNode = document.createTextNode("text here");
    innerElement.appendChild(textNode);

    subtreeRoot.hasCustomProperty = true;
    innerElement.hasCustomProperty = true;
    textNode.hasCustomProperty = true;

    anchorPoint = document.getElementById("anchor");
    anchorPoint.appendChild(subtreeRoot);

    htmlescaped = escape(htmlString).replace(/%(..)/g,"&#x$1;");
    debug("\nTesting with subtree: " + htmlescaped + "\n");

    shouldBe("anchorPoint.innerHTML", "htmlString");

    shouldBe("subtreeRoot", "anchorPoint.firstChild");
    shouldBe("subtreeRoot.parentNode", "anchorPoint");
    shouldBe("innerElement.parentNode", "subtreeRoot");
    shouldBe("textNode.parentNode", "innerElement");
    shouldBe("subtreeRoot.hasCustomProperty", "true");
    shouldBe("innerElement.hasCustomProperty", "true");
    shouldBe("textNode.hasCustomProperty", "true");
    shouldBe("anchorPoint.firstChild.hasCustomProperty", "true");
    shouldBe("anchorPoint.firstChild.firstChild.hasCustomProperty", "true");
    shouldBe("anchorPoint.firstChild.firstChild.firstChild.hasCustomProperty", "true");

    debug("\nSetting anchorPoint.innerHTML to identical DOM, subtree should become detached.\n");
    anchorPoint.innerHTML = htmlString;

    shouldBe("anchorPoint.innerHTML", "htmlString");
    shouldNotBe("subtreeRoot", "anchorPoint.firstChild");
    shouldBe("subtreeRoot.parentNode", "null");
    shouldBe("innerElement.parentNode", "subtreeRoot");
    shouldBe("textNode.parentNode", "innerElement");
    shouldBe("subtreeRoot.hasCustomProperty", "true");
    shouldBe("innerElement.hasCustomProperty", "true");
    shouldBe("textNode.hasCustomProperty", "true");
    shouldNotBe("anchorPoint.firstChild.hasCustomProperty", "true");
    shouldNotBe("anchorPoint.firstChild.firstChild.hasCustomProperty", "true");
    shouldNotBe("anchorPoint.firstChild.firstChild.firstChild.hasCustomProperty", "true");

    anchorPoint.innerHTML = '';
}

tags = [ 'a', 'b', 'i', 'u', 'div', 'span', 'canvas', 'object', 'a' ];

for (var i = 0; i < tags.length; ++i) {
    for (var j = 0; j < tags.length; ++j) {
        // Skip doing <foo><foo>text</foo></foo> since the parser will
        // do tree fixup in some cases and break the test function.
        if (tags[i] == tags[j])
            continue;
        test(tags[i], tags[j]);
    }
}

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