<!doctype html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function createDetachedNode()
{
    window.__testDetachedNode = document.createElement("div");
    window.__testDetachedNode.id = "script-created-node";
    return window.__testDetachedNode;
}

function insertDetachedNode()
{
    let parentElement = document.getElementById("a");
    parentElement.insertBefore(window.__testDetachedNode, parentElement.firstChild);
}

function removePreviouslyDetachedNode()
{
    window.__testDetachedNode.remove();
}

function test()
{
    let suite = InspectorTest.createAsyncSuite("DOM.attachedNodes");

    async function ensureDocumentSubtree() {
        let documentNode = await WI.domManager.requestDocument();

        const entireSubtreeDepth = -1;
        await WI.assumingMainTarget().DOMAgent.requestChildNodes(documentNode.id, entireSubtreeDepth);
    }

    function logNodes(nodesIterator) {
        InspectorTest.log("Dumping nodes:")
        for (let node of nodesIterator) {
            // Each test adds more content to the DOM tree, but we don't want to clutter test output with those.
            if (node.escapedIdSelector === "#end-of-prewritten-test-content")
                break;
            
            logNode(node);
        }
    }

    function logNode(node) {
        if (node.nodeType() === Node.TEXT_NODE)
            InspectorTest.log("  [text node]");
        else
            InspectorTest.log("  " + node.unescapedSelector);
    }

    suite.addTestCase({
        name: "DOM.attachedNodes.Unfiltered",
        description: "Ensure that `attachedNodes` provides a correctly ordered list of all attached DOM nodes.",
        async test() {
            await ensureDocumentSubtree();
            logNodes(WI.domManager.attachedNodes());
        }
    });

    suite.addTestCase({
        name: "DOM.attachedNodes.Filtered",
        description: "Ensure that `attachedNodes` correctly filters nodes.",
        async test() {
            await ensureDocumentSubtree();
            logNodes(WI.domManager.attachedNodes({filter: (node) => node.nodeNameInCorrectCase() === "div"}));
        }
    });

    suite.addTestCase({
        name: "DOM.attachedNodes.DetachedNode",
        description: "Ensure that `attachedNodes` provides a correctly ordered list of all attached DOM nodes, and ignored detached nodes that are known to the backend.",
        async test() {
            await ensureDocumentSubtree();

            InspectorTest.log("Creating detached node...");
            let detachedNodeRemoteObject = await InspectorTest.evaluateInPage(`createDetachedNode()`);
            let detachedNodeId = (await WI.assumingMainTarget().DOMAgent.requestNode(detachedNodeRemoteObject.objectId)).nodeId;
            let detachedNode = WI.domManager.nodeForId(detachedNodeId);
            InspectorTest.log("Created detached node: " + detachedNode.unescapedSelector);

            logNodes(WI.domManager.attachedNodes());

            InspectorTest.log("Attaching node to DOM tree...");
            await Promise.all([
                InspectorTest.evaluateInPage(`insertDetachedNode()`),
                WI.domManager.awaitEvent(WI.DOMManager.Event.NodeInserted),
            ]);
            InspectorTest.log("DOM node attached to tree.");

            logNodes(WI.domManager.attachedNodes());

            InspectorTest.log("Detaching node from DOM tree...");
            await Promise.all([
                InspectorTest.evaluateInPage(`removePreviouslyDetachedNode()`),
                WI.domManager.awaitEvent(WI.DOMManager.Event.NodeRemoved),
            ]);
            InspectorTest.log("DOM node detached from tree.");

            logNodes(WI.domManager.attachedNodes());
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>
#a::before {
    content: "before";
}

#a::after {
    content: "after";
}
</style>
</head>
<body onload="runTest()">
<p id="test-description">Tests for the DOMManager.attachedNodes.</p>
<div id="a">
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
</div>
<div id="b">
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
</div>
<div id="end-of-prewritten-test-content"></div>
</body>
</html>