103 lines
3.4 KiB
HTML
103 lines
3.4 KiB
HTML
<!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>
|