<!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 pseudoElement = 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) {
        return evaluateWithLog(`createElementWithClass("${className}")`)
        .then(() => checkElementsWithClass(className, 1))
        .catch(handlePromiseReject);
    }

    function removeElementWithClass(className) {
        return evaluateWithLog(`removeElementWithClass("${className}")`)
        .then(() => checkElementsWithClass(className, 0))
        .catch(handlePromiseReject);
    }

    InspectorProtocol.eventHandler["DOM.pseudoElementAdded"] = (response) => {
        pseudoElement = response.params.pseudoElement;

        ProtocolTest.pass(`Created ::${pseudoElement.pseudoType} pseudo element`);
    };

    InspectorProtocol.eventHandler["DOM.pseudoElementRemoved"] = (response) => {
        ProtocolTest.expectEqual(response.params.pseudoElementId, pseudoElement.nodeId, `Removed ::${pseudoElement.pseudoType} pseudo element`);
    };

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

        documentNode = response.result.root;

        Promise.resolve()
        .then(() => createElementWithClass("test-pseudo-without-content"))
        .then(() => removeElementWithClass("test-pseudo-without-content"))
        .then(() => createElementWithClass("test-pseudo-with-content"))
        .then(() => removeElementWithClass("test-pseudo-with-content"))
        .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>