<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/protocol-test.js"></script>
<style>
.test-pseudo-without-content::before {
    color: red;
}
.test-pseudo-with-content::before {
    content: "TEST";
}
</style>
<script>

function createElementWithClass(className) {
    let element = document.body.appendChild(document.createElement("div"));
    element.classList.add(className);
}

function removeElementWithClass(className) {
    let element = document.querySelector(`.${className}`);
    element.classList.remove(className);

    // Don't remove the element, as that removes the entire subtree rather than just the pseudo element.
}

function test() {
    let documentNode = null;
    let pseudoElementAdded = null;
    let pseudoElementRemoved = null;

    function handlePromiseReject(error) {
        console.log(error);
        ProtocolTest.log(error);
        ProtocolTest.completeTest();
    }

    function evaluateWithLog(expression) {
        ProtocolTest.log("");
        ProtocolTest.log(`Calling "${expression}"...`);
        return ProtocolTest.evaluateInPage(expression)
        .catch(handlePromiseReject);
    }

    function checkElementsWithClass(className, expectedCount) {
        ProtocolTest.log(`Checking for nodes with class ".${className}"...`);
        return InspectorProtocol.awaitCommand({
            method: "DOM.querySelectorAll",
            params: {
                nodeId: documentNode.nodeId,
                selector: `.${className}`,
            },
        })
        .then((result) => {
            ProtocolTest.expectEqual(result.nodeIds.length, expectedCount, `There should be ${expectedCount} node with the class ".${className}".`);
        })
        .catch(handlePromiseReject);
    }

    function createElementWithClass(className, shouldCheckElement) {
        return evaluateWithLog(`createElementWithClass("${className}")`)
        .then(() => checkElementsWithClass(className, 1))
        .then(() => {
            if (shouldCheckElement) {
                if (pseudoElementAdded)
                    ProtocolTest.pass(`Created ::${pseudoElementAdded.pseudoType} pseudo element`);
                else
                    return pseudoElementAddedPromise.then(() => { ProtocolTest.pass(`Created ::${pseudoElementAdded.pseudoType} pseudo element`); });
            }
        })
        .catch(handlePromiseReject);
    }

    function removeElementWithClass(className, shouldCheckElement) {
        return evaluateWithLog(`removeElementWithClass("${className}")`)
        .then(() => checkElementsWithClass(className, 0))
        .then(() => {
            if (shouldCheckElement) {
                if (pseudoElementRemoved)
                    ProtocolTest.expectEqual(pseudoElementRemoved.pseudoElementId, pseudoElementAdded.nodeId, `Removed ::${pseudoElementAdded.pseudoType} pseudo element`);
                else
                    return pseudoElementRemovedPromise.then(() => { ProtocolTest.expectEqual(pseudoElementRemoved.pseudoElementId, pseudoElementAdded.nodeId, `Removed ::${pseudoElementAdded.pseudoType} pseudo element`); });
            }
        })
        .catch(handlePromiseReject);
    }

    let pseudoElementAddedPromise = InspectorProtocol.awaitEvent({event: "DOM.pseudoElementAdded"}).then((event) => { pseudoElementAdded = event.params.pseudoElement});
    let pseudoElementRemovedPromise = InspectorProtocol.awaitEvent({event: "DOM.pseudoElementRemoved"}).then((event) => { pseudoElementRemoved = event.params});


    ProtocolTest.log("Requesting document...");
    InspectorProtocol.sendCommand("DOM.getDocument", {}, (response) => {
        InspectorProtocol.checkForError(response);

        documentNode = response.result.root;

        Promise.resolve()
        .then(() => createElementWithClass("test-pseudo-without-content"), false)
        .then(() => removeElementWithClass("test-pseudo-without-content"), false)
        .then(() => createElementWithClass("test-pseudo-with-content", true))
        .then(() => removeElementWithClass("test-pseudo-with-content", true))
        .then(() => ProtocolTest.completeTest())
        .catch(handlePromiseReject);
    });
}

</script>
</head>
<body onload="runTest()">
    <p>Testing when CSS.events.pseudoElementCreated and CSS.events.pseudoElementDestroyed are fired.</p>
</body>
</html>