| <!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> |
