blob: a01ce0d3645d38f47e5267eac9d8e0f486d1a646 [file] [log] [blame]
<!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>