<!DOCTYPE html>
<html>
<body>
<div id="root">
    <span>
        <span id="target"></span>
    </span>
</div>
<script src="../../resources/js-test-pre.js"></script>
<script>

description('Tests dispatching an event that bubbles inside a detached tree. The event should propagate to the ancestors of the target');

var log;

function dispatchEventWithLog(target) {
    log = [];
    for (var node = target; node; node = node.parentNode)
        node.addEventListener('foo', (function (event) { log.push([this, event.target]); }).bind(node));
    target.dispatchEvent(new Event("foo", {bubbles: true}));
}

function cloneNode(node) {
    range = new Range;
    range.selectNode(node);
    return range.cloneContents();
}

var target = document.getElementById("target");
var root = document.getElementById("root");

evalAndLog('clonedRoot = cloneNode(root)');
evalAndLog('clonedTarget = clonedRoot.getElementById("target"); dispatchEventWithLog(clonedTarget);');

shouldBeTrue('clonedRoot instanceof DocumentFragment');
shouldBe('log.length', '4');
shouldBe('log[0]', '[clonedTarget, clonedTarget]');
shouldBe('log[1]', '[clonedTarget.parentNode, clonedTarget]');
shouldBe('log[2]', '[clonedTarget.parentNode.parentNode, clonedTarget]');
shouldBe('log[3]', '[clonedRoot, clonedTarget]');
shouldBeNull('clonedRoot.parentNode');

debug('');
evalAndLog('root.remove(); dispatchEventWithLog(target);');

shouldBe('log.length', '3');
shouldBe('log[0]', '[target, target]');
shouldBe('log[1]', '[target.parentNode, target]');
shouldBe('log[2]', '[root, target]');
shouldBeNull('root.parentNode');

var successfullyParsed = true;

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